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" onclick="init()">start</button> </td>
</tr>
</table>
</div>

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
;
}
}
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
;
}
}
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
;
}
}
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
;
}
}
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;
}