连连看小游戏前端实现

      上周五突然接到一个重磅消息：公司决定开发首款手机小游戏，运行平台是淘宝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';
});