当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript做一个webgame连连看大家看下

Javascript
javascript实现的鼠标悬停时动态翻滚的导航条
通过隐藏option实现select的联动效果
jquery 输入框数字限制插件
文字来回上下移动或跳动的代码
JS旋转的彩色文字轮转特效
不一样的文字闪烁 轮番闪烁
Javascript 解疑
jQuery 白痴级入门教程
Jquery在IE7下无法使用 $.ajax解决方法
javascript 日期常用的方法
ASP中进行HTML数据及JS数据编码函数
JS 中document.URL 和 windows.location.href 的区别
跨域表单提交状态的变相判断代码
JS解析XML的实现代码
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Javascript 定时器调用传递参数的方法
把html页面的部分内容保存成新的html文件的jquery代码
XHTML下,JS浮动代码失效的问题
两个select之间option的互相添加操作(jquery实现)
Jquery 获取表单text,areatext,radio,checkbox,select值的代码

Javascript 中的 用javascript做一个webgame连连看大家看下


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 110 ::
收藏到网摘: n/a

最后成品代码写的仓促,没有容错,封装也不合理,只实现了核心部分,其他部分,喜欢添加的旧添加吧。
下面就开始我的教程(姑且算是教程吧,草草写点吧,时间太少,大家原谅)
以最高难度游戏级别作的分析。
第一步,大体分析
看看游戏主要包含哪些元素,发现3部分,一些成对的图片块,一个能盛图片块的方盘容器,一个能连接两个图块的线。
第二步,元素分析
图块:图块一共有32种不同的图案,每种图案4张,图块会相应鼠标的点击,图块会消失,图块有高度和宽度。
方盘:能承载128个图块,2维承载,横向16块,纵向8块,方盘可以放图块,可以打乱已有图块的位置顺序。
连线:游戏的核心,连接两块图块得中心点,最多只能折两次,不能穿透图块,连线可以通过方盘外部
第三步,抽象
有了上面的分析,把3个元素抽象成3个对象,怎么抽象的,自己动脑吧,我写的代码就是因为动脑不足,导致封装乱七八糟的。
第四部,核心算法
1,洗牌算法(很简单的算法)
把2维数组的数据推到1维数组,交换数据中位置属性,重新按照位置放置元素

2,查找路径:
其实连连看最主要的地方就是如何查找两个图块之间的一条最多只有两个折点的路径,这里的实现方法有很多种,我这里实现的是找到的方法,不是最短路径或者最优路径的方法。
根据研究你会发现,连线可以分成两部分,一部分是法线,一部分是图块投影到法线上的射线,那么,我们就可以利用这个关系,查找一条路径。

首先,设两个图块A,B,那么每个图块都有X向和Y向两条射线,那么如果存在一条Y向法线在AB的X射线公共区之间,或者存在X向法线在AB的Y射线公共区之间,那么就找到了一条路径。
没有实现的地方:(这些基本都是无关紧要了,关口可以根据洗牌的方法很容易改造出来,有兴趣你就去实现吧)
计时、计分、提示、关口
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]