码迷,mamicode.com
首页 > 其他好文 > 详细

连连看小游戏前端实现

时间:2014-05-25 07:43:13      阅读:349      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   c   code   java   

      上周五突然接到一个重磅消息:公司决定开发首款手机小游戏,运行平台是淘宝app上的微淘平台。这个微淘平台从技术上讲是一个能运行html5的平台,跟微信比较类似。接到这样的任务,我自然很高兴呀,因为这也是我的第一款手机游戏了。经过一个周末的奋战,算是初步把这个游戏跑起来了。在写之前我也是查看了不少算法和实际线上代码,因为这都是个被写烂了的游戏了,那么你只要百度一下‘连连看算法’的话你基本都不用自己写了,算法也有好几种,一开始我也比较迷惑,不知道从何下手,经过几番比较,我还是选择了自己的一种简单算法,如果跟你或者跟你看到的算法有雷同,那么只能说我看到过的连连看算法还是太少了。不过我这个算法并没有确保开局的科学性,也就是没有对开局有深度计算确保这个连连看是可玩的,但是因为在7*7=49个方格子上只有20个图片,按照这个疏密程度来看的话,开局不可解的情况是相当少的,我自己测了过百次也没有遇到这样的情况。好了我们开始吧!!!

先看一下游戏的界面:一点击开始,游戏就开始计时,顶部的折扣会飞速上升,如果玩家玩的速度太慢的话那么只能拿到一个他都不想要的折扣了,呵呵

bubuko.com,布布扣

bubuko.com,布布扣
<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>
bubuko.com,布布扣

  这段算是最主要的html代码。你看到的顶部的那10张图片是display:none掉的,我之所以放是因为,在js里面,我需要在一个数组里面存放这十个图片的原生对象,那么为了早点下载这个图片呢,我希望他们随着html一起下载,而不是到时候通过var img = new Image();img.src=‘png0.png‘这种形式来加载,方便加快游戏加载速度。这个#main是游戏的主题,里面存放了两个canvas,第一个canvas用于写当前折扣,下面一个canvas才是玩游戏的主场。下面我们着重讲javascript部分:

bubuko.com,布布扣
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‘;
});
bubuko.com,布布扣

 

  

连连看小游戏前端实现,布布扣,bubuko.com

连连看小游戏前端实现

标签:style   class   blog   c   code   java   

原文地址:http://www.cnblogs.com/xuchaosheng/p/3418860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!