从本篇起，我将在此展示制作一些HTML5小游戏的过程和经验。本文描述的是一个经典又简单的小游戏，连连看。

1. 计划

1.1 目标

快速建立一个连连看游戏原形。
能玩就行。

1.2 游戏特性介绍

游戏展示一个m * n大小的表格
表格每个格子里面有一个图标/符号
每个图标都是成对出现
玩家需要找到每对匹配的图标/符号
如果玩家选中的两个图标/符号匹配并且其连线转折次数小于等于2次，则可以消除它们
连线不能通过未消除的图标/符号
连线可以通过已消除图标/符号
连线可以通过边框空白区
连线不能是斜线

1.3 技术选型

HTML5 网页
JavaScript ES5
CSS
为简单起见使用DIV来显示表格，不用游戏引擎，用字母和数字来代表图标

2. 核心算法

2.1 表格初始化算法

2.1.1 需求

表格需要填满
每个图标都要成对出现
图标的位置随机

2.1.2 实现

我们使用随机算法来实现。
* 按总格子数的一半生成随机图标/符号序列
* 把序列复制一份追加到尾部，这样保证每个图标都是成对的
* 随机从序列中取出图标/符号填充到表格中

var symbols = 'ABCDEFGHIGKLMNOPQRSTUVWXYZ123456789';
function reset(){var all = count = nx*ny;var halfAll = all/2;var tmp = [];for(var i=0;i<halfAll;i++){var c = symbols.charAt(Math.floor(Math.random()*35));tmp.push(c);tmp.push(c);}for(var i=all-1;i>=0;i--){var r = Math.floor(Math.random()*i);var c = tmp.splice(r,1);var y = Math.floor(i/nx);var x = i-y*nx;fc(x+1,y+1).innerHTML = c;}
}

2.2 路径查找算法

2.2.1 需求

消去规则：如果玩家先后选择的两个格子中图标相同而且可以在两次转弯内连通，即可消去。

2.2.2 转弯的判断

如下图所示
对于路径上连续的3个位置，如果第一个和第三个位置的x, y坐标都不同，说明在第二个位置转了一个弯。否则同一行，或者列的话，x，y 坐标总有一个相同。

2.2.3 路径的查找

使用深度优先的方式递归地求解，用一个栈来保存路径：

转弯次数不能超过2
如果当前格子同目标相同则表示找到了路径
如果不同就把当前位置入栈，然后递归地尝试其上下左右的邻居
邻居不能超过边界
邻居不能已经在路径上

function findPath(c/*当前位置*/, target/*目标位置*/, pathStack/*路径栈*/, trunCount/*已经转过的弯*/){if(!c){return false;}var c_2 = pathStack[pathStack.length-2];if(c_2&&c_2.x!=c.x&&c_2.y!=c.y){if(++trunCount>2){return false;}}if(c == target){pathStack.push(c);return true;}if(c.innerHTML != empty){return false;}if(pathStack.indexOf(c)>=0){return false;}pathStack.push(c);var nexts = neibors(c);//neibors函数用于查找当前位置的邻居位置，上下左右for(var i=0;i<nexts.length;i++){if(findPath(nexts[i], target, pathStack, trunCount)){return true;}}pathStack.pop();return false;
}

3. 游戏渲染

为了简单，这里使用简单的DIV+CSS来显示格子，使用字母数字作为图标/符号。对于nx * ny的游戏，实际上生成了(nx+2) * (ny+2)个格子，因为最外面一圈作为边框(border)，边框不填充图标，但可以作为连通的路径的一部分。

.border{display: inline-block;width: 40px;height:40px;font-weight: 600;font-size: 36px;margin:1px;
}
.border.showPath{background-color:#99FF00;
}
.cell{display: inline-block;width: 40px;height:40px;border:1px solid #0099FF;text-align: center;font-weight: 600;font-size:36px;background-color:#FFFFFF;color: #000000;
}
.cell.selected{background-color:#3399FF;color: #FFFFFF;
}
.cell.showPath{background-color:#99FF00;
}

4. 参数调优

游戏好不好玩，其实参数调整非常重要。对于连连看这个游戏主要需要考虑的参数有：

nx 与 ny即有多少行多少列。少了太简单，多了太难
图标/符号的个数，当nx * ny固定的时候，图标越多越难匹配

5. 可能的改进

5.1 功能上的改进

游戏界面可以添加开始按钮
游戏可以添加计时或倒计时功能
游戏可以提供不同难度
游戏可以为玩家在找不到的时候提供提示
游戏可以在无法配对时提供图标重排
游戏流程可以用状态机来管理，使得游戏可以玩很多局
游戏可以提供分享功能来在社交媒体上晒成绩

5.2 界面上的改进

使用真正的图标来填充，注意版权问题
重新设计布局，使其自动适应桌面和手机等不同屏幕
为游戏加上音效，如背景音乐，按钮音效，消除音效等，注意版权问题
为消除增加动画
为最后赢得游戏增加祝贺的动画

6. 代码及演示

请在这里查看代码及运行结果。

HTML5小游戏动手做（一）：简单的连连看相关推荐

HTML5小游戏动手做（二）：使用PIXI引擎制作坦克大战游戏
这里写自定义目录标题 1. 简介 1.1 PIXI 简介 1.2 坦克大战游戏简介 2. PIXI 引擎入门 2.1 基本概念 2.1.1 舞台 Stage 2.1.2 容器 Container 2. ...
html认识数字游戏大全,认识数字小游戏，就是这么简单！为孩子收藏
认识数字小游戏,就是这么简单!为孩子收藏宝宝进入幼儿园后,就会接触到数字.很多家长为了让孩子学到更多的知识,而强迫孩子认数.写字.其实,强迫学习,不仅起不到积极的作用,还会使孩子厌恶学习.因此,家长 ...
初识html5小游戏
本次Html5小游戏使用createjs来开发.基本涵盖这个游戏的全部核心代码. 如下是主要用到的元素: createjs.SpriteSheet 创建雪碧图,将生成好的雪碧图读取出来 createj ...
使用jquery—Canvas实现html5小游戏——《坦克大战》
目录 1.项目背景 2.项目展示 3.设计思路 3.1.坦克移动 3.2.坦克开火 3.3.击中坦克 4.实现代码 5.总结 1.项目背景 2021年春节期间在家无聊,正好又学过一些前端的知识,因此就 ...
微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
揭秘HTML5小游戏排名，究竟哪些游戏最受欢迎？
大家好!小编豆豆又回来啦,在之前的评测专辑中为大家介绍过本年度最受期待游戏排名,快随着我一起去TOM游戏平台,看看究竟哪些HTML5小游戏最受欢迎吧!揭秘HTML5小游戏排名TOP 5,也许你喜欢的微 ...
开发 HTML5 小游戏
Html5小游戏在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...
python简单小游戏代码教程,Python简单小游戏代码
球球各位大神怎么用python写一个猜词小游戏的代码? key = input('请输入一个单词:')description = input('输入单词描述:')chance = 5mark = 5p ...
动手做一个简单的智能小车
动手做一个简单的智能小车来到CNDN一年了,看到了许多大佬的杰出作品.也该写点什么来回馈给大家了前不久接触了单片机,想提前进行实践一下所以有想法做一个实体出来,想来想去难的怕自己搞不定,但是还好找到 ...

HTML5小游戏动手做（一）：简单的连连看