js实现2048小游戏

用js写的2048小游戏，写的不是太精细，喜欢的可以看看,欢迎指出代码中的错误。

页面

<div class="hidden" id="end" >
    <span id="endspan"></span>
</div>
<div id="table">
    <table>
        <tr>
            <td colspan="4">
                <h1>2048小游戏</h1>
            </td>
        </tr>
        <tr>
            <td>
                <span id="s1"></span>
            </td>
            <td>
                <span id="s2"></span>
            </td><td>
            <span id="s3"></span>
        </td><td>
            <span id="s4"></span>
        </td>
        </tr> <tr>
        <td>
            <span id="s5"></span>
        </td>
        <td>
            <span id="s6"></span>
        </td><td>
        <span id="s7"></span>
    </td><td>
        <span id="s8"></span>
    </td>
    </tr> <tr>
        <td>
            <span id="s9"></span>
        </td>
        <td>
            <span id="s10"></span>
        </td><td>
        <span id="s11"></span>
    </td><td>
        <span id="s12"></span>
    </td>
    </tr> <tr>
        <td>
            <span id="s13"></span>
        </td>
        <td>
            <span id="s14"></span>
        </td><td>
        <span id="s15"></span>
    </td><td>
        <span id="s16"></span>
    </td>
    </tr>
        <tr>
           <td colspan="4">
               总分数：<span id="total"></span>
           </td>
        </tr>
        <tr>
            <td colspan="4"><button type="button" id="start" οnclick="init()">start</button> </td>
        </tr>
    </table>
</div>

css

table{
    margin: auto;
    text-align: center;
}
tr{
    height: 100px;
}
td{
    width: 100px;
    border: 1px solid black;
}
span{
    text-align: center;
    height: 50px;
    width: 50px;
}
.zero{
    background: gray;
}
.one{
    background: yellow;
}
.two{
    background: red;
}
.three{
    background: blue;
}
.four{
    background: green;
}
.five{
    background: orange;
}
.six{
    background: blueviolet;
}
.seven{
    background: aqua;
}
.eight{
    background: indianred;
}
.nine{
    background: greenyellow;
}
.ten{
    background: hotpink;
}
.eleven{
    background: khaki;
}
button{
    width: 100%;
    height: 100px;
}
.hidden{
    display: none;
    margin: auto;
}
.show{
    display: block;
}
#end{
    float: inherit;
    margin:0 auto;
    width:600px;
    height: 40px;
    background: orangered;
}
#table{
    float: inherit;
}

function init() {
    //清空所有span
    var span;
    for(var i=1;i<17;i++){
        span = "s"+i;
        document.getElementById(span).innerText="";
    }
    add();
    add();
    document.getElementById("start").disabled=true;
    keydown();
}
function isEnd() {
    //判断是否有空位置
    var span;
    for(var i=1;i<17;i++){
        span = "s"+i;
        if(document.getElementById(span).innerText==""){
            return false;
        }
    }
    for(var i=1;i<=4;i++){
        for(var j=0;j<3;j++){
            //判断上下是否有相同数字能够移动
            if(document.getElementById("s"+(4*j+i)).innerHTML==document.getElementById("s"+(4*(j+1)+i)).innerHTML){
                return false;
            }
             //判断左右是否有相同数字能够移动
            if(document.getElementById("s"+(1+4*(i-1)+j)).innerHTML==document.getElementById("s"+(1+4*(i-1)+j+1)).innerHTML){
                return false;
            }
        }
    }
    return true;
}

