<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2048</title> <style> *{margin: 0; padding: 0} #div1024{width: 600px; margin: 50px auto;overflow: hidden} .main{float: left;margin-right: 50px;} li{list-style:none} .main>li{width: 328px;overflow: hidden} .main>li ul li{border: 1px solid #6666ff;width: 80px;height: 80px;border-collapse:collapse; text-align: center;line-height: 80px;font-size: 36px;float: left } </style> </head> <body> <div id="div1024"> <ul class="main"> <li class="line0"><ul> <li></li> <li></li> <li></li> <li></li> </ul></li> <li class="line1"><ul> <li></li> <li></li> <li></li> <li></li> </ul></li> <li class="line2"><ul> <li></li> <li></li> <li></li> <li></li> </ul></li> <li class="line3"><ul> <li></li> <li></li> <li></li> <li></li> </ul></li> </ul> <div style="float: left; margin-top: 120px;"> <div>分数：<span id="score">0</span></div> <div>计数：<span id="step">0</span></div> <div>玩法：<span id="tips">用方向键操作</span></div> <div>提示：<span id="tip"></span></div> </div> </div> <script> window.onload=function(){ var game={ // 随机产生的数字 num:0, //剩余空格 counts:0, score:0, step:0, //横向数组与纵向数组 arr:[], arr1:[], init:function(){ game.style() document.getElementById('tip').innerHTML='游戏开始啦...' this.add() this.add() }, add:function(){ var x=false,y=false Math.random() > 0.5 ? this.num=2 :this.num=4 var Lindex=Math.floor(Math.random()*4), Rindex=Math.floor(Math.random()*4), dom=document.getElementsByClassName('line'+Lindex)[0].getElementsByTagName('li')[Rindex] if(dom.innerHTML=='') { dom.className='style'+this.num dom.innerHTML=this.num } else{ this.count() if(this.counts==0){ //判断横向是否有值相同 outerloop0: for(var i=0;i<4;i++){ for(var j=0;j<this.arr[i].length-1;j++){ if(this.arr[i][j]==this.arr[i][j+1]){ x=true break outerloop0; } } } //判断纵向是否有值相同 outerloop1: for(var i=0;i<4;i++){ for(var j=0;j<this.arr1[i].length-1;j++){ if(this.arr1[i][j]==this.arr1[i][j+1]){ y=true break outerloop1 } } } if(!x && !y ){ alert('gameovar,你的分数是'+this.score) }else if(x){ if(arguments[0].keyCode==37 || arguments[0].keyCode==39){ this.step++ } } else if(y){ if(arguments[0].keyCode==38 || arguments[0].keyCode==40){ this.step++ } } }else{ this.add() } } }, left:function(){ //数组值合并 for(var i=0;i<4;i++){ for(var j=0;j<this.arr[i].length-1;j++){ if(this.arr[i][j]==this.arr[i][j+1]){ this.score+=this.arr[i][j]*2 this.arr[i][j]+=this.arr[i][j] this.arr[i].splice(j+1,1) } } } //赋值给dom for(var i=0;i<4;i++){ len=this.arr[i].length for(var m=0;m<4;m++){ document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className='' document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML='' } for(var j=0;j<len;j++){ document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML=this.arr[i][j] document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].className='style'+this.arr[i][j] } } if(this.counts!=0) this.step++ }, right:function(){ //数组值合并 for(var i=0;i<4;i++){ for(var j=this.arr[i].length-1;j>0;j--){ if(this.arr[i][j]==this.arr[i][j-1]){ this.score+=this.arr[i][j-1]*2 this.arr[i][j]+=this.arr[i][j] this.arr[i].splice(j-1,1) } } } //赋值给dom for(var i=0;i<4;i++){ len=this.arr[i].length for(var m=0;m<4;m++){ document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].className='' document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[m].innerHTML='' } for(var j=0;j<len;j++){ document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].innerHTML=this.arr[i][len-1-j] document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[3-j].className='style'+this.arr[i][len-1-j] } } if(this.counts!=0) this.step++ this.log(this.arr) }, up:function(){ //数组值合并 for(var i=0;i<4;i++){ for(var j=0;j<this.arr1[i].length-1;j++){ if(this.arr1[i][j]==this.arr1[i][j+1]){ this.score+=this.arr1[i][j]*2 this.arr1[i][j]+=this.arr1[i][j] this.arr1[i].splice(j+1,1) } } } //赋值给dom for(var i=0;i<4;i++){ len=this.arr1[i].length for(var m=0;m<4;m++){ document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className='' document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML='' } for(var j=0;j<len;j++){ document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j] document.getElementsByClassName('line'+j)[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j] } } if(this.counts!=0) this.step++ }, down:function(){ //数组值合并 for(var i=0;i<4;i++){ for(var j=this.arr1[i].length-1;j>0;j--){ if(this.arr1[i][j]==this.arr1[i][j-1]){ this.score+=this.arr1[i][j-1]*2 this.arr1[i][j]+=this.arr1[i][j] this.arr1[i].splice(j-1,1) } } } //赋值给dom for(var i=0;i<4;i++){ len=this.arr1[i].length for(var m=0;m<4;m++){ document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].className='' document.getElementsByClassName('line'+m)[0].getElementsByTagName('li')[i].innerHTML='' } for(var j=0;j<len;j++){ document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].innerHTML=this.arr1[i][j] document.getElementsByClassName('line'+(4-len+j))[0].getElementsByTagName('li')[i].className='style'+this.arr1[i][j] } } if(this.counts!=0) this.step++ }, count:function(){ var inner, inner1, m= 0, n=0 this.counts=0 //横向数组，用于左右操作 for(var i=0;i<4;i++){ this.arr[i]=[] m=0 for(var j=0;j<4;j++){ inner=document.getElementsByClassName('line'+i)[0].getElementsByTagName('li')[j].innerHTML if(inner){ this.arr[i][m]=Number(inner) m++ } else{ this.counts++ } } } this.log(this.arr) //纵向数组用于上下操作 for(var x=0;x<4;x++){ this.arr1[x]=[] } for(var x=0;x<4;x++){ n=0 for(var y=0;y<4;y++){ inner1=document.getElementsByClassName('line'+y)[0].getElementsByTagName('li')[x].innerHTML if(inner1){ this.arr1[x][n]=Number(inner1) n++ } } } }, log:function(x){ console.log(x) }, update:function(){ document.getElementById('score').innerHTML=this.score document.getElementById('step').innerHTML=this.step var tip=document.getElementById('tip') var max=this.arr.toString().split(',') function sort(a,b){return a-b} max=max.sort(sort)[max.length-1] if(max==512){tip.innerHTML='加油加油...'} if(max==1024){tip.innerHTML='唉哟，不错喔...'} if(max==2048){tip.innerHTML='恭喜你成功了，太厉害了...'} if(max==4096){tip.innerHTML='超神了...'} if(max==8192){tip.innerHTML='XX，出现bug了...'} }, style:function(){ var values=[2,4,8,16,32,64,128,256,512,1024,2048,4096,8192], add=0.075, styles='' for(var i=0;i<values.length;i++){ styles+='.style'+values[i]+'{background-color:hsla(360,50%,50%,'+add+');} ' add+=0.075 } document.getElementsByTagName('style')[0].innerHTML+=styles } } game.init() document.onkeydown=function(e){ game.count() e=e || window.event switch (e.keyCode){ case 37 : game.left() game.add(e) game.update() break case 38 : game.up() game.add(e) game.update() break case 39 : game.right() game.add(e) game.update() break case 40 : game.down() game.add(e) game.update() break default : break } } } </script> </body> </html>