上周五突然接到一个重磅消息：公司决定开发首款手机小游戏，运行平台是淘宝app上的微淘平台。这个微淘平台从技术上讲是一个能运行html5的平台，跟微信比较类似。接到这样的任务，我自然很高兴呀，因为这也是我的第一款手机游戏了。经过一个周末的奋战，算是初步把这个游戏跑起来了。在写之前我也是查看了不少算法和实际线上代码，因为这都是个被写烂了的游戏了，那么你只要百度一下‘连连看算法’的话你基本都不用自己写了，算法也有好几种，一开始我也比较迷惑，不知道从何下手，经过几番比较，我还是选择了自己的一种简单算法，如果跟你或者跟你看到的算法有雷同，那么只能说我看到过的连连看算法还是太少了。不过我这个算法并没有确保开局的科学性，也就是没有对开局有深度计算确保这个连连看是可玩的，但是因为在7*7=49个方格子上只有20个图片，按照这个疏密程度来看的话，开局不可解的情况是相当少的，我自己测了过百次也没有遇到这样的情况。好了我们开始吧！！！
先看一下游戏的界面：一点击开始，游戏就开始计时，顶部的折扣会飞速上升，如果玩家玩的速度太慢的话那么只能拿到一个他都不想要的折扣了，呵呵
<img src="png0.jpg" id="png0"/><img src="png1.jpg" id="png1"/><img src="png2.jpg" id="png2"/><img src="png3.jpg" id="png3"/><img src="png4.jpg" id="png4"/>
<img src="png5.jpg" id="png5"/><img src="png6.jpg" id="png6"/><img src="png7.jpg" id="png7"/><img src="png8.jpg" id="png8"/><img src="png9.jpg" id="png9"/>
<img src="head.jpg" id="head"/>
<div id="main">
<canvas id="gameHead"></canvas>
<canvas id="gameBody"></canvas>
<div id="startGame"><span>开始</span></div>
</div>
这段算是最主要的html代码。你看到的顶部的那10张图片是display:none掉的，我之所以放是因为，在js里面，我需要在一个数组里面存放这十个图片的原生对象，那么为了早点下载这个图片呢，我希望他们随着html一起下载，而不是到时候通过var
img = new
Image();img.src=‘png0.png‘这种形式来加载，方便加快游戏加载速度。这个#main是游戏的主题，里面存放了两个canvas，第一个canvas用于写当前折扣，下面一个canvas才是玩游戏的主场。下面我们着重讲javascript部分:
var gridW = document.width / 7;//每一个格子的宽度，根据屏幕的宽度来定，做到自适应
var gridH = document.width / 7;
var get = function(str){
return document.getElementById(str);
};
var pngs;
var leftPair = 10;
var nums = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10];//此数组用于随机的布局20张图片，图片只有10种，每种2张，到时候逐一取出数字来，再从pngs这个数组上取出图片对象
var Darray = [];//这个太重要了，这个是一个7*7的二维数组，通过这个数组，我能够知道在某一点上有没有物体，以及两个物体是不是同一个物体，这样才能判断我需不需要对两个物体进行消除计算，他的初始化在下方
var gameStart = false;//游戏有没有开始的标记，false表示不能开始，点击无效
var canvas = document.getElementById("gameBody");
var canvas_x = canvas.offsetLeft;//游戏canvas距离屏幕左边的距离
var canvas_y = canvas.offsetTop;
var cxt = canvas.getContext(‘2d‘);
window.onload = function(){
pngs = [get(‘png0‘), get(‘png1‘), get(‘png2‘), get(‘png3‘), get(‘png4‘), get(‘png5‘), get(‘png6‘), get(‘png7‘), get(‘png8‘), get(‘png9‘)];//图片都加载好以后我就把图片对象保存到这个pngs对象上
pngs = pngs.concat(pngs);//需要20张图片，那么我就再通过concat方法复制一遍这个pngs
timing(‘0.0折‘);//游戏未开始时先设置为0.0折
layout();//做好布局，此时还不能玩，只是布局好看看
get(‘startGame‘).addEventListener(‘click‘,function(e){//点击开始这个大按钮开始计时，gameStart也变为true
timing();
gameStart = true;
this.style.display = ‘none‘;
e.stopPropagation();
});
}
function layout(){//layout这个函数呢，就是首先生成一个7*7的二维数组，再进行图片的随机布局，我们接着看
for(var i = 0 ; i < 7 ; i ++){
Darray[i] = [0, 0, 0, 0, 0, 0, 0];
}
while(nums.length){//只要nums这个数组还有长度，就说明还没有布局好，nums这个数组是布局一张图片减少一个数组项的
var _ = Math.floor(Math.random() * 7 + 0);//这两部随机生成一个横坐标和纵坐标来随机决定在哪个坑上放图片
var $ = Math.floor(Math.random() * 7 + 0);
if(! Darray[_][$]){//如果这个坑上还没有图片，那就放上去，并且把nums shift掉一个
Darray[_][$] = nums.shift();
cxt.drawImage(pngs[Darray[_][$] - 1] , $ * gridW , _ * gridH , gridW , gridH);
}
}
}
window.coor_1 = null;//这两个玩意重要了，他们是当前被点击的两张图片的经纪人，到时候就根据他两来决定要不要进一步的消除算法
window.coor_2 = null;
/*下面这段要好好讲一下，这里存在一个兼容性问题，就在昨天下班前，document.body这个位置还是canvas，在不太老的安卓机器上跑得很顺畅，但是在安卓2.3或者更老的机器上，出现这样一个问题：点击canvas就会出现一个透明框，一个不太敢确定的原///因是，安卓2.3上的html5 canvas一旦监听click事件，一点击就出现这个透明框，用其他的比如touchstart之类的事件是没有问题的，找来找去没找到方案，最好主管提示我可以把事件绑定在全局上，那么稍作修改，也能跑，并且老安卓也ok了。*/
document.body.addEventListener(‘click‘ , function(e){
if(!gameStart){
return;
}
var coor_x = Math.floor((e.pageY-canvas.offsetTop) / gridW);
var coor_y = Math.floor(e.pageX / gridW);
if(! Darray[coor_x][coor_y]){
return;
}
if(! window.coor_1){
window.coor_1 = [coor_x, coor_y];
drawRect(window.coor_1);
}else{
window.coor_2 = [coor_x, coor_y];
if(Darray[window.coor_1[0]][window.coor_1[1]] != Darray[window.coor_2[0]][window.coor_2[1]] || window.coor_1.join(‘;‘) == window.coor_2.join(‘;‘)){
cleanRect(window.coor_1);
window.coor_1 = null;
window.coor_2 = null;
return;
}else if(window.coor_1 && window.coor_2){
zeroCorner(window.coor_1 , window.coor_2 , true);
}
}
e.stopPropagation();
} , false);function zeroCorner(coor_1 , coor_2 , next){
if(coor_1[0] != coor_2[0] && coor_1[1] != coor_2[1]){
oneCorner(coor_1 , coor_2 , true);
return;
}
if(coor_1[0] == coor_2[0]){
var start = Math.min(coor_1[1] , coor_2[1]) + 1;
var end = Math.max(coor_1[1] , coor_2[1]);
var arr = Darray[coor_1[0]].slice(start , end);
if(! Math.max.apply(null , arr) || ! arr.length){
if(next){
clear(coor_1 , coor_2);
}else{
return true;
}
}else if(next){
oneCorner(coor_1 , coor_2 , true);
}
}else if(coor_1[1] == coor_2[1]){
var satrt = Math.min(coor_1[0] , coor_2[0]) + 1;
var end = Math.max(coor_1[0] , coor_2[0]);
var arr = [];
for(var i = satrt ; i < end ; i ++){
arr.push(Darray[i][coor_1[1]]);
}
if(! Math.max.apply(null , arr) || ! arr.length){//如果最大值是0或者两者是隔壁，说明此路可走
if(next){
clear(coor_1 , coor_2);
}else{
return true;
}
}else if(next){
oneCorner(coor_1 , coor_2 , true);
}
}
}
function oneCorner(coor_1 , coor_2 , next){
var Diagonal_1 = [coor_2[0], coor_1[1]];
var Diagonal_2 = [coor_1[0], coor_2[1]];
if(! Darray[Diagonal_1[0]][Diagonal_1[1]] && zeroCorner(Diagonal_1 , coor_1 , false) && zeroCorner(Diagonal_1 , coor_2 , false)){/*如果行得通*/
if(next){
clear(coor_1 , coor_2);
}else{
return true;
}
}else if(! Darray[Diagonal_2[0]][Diagonal_2[1]] && zeroCorner(Diagonal_2 , coor_1 , false) && zeroCorner(Diagonal_2 , coor_2 , false)){
if(next){
clear(coor_1 , coor_2);
}else{
return true;
}
}else if(next){
twoCorner(coor_1 , coor_2);
}
}
function twoCorner(coor_1 , coor_2){
var coor_1_y = coor_1[0];
var coor_1_x = coor_1[1];
var coor_2_y = coor_2[0];
var coor_2_x = coor_2[1];
var coor_1_arr = [
[coor_1_y, 0],
[coor_1_y, 1],
[coor_1_y, 2],
[coor_1_y, 3],
[coor_1_y, 4],
[coor_1_y, 5],
[coor_1_y, 6],
[0, coor_1_x],
[1, coor_1_x],
[2, coor_1_x],
[3, coor_1_x],
[4, coor_1_x],
[5, coor_1_x],
[6, coor_1_x]
];
var coor_2_arr = [
[coor_2_y, 0],
[coor_2_y, 1],
[coor_2_y, 2],
[coor_2_y, 3],
[coor_2_y, 4],
[coor_2_y, 5],
[coor_2_y, 6],
[0, coor_2_x],
[1, coor_2_x],
[2, coor_2_x],
[3, coor_2_x],
[4, coor_2_x],
[5, coor_2_x],
[6, coor_2_x]
];
for(var i = 0 , len = coor_1_arr.length ; i < len ; i ++){
if(Darray[coor_1_arr[i][0]][coor_1_arr[i][1]]){
continue;
}
if(oneCorner(coor_1_arr[i] , coor_2 , false) && zeroCorner(coor_1_arr[i] , coor_1 , false)){
clear(coor_1 , coor_2);
return;
}
}
for(var i = 0 ; i < coor_2_arr.length ; i ++){
if(Darray[coor_2_arr[i][0]][coor_2_arr[i][1]]){
continue;
}
if(oneCorner(coor_2_arr[i] , coor_1 , false) && zeroCorner(coor_2_arr[i] , coor_2 , false)){
clear(coor_1 , coor_2);
return;
}
}
cleanRect(window.coor_1);
window.coor_1 = null;
window.coor_2 = null;
}
function clear(coor_1 , coor_2){
cxt.clearRect(coor_1[1] * gridW , coor_1[0] * gridH , gridW , gridH);
cxt.clearRect(coor_2[1] * gridW , coor_2[0] * gridH , gridW , gridH);
Darray[coor_1[0]][coor_1[1]] = 0;
Darray[coor_2[0]][coor_2[1]] = 0;
window.coor_1 = null;
window.coor_2 = null;
leftPair --;
if(! leftPair){
clearInterval(window.timingInterval);
gameStart = false;
document.getElementById(‘finish‘).style.display = ‘block‘;
}
}
function drawRect(coor){
cxt.save();
cxt.lineWidth = 4;
cxt.strokeStyle = ‘#f27b04‘;
cxt.lineJoin = ‘round‘;
cxt.strokeRect(coor[1] * gridW + 3 , coor[0] * gridH + 3 , gridW - 6 , gridH - 6);
cxt.restore();
}
function cleanRect(coor_1){
cxt.drawImage(pngs[Darray[coor_1[0]][coor_1[1]] - 1] , coor_1[1] * gridW , coor_1[0] * gridH , gridW , gridH);
}
var canvas_timing = get(‘gameHead‘);
var cxt_timing = canvas_timing.getContext(‘2d‘);
function timing(str){
cxt_timing.clearRect(0 , 0 , canvas_timing.width , canvas_timing.height);
cxt_timing.font = ‘40px impact‘;
cxt_timing.fillStyle = ‘red‘;
cxt_timing.textAlign = ‘center‘;
cxt_timing.textBaseline="middle";
if(str){
cxt_timing.fillText(str,canvas_timing.width/2,canvas_timing.height/2);
return;
}
var step = 0.05;
var discount = 0;
window.timingInterval = setInterval(function(){
cxt_timing.clearRect(0 , 0 , canvas_timing.width , canvas_timing.height);
cxt_timing.fillText(discount.toFixed(2) + ‘折‘,canvas_timing.width/2,canvas_timing.height/2);
discount = discount + step;
if(discount >= 10){
discount = 10;
clearInterval(window.timingInterval);
}
} , 80);
}get(‘playAgain‘).addEventListener(‘click‘, function () {
window.coor_1 = null;
window.coor_2 = null;
nums = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10];
leftPair = 10;
layout();
get(‘startGame‘).style.display = ‘block‘;
document.getElementById(‘finish‘).style.display = ‘none‘;
});