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

Javascript
javascript 写类方式之九
javascript 写类方式之十
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
jquery BS,dialog控件自适应大小
javascript 面向对象思想 附源码
js 日期转换成中文格式的函数
JavaScript 对象、函数和继承
JavaScript 解析读取XML文档
javascript获取表格 td 中的内容
javascript xml为数据源的下拉框控件
jQuery 1.3 和 Validation 验证插件1.5.1
javascript 字符 Escape,encodeURI,encodeURIComponent
jquery text,radio,checkbox,select操作实现代码
JavaScript 继承的实现
JS 数组 移除 实现代码
javascript eval()应用实例 select
javascript 焦点的两个问题
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jquery 组合form元素为json格式,asp.net反序列化
window.onload 加载完毕的问题及解决方案(上)

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


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