消消乐源码

H5预览二维码

源码讲解

tip

第一步初始化canvas,以下分别是h5，小程序，小游戏代码

<canvas id="game" width="1500" height="3000" style="width:100%;"></canvas>
wmgame.init("game",onCompleteHandle);

<canvas id="game" type="2d"
        bindtouchstart="touchStart" bindtouchmove="touchMove"
        bindtouchend="touchEnd" bindtouchcancel="touchCancel"
        style="width:750rpx;height:1500rpx;position: absolute;left: 0;top:0;"></canvas>

var _that=this;
wmgame.init("game",onCompleteHandle,{width:1500,height:3000,
    touchstart:'touchStart',
    touchmove:'touchMove',
    touchend:'touchEnd',
    touchcancel:'touchCancel',
    that:_that});

wmgame.init("game",onCompleteHandle,{width:1500});

tip

第二步获取canvas对象

//gdata是wmgame下得gameData对象
//canvas是获取到得canvas对象
function onCompleteHandle(gdata,canvas){
    _canvas=canvas;
    //设置游戏帧数
    gdata.setFps(60);
    //开启游戏帧渲染
    gdata.update("loop");

    ...
}

tip

第三步部署背景静态资源

    var dbg=[
        [
            {
                t:"t",
                s:{x:200,y:200},
                v:{t:"消消乐其乐无穷",s:"60px",c:"#b10263"}
            },
            [
                {t:"c",z:"mcs2",s:{y:192,x:38}}
            ],
            {t:"c",z:"mcs",s:{y:300}}
        ],
        {
            t:"i",
            s:{y:300},
            v:{s:"/image/bg_2.png"}
        },
        {
            t:"i",
            v:{s:"/image/bg.png"}
        }
    ];

    var mcs=gdata.create(dbg);
    gdata.stage.addChild(mcs);

tip

第四步初始化消消乐初始数据和界面

    //初始化消消乐消的图形资源
    initePic();
    //初始化游戏界面
    resize(true);

    function initePic(){
        var num=0;
        for(var i=0;i<6;i++){
            tt.push({num:num,mc:"icon_"+num,score:1});
            num++;
        }
    }

    function resize(isremove){
        if(isremove==undefined){
            for(var i=0;i<m;i++) {
                for (var j = 0; j < n; j++) {
                    imgs[i][j].removeAll();
                }
            }
        }

        //初始消消乐可消除元素
        initeOne();
        //判断是否有可消除元素，进行消除到不可消为止
        autoXiao();
        //查找是否可以移动后能消的存在，如果没有重新初始化
        tishiA=findChange();
        if(!tishiA){
            resize(true);
            return;
        }
        //创建消消乐元素实例部署舞台
        showStage();
    }

    function showStage() {
        for(var i=0;i<m;i++){
            imgs[i]=[];
            for(var j=0;j<n;j++){
                imgs[i][j]=new cretateOne(tt[players[i][j]].mc,i,j);
            }
        }
    }

三端运行效果

H5	小程序	小游戏