用js写的2048小游戏,写的不是太精细,喜欢的可以看看,欢迎指出代码中的错误。
页面
cssclass="hidden" id="end" > id="endspan">id="table">
colspan="4"> 2048小游戏 id="s1"> id="s2"> id="s3"> id="s4"> id="s5"> id="s6"> id="s7"> id="s8"> id="s9"> id="s10"> id="s11"> id="s12"> id="s13"> id="s14"> id="s15"> id="s16"> colspan="4"> 总分数:id="total"> colspan="4">
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; }
js
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 ; mlength;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 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 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 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 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 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; }