<!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+');}\r\n'
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>