这是一款比较经典的连连看游戏源码,规则比较简单,基于html5实现的连连看网页游戏。游戏目前设置了7关,玩家可以逐级挑战,还可点击右下角【重置】进行位置调整,游戏有时间限制,重置没有次数限制。
![](https://img.haomeiwen.com/i15369823/781f3549f8c6b2c4.png)
游戏特点:
本源码实现了随机重排和背景以及点击音效。总共有初级、中级和高级三个难度可以设置,
不同的等级主要是背景不同,高级模式下有三层背景能够对玩家图像识别进行干扰。
游戏界面如下:
![](https://img.haomeiwen.com/i15369823/a89e38235182f830.png)
实现代码如下:
html的布局方式在index.html文件中
![](https://img.haomeiwen.com/i15369823/d4dc1c37c0b3a375.png)
css文件夹下的index.css文件如下:
![](https://img.haomeiwen.com/i15369823/185b3f4c2053ef52.gif)
核心代码
js部分分为三个源文件即game.js、map.js、piece.js每一个源文件对应一个类,其中本游戏通过game类来操纵map和图片piece对象:
![](https://img.haomeiwen.com/i15369823/848fda4232fa2e03.gif)
如果有想学习web前端的同学,可来我们的web前端技术学习QQ群:608334068,免费送整套系统的web前端视频教程!我每晚上8点还会在群内直播讲解前端知识,这是一个仅供粉丝朋友们学习交流的群,欢迎大家前来学习哦~不是学习web前端的小伙伴非诚勿扰哦下面是部分资料截图:
![](https://img.haomeiwen.com/i15369823/72f4bc166644f6da.png)
欢迎关注胖胖爱前端的简书号,可视化学习web前端,每天更新文章,让web前端学习更加简单。
声明:本文内容来源于网络,如有侵权请联系删除
网友评论