用javascript做一个webgame连连看大家看下

2016-02-19 08:58 9 1 收藏

今天图老师小编要跟大家分享用javascript做一个webgame连连看大家看下,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

最后成品代码写的仓促,没有容错,封装也不合理,只实现了核心部分,其他部分,喜欢添加的旧添加吧。

下面就开始我的教程(姑且算是教程吧,草草写点吧,时间太少,大家原谅)

以最高难度游戏级别作的分析。
第一步,大体分析
看看游戏主要包含哪些元素,发现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 全选 注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1589036.html

延伸阅读
标签: PS
PS 五种快速抠图技巧连连看(www.tulaoshi.com)   简单图像抠图法1:魔棒工具 不管是摄影还是制图,我们经常会使用到Photoshop这个神奇的软件。它能够秒杀世 界上任何化妆品、减肥产品,也可以让你的世界从此变得与众不同。在我们后期的过程中,我们经常会遇到抠图这个步骤,但是很多人看到这个步骤就会十分头疼,尤其是对于...
效果图: 制作教程:
《海岛奇兵》兵种搭配与建议 多种组合连连看 《海岛奇兵》兵种一共有几大种,随着等级的提升会解锁不同的兵种。对于老玩家来说自然是无比清晰怎么搭配和培养,而对于新手玩家还是有些困惑,今天就带来一篇造福新手前期玩家的关于兵种搭配与建议的攻略,一起看下吧~ 1~4本:解锁胖子和步兵 ①纯步兵流:遇到单体攻击防御塔(如狙击塔...
package model . components { import de . polygonal . ds . Array2 ; import de . polygonal . ds . DLinkedList ; import de . polygonal . ds . Iterator ; import flash . geom . Point ; import utils .*; /** * 连连看算法 * @author Luan (verycss-ok@yahoo.com.cn) */ public clas...
平时的工作很忙,只有买花的时间,买花瓶的时间则抽不出来了,而又不想马马虎虎的买一个来将就,想来想去还是自己亲手做一个吧,即是自己的劳动成果,还可以根据自己的爱好自己制作心中的所爱。于是就用一些铁丝的麻绳自己做了一个,呵呵,乱想出来的,虽然有一些简陋,不过还是蛮有味道的,效果用艺术的眼光看或许会好看些。把你的想象力和灵...

经验教程

241

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部