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

2016-02-19 08:58 6 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需刷新才能执行]

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

延伸阅读
效果图: 制作教程:
标签: PS
PS 五种快速抠图技巧连连看(www.tulaoshi.com)   简单图像抠图法1:魔棒工具 不管是摄影还是制图,我们经常会使用到Photoshop这个神奇的软件。它能够秒杀世 界上任何化妆品、减肥产品,也可以让你的世界从此变得与众不同。在我们后期的过程中,我们经常会遇到抠图这个步骤,但是很多人看到这个步骤就会十分头疼,尤其是对于...
平时的工作很忙,只有买花的时间,买花瓶的时间则抽不出来了,而又不想马马虎虎的买一个来将就,想来想去还是自己亲手做一个吧,即是自己的劳动成果,还可以根据自己的爱好自己制作心中的所爱。于是就用一些铁丝的麻绳自己做了一个,呵呵,乱想出来的,虽然有一些简陋,不过还是蛮有味道的,效果用艺术的眼光看或许会好看些。把你的想象力和灵...
标签: ASP
  http://www.chaoshan.com/lazyboy/google/google.asp http://www.chaoshan.com/lazyboy/google/google.asp?keyword=中华人民共和国 转自:动态网制作指南 www.knowsky.com 下载 http://www.chaoshan.com/lazyboy/google/google.rar  
手工南瓜灯视频教程 切开小口 南瓜也是有要求的,不要选特大号适量选中等大小,先在南瓜表面弄一个开口,尽量小一点将里面的籽和馕挖出来,切下南瓜的雕刻面,并根据雕刻面大小打印设计图案。 雕刻南瓜 先切下南瓜表面的一层,可以自己设计图案,将其雕刻在南瓜上,在这里我所用的图案比较简单就是五角星、小圆圈等,用...

经验教程

226

收藏

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