2048小游戏 在线版

csx

如何用JS，做一个支持pc端和移动端2048小游戏呢，让我们一起开始给无聊的你增加一份慰藉吧。
首先看图，2048的示意图：
        


一般常用一个二维数组表示当前界面的数据，然后用js依据此数组去渲染对应的格子。
关键代码如下：

[JavaScript] 纯文本查看 复制代码

/*单次移动*/function oneStep(direct) {
    if (direct!=-1) {
        move(direct,size);
        merge(direct,size);
        move(direct,size);  
        DrawCell();    
        SoundFun();
        ScoreFun();
        IsTarget();
        if (zeroNum() > 0) {
            var indexArr = NewNum(1, 0.5);//2和4概率0.5
            setTimeout(function() {
                for (let i = 0; i < indexArr.length; i++) {
                    DrawCell(indexArr[i].randX,indexArr[i].randY)                   
                }
            },100);
        } 
                return true
   }
   return false;
}

/*可以上划*/
var CanUp = function () {
    var flag = 0; //记录不能移动的列数
    for (var j = 0; j < size; j++) {
        for (var i = 1; i < size; i++) {
            if (numArray[i][j] !== 0) {
                if (numArray[i-1][j] === 0 || numArray[i][j] === numArray[i-1][j]) {
                    return true;
                }
            }
        }
        flag++;
    } /*if(flag===size){return false}else return true;*/
    return !(flag === size);
}

/*可以下划*/
var CanDown = function () {
    var flag = 0; //记录不能移动的列数
    for (var j = 0; j < size; j++) {
        for (var i = size - 2; i >= 0; i--) {
            if (numArray[i][j] !== 0) {
                if (numArray[i+1][j] === 0 || numArray[i][j] === numArray[i+1][j]) {
                    return true;
                }
            }
        }
        flag++;
    } /*if(flag===size){return false}else return true;*/
    return !(flag === size);
}
/*可以左划*/
var CanLeft = function () {
    var flag = 0; //记录不能移动的行数
    for (var i = 0; i < size; i++) {
        for (var j = 1; j < size; j++) {
            if (numArray[i][j] !== 0) {
                if (numArray[i][j-1] === 0 || numArray[i][j] === numArray[i][j-1]) {
                    return true;
                }
            }
        } /*if(flag===size){return false}else return true;*/
        flag++;
    }
    return !(flag === size);
}
/*可以右划*/
var CanRight = function () {
    var flag = 0; //记录不能移动的行数
    for (var i = 0; i < size; i++) {
        for (var j = size - 2; j >= 0; j--) {
            if (numArray[i][j] !== 0) {
                if (numArray[i][j+1] === 0 || numArray[i][j] === numArray[i][j+1]) {
                    return true;
                }
            }
        } /*if(flag===size){return false}else return true;*/
        flag++;
    }
    return !(flag === size);
}

/*合并操作*/
function merge(direct,size){
        var change = false;//表明合并过程中格盘是否有变化
        // var score = parseInt(document.getElementById("score").innerHTML, 10);
    if(direct==0){//上
        for(var i=0;i<size-1;i++){
                        for(var j=0;j<size;j++){
                if (numArray[i][j]==numArray[i+1][j]) {
                    score+=numArray[i+1][j]*2;
                    numArray[i][j]=numArray[i+1][j]*2;
                    numArray[i+1][j]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==1){//下
                for(var i=size-1;i>0;i--){
                        for(var j=0;j<size;j++){
                if (numArray[i][j]==numArray[i-1][j]) {
                    score+=numArray[i-1][j]*2;
                    numArray[i][j]=numArray[i-1][j]*2;
                    numArray[i-1][j]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==2){//左
                for(var i=0;i<size;i++){
                        for(var j=0;j<size-1;j++){
                if (numArray[i][j]==numArray[i][j+1]) {
                    score+=numArray[i][j+1]*2;
                    numArray[i][j]=numArray[i][j+1]*2;
                    numArray[i][j+1]=0;
                    change = true;
                }
            }
        }
        }
        else if(direct==3){//右
                for(var i=0;i<size;i++){
                        for(var j=size-1;j>0;j--){
                if (numArray[i][j]==numArray[i][j-1]) {
                    score+=numArray[i][j-1]*2;
                    numArray[i][j]=numArray[i][j-1]*2;
                    numArray[i][j-1]=0;
                    change = true;
                }
            }
        }
        }
        // document.getElementById("score").innerHTML=score;
        return change;
}

我做的已经传到gitee上，欢迎clone交流！
https://gitee.com/linpure/js_2048
已知问题：微信里下滑有问题，尝试数种办法后暂时无解，有大神能帮忙解决的，小弟感激不尽
下面是体验链接：
http://linpure.gitee.io/js_2048/