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

Javascript
innerHTML和innerText的用法
单击按钮复制定义好的内容到剪贴板
浏览器兼容性:停止事件冒泡和阻止浏览器的默认行为
javascript初学者:全面学习对象概念
10款图片展示Javascript代码
解决ajax跨域问题的实例
rails制作rss feed
javascript变量作用域在不同浏览器的处理
网页整理的JS技巧代码
js操作iframe的src的例子
Javascript利用循环绑定事件的例子
Javascript网页恶意代码
javascript恶意代码修改主页修复
JavaScript折叠式列表的网页制作
初学Javascript的总结
JavaScript编程实践中容易出错的地方
JavaScript容易犯错的九个陷阱
复制文章自动附加版权信息
MooTools教程(1):认识MooTools
MooTools教程(2):DOM选择器

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 252 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]