function left() {
    var array;
    var newarray;
    var flag=false;//用来判断是否是有效按键（是否有移动）
    for(var i=1;i<=4;i++) {
        array=[];
        newarray=[];
        for (var j = 0; j < 4; j++) {
            //不为空就把值放入数组中
            if (document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerText != "") {
                array.push(document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerHTML);
                document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerText="";
            }
            //为空 判断右方是否还有数字 以此来判断按键时是否有移动
            else if(!flag){
                for(var q = j;q<4;q++){
                    if(document.getElementById("s"+(1+4*(i-1)+q)).innerText!=""){
                        flag=true;
                        break;
                    }
                }
            }
        }
            //对数进行合并并赋值到新的数组中
            for(var m = 0 ; m<array.length;m++){
                if(array[m]==array[m+1]){
                    newarray.push(2*array[m]);
                    m+=1;
                    flag=true;
                }
                else{
                    newarray.push(array[m]);
                }
            }
        // 将数字显示到页面中
        for(var n = 0;n<newarray.length;n++){
            document.getElementById("s" + (1 + 4 * (i - 1) + n)).innerText=newarray[n];
        }
    }
    if(flag) {
        add();
    }

}
function right() {
    var array;
    var newarray;
    var flag=false;
    for(var i=1;i<=4;i++) {
        array=[];
        newarray=[];
        for (var j = 0; j < 4; j++) {
            if (document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerText != "") {
                array.push(document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerHTML);

            }
            else if(!flag){
                for(var q = j;q>=0;q--){
                    if(document.getElementById("s"+(1+4*(i-1)+q)).innerText!=""){
                        flag=true;
                        break;
                    }
                }
            }
        }
        for(var j=0;j<4;j++){
            document.getElementById("s" + (1 + 4 * (i - 1) + j)).innerText="";
        }
        for(var m = array.length-1 ; m>=0;m--){
            if(array[m]==array[m-1]){
                newarray.push(2*array[m]);
                m-=1;
                flag=true;
            }
            else{
                newarray.push(array[m]);
            }
        }
        for(var n = 0;n<newarray.length;n++){
            document.getElementById("s" + (4*i - n)).innerText=newarray[n];
        }
    }
    if(flag) {
        add();
    }
}
function up() {
    var array;
    var newarray;
    var flag=false;
    for(var i=1;i<=4;i++) {
        array=[];
        newarray=[];
        for (var j = 0; j < 4; j++) {
            if (document.getElementById("s" + (i+4*j)).innerText != "") {
                array.push(document.getElementById("s" + (i+4*j)).innerHTML);
                document.getElementById("s" + (i+4*j)).innerText="";
            }
            else if(!flag){
                for(var q = j;q<4;q++){
                    if(document.getElementById("s"+(i+4*q)).innerText!=""){
                        flag=true;
                        break;
                    }
                }
            }
        }
        for(var m = 0 ; m<array.length;m++){
            if(array[m]==array[m+1]){
                newarray.push(2*array[m]);
                m+=1;
                var flag=true;
            }
            else{
                newarray.push(array[m]);
            }
        }
        for(var n = 0;n<newarray.length;n++){
            document.getElementById("s" + (i+4*n)).innerText=newarray[n];
        }
    }
    if(flag){
        add();
    }
}
function down() {
    var array;
    var newarray;
    var flag=false;
    for(var i=1;i<=4;i++) {
        array=[];
        newarray=[];
        for (var j = 0; j < 4; j++) {
            if (document.getElementById("s" + (i+4*j)).innerText != "") {
                array.push(document.getElementById("s" + (i+4*j)).innerHTML);

            }
            else if(!flag){
                for(var q = j;q>=0;q--){
                    if(document.getElementById("s"+(i+4*q)).innerText!=""){
                        flag=true;
                        break;
                    }
                }
            }
        }
        for(var j=0;j<4;j++){
            document.getElementById("s" + (i+4*j)).innerText="";
        }
        for(var m = array.length-1 ; m>=0;m--){
            if(array[m]==array[m-1]){
                newarray.push(2*array[m]);
                m-=1;
                flag=true;
            }
            else{
                newarray.push(array[m]);
            }
        }
        for(var n = 0;n<newarray.length;n++){
            document.getElementById("s" + (16-(4-i)-4*n)).innerText=newarray[n];
        }
    }
    if(flag){
        add();
    }
}
//在随机空位置添加一个数（2|4）
function add() {
    var array = [];
    var span;
    for(var i=1;i<17;i++) {
        span = "s" + i;
        if (document.getElementById(span).innerText == "") {
            array.push(span);
        }
    }
    var i = Math.floor(Math.random() * 2);
    if(array.length!=0) {
        var i = Math.floor(Math.random() * array.length);
        var num = Math.floor(Math.random() * 2 + 1) * 2;
        document.getElementById(array[i]).innerText = num;
        if (isEnd()) {
            document.getElementById("endspan").innerText="gameover";
            document.getElementById("end").setAttribute("class","show");
            document.onkeydown=function () {
            }
        }
    }
    ergodic();
}
//初始化按键方法
function keydown() {
    document.onkeydown=function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e.keyCode==37){
            left();
        }else if(e.keyCode==38){
            up();
        }else if(e.keyCode==39){
            right();
        }else if(e.keyCode==40){
            down();
        }
    }
}
//计算总分数 上色
function ergodic() {
    var total=0;
    for(var i=1;i<17;i++){

        var span = document.getElementById("s"+i);
        span.parentNode.setAttribute("class","zero");
        if(span.innerText!="") {
           total = parseInt(span.innerText) + total;
        }
        if(span.innerText==2){
            span.parentNode.setAttribute("class","one");
        }else if(span.innerText==4){
            span.parentNode.setAttribute("class","two");
        }else if(span.innerText==8){
            span.parentNode.setAttribute("class","three");
        }else if(span.innerText==16){
            span.parentNode.setAttribute("class","four");
        }else if(span.innerText==32){
            span.parentNode.setAttribute("class","five");
        }else if(span.innerText==64){
            span.parentNode.setAttribute("class","six");
        }else if(span.innerText==128){
            span.parentNode.setAttribute("class","seven");
        }else if(span.innerText==256){
            span.parentNode.setAttribute("class","eight");
        }else if(span.innerText==512){
            span.parentNode.setAttribute("class","nine");
        }else if(span.innerText==1024){
            span.parentNode.setAttribute("class","ten");
        }else if(span.innerText==2048){
            document.getElementById("endspan").innerText="恭喜你获得胜利";
            document.getElementById("end").setAttribute("class","show");
            document.onkeydown=function () {

            }
            span.parentNode.setAttribute("class","eleven");
        }
    }
    document.getElementById("total").innerText=total;
}

js实现2048小游戏

继续阅读

程序员买啥游戏机，自己动手做一个体感小游戏

猜数字游戏(伪随机数对猜数字游戏的影响)猜数字游戏的实现　完整的代码：

QT学习之QT小游戏-----猜数字游戏

用c语言实现小游戏《三子棋》

puzzle（017.9）HueBots

Python自制成语接龙小游戏

C语言三子棋游戏

C语言入门小游戏—三子棋一、何为三子棋二、解题思路

作为一名开发人员，我为什么不再打网游

不是吧！这游戏比王者还上头……

不宅在家能彻底改变你的未来

用c++控制台实现的贪吃蛇小游戏

C语言实现扫雷小游戏

java,模拟斗地主

简单聊聊羊了个羊