html做2048游戏的代码,原生JS编写的2048小游戏代码

js代码

// 模块化开发思路

var json={

// 创建初始化函数

init:function(){

var otab= document.querySelector('.tab'),

str='',

id=1;//返回文档指定的css元素，并保存

for(var i=0;i<4;i++){

str+='

';

for(var j=0;j<4;j++){

str +='

';

}

str +='

';

}

otab.innerHTML=str;

this.randomNum();

this.randomNum();

this.result();

},

//创建一个任意区间的随机函数

myRandom:function(min , max){

return Math.round(Math.random() * (max-min) + min);

},

//随机在格子上生成一个数字

randomNum : function(){

var num = this.myRandom(1,16);

ogrid=document.getElementById(num);

if(ogrid.innerHTML ==''){

ogrid.innerHTML= this.myRandom(1,2)*2;

}else{

this.randomNum();

}

},

//上键

top:function(){

for(var i=1;i<=4;i++){

for(var j=i;j<=i+12;j+=4){

for(k=j;k>4;k-=4){

this.change(document.getElementById(k -4),

document.getElementById(k));

}

}

}

},

//下键

bottom:function(){

for(var i=1;i<=4;i++){

for(var j = i+12;j>=i;j -=4){

for(var k = j;k < 13;k +=4){

this.change(document.getElementById(k +4),

document.getElementById(k));

}

}

}

},

//左键

left:function(){

for(var i=1;i<=13;i+=4){

for(var j=i; j<= i+3; j++){

for(var k=j; k>i;k--){

this.change(document.getElementById(k -1),

document.getElementById(k));

}

}

}

},

//右键

right:function(){

for(var i=1;i<=13;i +=4){

for(var j = i+4; j>=i;j--){

for(var k=j;k

this.change(document.getElementById(k +1),

document.getElementById(k));

}

}

}

},

//移动合并检测函数

change :function(before,after){

//移动

if(before.innerHTML == '' && after.innerHTML != ''){

before.innerHTML= after.innerHTML;

after.innerHTML='';

}

//合并

if(before.innerHTML != '' && before.innerHTML ==

after.innerHTML){

before.innerHTML *=2;

after.innerHTML='';

}

},

//改变颜色计算结果函数

result:function(){

var color={'':'#fff','2':'#0f0','4':'#00ccff','8':'#ff9900',

'16':'#00cc66','32':'#ffcccc','64':'#ff33ff','128':'#0066cc',

'256':'#6633cc','512':'#ff0099','1024':'#990033','2048':'#6600ff',

'4096':'#cc0066'},

score=0;

for(var i = 1 ; i <= 16 ;i++){

var ogrid=document.getElementById(i);

ogrid.style.backgroundColor=color[ogrid.innerHTML];

score += ogrid.innerHTML * 10;

}

document.querySelector('.score').innerHTML=score;

}

}

window.οnlοad=json.init();//加载完成后调用init

document.οnkeydοwn=function(e){

if(/38/.test(e.keyCode) ) json.top();

if(/40/.test(e.keyCode) ) json.bottom();

if(/37/.test(e.keyCode) ) json.left();

if(/39/.test(e.keyCode) ) json.right();

if(/13/.test(e.keyCode) ) json.init();

json.randomNum();

json.result();

}