嗯，团队队友开发了一个简单的2048...哈哈，没办法，这游戏那么疯狂，必须搞搞啦，大家能够直接粘贴代码到一个html文件，直接执行就可以
依赖文件：jquery，假设乜有，大家能够自己下载一份
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" src="scripts/jquery-1.9.1.js"></script> <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"><script src="http://code.jquery.com/jquery-1.5.min.js"></script><script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="renderer" content="webkit"><style >
body,div{margin:0;padding:0;}
body{width:100%;height:500px;}
.field{width:85%;height:55%;background:gray;margin:5% auto;border-radius:2%;}.tab{
width:21%;
height:100%;
background:yellow;
position:relative;
z-index:10;
margin:2%;
font-size:200%;
font-weight:bold;
line-height:200%;
text-align:center ;
vertical-align:bottom;
border-radius:5px;transition:all .5s;
}
.row{height:20%;width:100%;clear:both;}
.row div{float:left;}.usetime{
width:40%;
height:10%;
background:yellow;
font-size:150%;
font-weight:bold;
border-radius:5px;
margin:0 auto;
line-height:160%;}#times,#time{color:red;}
</style></head><body>
<center><h2>合成2048算你赢</h2></center>
<div class="field"><div class="row row1">
<div class="tab tab1"> </div>
<div class="tab tab2"> </div>
<div class="tab tab3"> </div>
<div class="tab tab4"> </div>
</div><div class="row row2">
<div class="tab tab5"> </div>
<div class="tab tab6"> </div>
<div class="tab tab7"> </div>
<div class="tab tab8"> </div>
</div><div class="row row3">
<div class="tab tab9"> </div>
<div class="tab tab10"> </div>
<div class="tab tab11"> </div>
<div class="tab tab12"> </div>
</div><div class="row row4">
<div class="tab tab13"> </div>
<div class="tab tab14"> </div>
<div class="tab tab15"> </div>
<div class="tab tab16"> </div>
</div></div><div class="usetime">用时：<span id="time">1</span> s</div><div class="usetime">移动：<span id="times">1</span> 次</div><div id="result"></div><script language="javascript">arr=[[0,0,0,0],[0,0,2,2],[0,0,0,0],[0,4,0,0]];color=["yellow","#0000FF","#ADFF2F","#55aabb","#ff99bb","#ffaabb","#FF4500","#ffaa00","#eebbaa","#ee00bb","#8B0000"];/*
function init(){
index=1;$(".tab").each(function(){if(index <5 )$(this).html(Math.pow(2,index++))})
}
init();
*/
setInterval(function(){
$("#time").html(parseInt($("#time").html())+1);
},1000);/****************** Consts 定义 開始 ********************************/
/****************** Consts 定义 開始 ********************************/
Consts={
arr_rows_num:4,
arr_cols_num:4,
game_fail:-1, //游戏失败
game_succeed:1, //游戏成功
game_normal:0, //游戏正常
game_init_num:2 //游戏 撒下随机的数字
}
/****************** Consts 定义 结束 ********************************//****************** Game 開始 ********************************/
/****************** Game 開始 ********************************/
Game={
/*
*重绘游戏
*（1）把数组里面的数字放到div 里面去
*（2）依据数字变更颜色
*/
repaint:function(){$(".tab").each(function(){ tab_index=parseInt($(".tab").index($(this)));if(tab_index>3){ rows=parseInt(tab_index/4);}else{ rows=0;}$(this).html(arr[rows][tab_index%4]?arr[rows][tab_index%4]:"");switch(parseInt($(this).html())){case 2:$(this).css("background",color[1]);break;case 4:$(this).css("background",color[2]);break;case 8:$(this).css("background",color[3]);break;case 16:$(this).css("background",color[4]);break;case 32:$(this).css("background",color[5]);break;case 64:$(this).css("background",color[6]);break;case 128:$(this).css("background",color[7]);break;case 256:$(this).css("background",color[8]);break;case 512:$(this).css("background",color[9]);break;case 1024:$(this).css("background",color[10]);break;default:$(this).css("background",color[0]);break;} });
},
/*
*随机产生2的位置
*/
setRandomPos:function(){rows=getRandom(3);cols=getRandom(3);//随机生成一个下标while(arr[rows][cols] != 0){rows=getRandom(3);cols=getRandom(3);}arr[rows][cols]=Consts.game_init_num; //
},//检查游戏是否失败，或者成功
check:function(){flag=Consts.game_fail; //-1for(rows=0;rows<Consts.arr_rows_num; rows++){for(cols=0;cols<Consts.arr_cols_num; cols++){if(arr[rows][cols] == 0){ flag=Consts.game_normal; //0break;}else if(arr[rows][cols] == 1024){flag=Consts.game_succeed; //1break;}}}return flag;
},/*
*执行一次游戏
*(1)检查游戏是否失败或者成功
*(2)依据游戏状态做出应对
*/
run:function(){if(this.check() == Consts.game_fail){alert("游戏失败了~");window.opener = null;window.open(' ', '_self', ' '); window.close();}else if(this.check() == Consts.game_normal){this.repaint(); this.setRandomPos();if(this.check()== Consts.game_fail) {alert("游戏失败了~");}else if(this.check()== Consts.game_succeed){alert("恭喜您，通关啦~~");}}else{alert("恭喜您，通关啦~~");}}}/******************Game 结束********************************//******************reset 開始********************************/
/******************计算数字，同一方向有同样的则合并**********/
reset={
//【向左】 计算而且合并同样数字
left:function(){for(rows=0;rows<Consts.arr_rows_num;rows++){for(self=0;self<Consts.arr_cols_num;self++){for(compare=self+1;compare<Consts.arr_cols_num;compare++){if(arr[rows][compare]!=0 && arr[rows][compare]!=arr[rows][self]) break;if((arr[rows][self]==arr[rows][compare])&&(arr[rows][self]!=0)){arr[rows][self]=arr[rows][self]*2;arr[rows][compare]=0;//Game.setRandomPos(); //加入一个随机的2} }}}
},
//【向右】 计算而且合并同样数字
right:function(){for(rows=0;rows<Consts.arr_rows_num;rows++){for(self=3;self>-1;self--){for(compare=self-1;compare>-1;compare--){//不相等，直接退出if(arr[rows][compare] !=0 && arr[rows][compare] != arr[rows][self]) break;//相等，合并元素if((arr[rows][self]==arr[rows][compare])&&(arr[rows][self]!=0)){arr[rows][self]=arr[rows][self]*2;arr[rows][compare]=0;//Game.setRandomPos(); //加入一个随机的2} }}}
},
//【向下】 计算而且合并同样数字
down:function(){for(cols=Consts.arr_cols_num;cols>-1;cols--){for(rows=Consts.arr_cols_num-1;rows>0;rows--){for(compare=rows-1;compare>-1;compare--){if(arr[compare][cols]!=0 && arr[compare][cols]!=arr[rows][cols]) break;if((arr[rows][cols]==arr[compare][cols])&&(arr[rows][cols]!=0)){arr[rows][cols]=arr[rows][cols]*2;arr[compare][cols]=0;//Game.setRandomPos(); //加入一个随机的2} }}}},//【向上】 计算而且合并同样数字
up:function(){for(cols=0;cols<Consts.arr_cols_num;cols++){for(self=0;self<Consts.arr_rows_num;self++){for(compare=self+1;compare<Consts.arr_rows_num;compare++){if(arr[compare][cols]!=0 && arr[compare][cols]!=arr[self][cols]) break;if((arr[self][cols]==arr[compare][cols])&&(arr[self][cols]!=0)){arr[self][cols]=arr[self][cols]*2;arr[compare][cols]=0;//Game.setRandomPos(); //加入一个随机的2} }}}
}
}/******************reset 结束********************************//******************move 開始********************************/
/******************移动的方向没有数字存在，那么就移动********************************/
move={//【向左】
left:function(){for(num=0;num<4;num++){for(rows=0;rows<Consts.arr_rows_num;rows++){for(cols=0;cols<Consts.arr_cols_num;cols++){if(arr[rows][cols] == 0){for(index = cols; index<Consts.arr_cols_num-1;index++){arr[rows][index]=arr[rows][index+1];}arr[rows][index]=0;}}}}
},//【向右】
right:function(){for(num=0;num<4;num++){for(rows=Consts.arr_rows_num-1;rows>-1;rows--){for(cols=Consts.arr_cols_num-1;cols>-1;cols--){if(arr[rows][cols]==0){for(index=cols;index>0;index--){arr[rows][index]=arr[rows][index-1];} arr[rows][0]=0;}}}}
},
//【向下】
down:function(){for(num=0;num<4;num++){for(cols=0;cols<Consts.arr_cols_num;cols++){for(rows=Consts.arr_rows_num-1;rows>-1;rows--){if(arr[rows][cols]==0){for(index=rows;index>0;index--){arr[index][cols]=arr[index-1][cols];} arr[0][cols]=0;} }}}},//【向上】
up:function(){for(num=0;num<4;num++){for(cols=0;cols<Consts.arr_cols_num;cols++){for(rows=0;rows<Consts.arr_rows_num;rows++){if(arr[rows][cols]==0){for(index=rows;index<Consts.arr_rows_num-1;index++){arr[index][cols]=arr[index+1][cols];} arr[3][cols]=0;} }}}
}}/******************move 结束********************************///获取0~num_field之内的数字
function getRandom(num_field){
return Math.round(Math.random()*num_field);
}Game.run();
window.οnkeydοwn=function(e){
switch(e.keyCode){
case 37:reset.left();move.left();break;
case 38:reset.up();move.up();break;
case 39:reset.right(); move.right(); break;
case 40: reset.down();move.down();break;
}Game.run();$("#times").html(parseInt($("#times").html())+1);
}
</script><script type="text/javascript">//全局变量，触摸開始位置var startX = 0, startY = 0;var endX = 0, endY = 0;//touchstart事件function touchSatrtFunc(evt) {try{//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等var touch = evt.touches[0]; //获取第一个触点var x = Number(touch.pageX); //页面触点X坐标var y = Number(touch.pageY); //页面触点Y坐标//记录触点初始位置startX = x;startY = y;}catch (e) {alert('touchSatrtFunc：' + e.message);}}//touchmove事件，这个事件无法获取坐标function touchMoveFunc(evt) {try{//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等var touch = evt.touches[0]; //获取第一个触点endX = Number(touch.pageX); //页面触点X坐标endy = Number(touch.pageY); //页面触点Y坐标var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';//推断滑动方向/* if ((x - startX) >5) {text += '<br/>右滑动';}else if((x - startX) <-5){text += '<br/>左滑动';}if ((y - startY) > 5) {text += '<br/>上滑动';}else if ((y - startY) < -5) {text += '<br/>下滑动';}*/document.getElementById("result").innerHTML = text;}catch (e) {alert('touchMoveFunc：' + e.message);}}//touchend事件function touchEndFunc(evt) {try {//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动栏滚动等var text = 'TouchEnd事件触发';document.getElementById("result").innerHTML = text;}catch (e) {alert('touchEndFunc：' + e.message);}}//绑定事件function bindEvent() {document.addEventListener('touchstart', touchSatrtFunc, false);document.addEventListener('touchmove', touchMoveFunc, false);document.addEventListener('touchend', touchEndFunc, false);}//推断是否支持触摸事件function isTouchDevice() {document.getElementById("version").innerHTML = navigator.appVersion;try {document.createEvent("TouchEvent");alert("支持TouchEvent事件！");bindEvent(); //绑定事件}catch (e) {alert("不支持TouchEvent事件！" + e.message);}}window.onload = isTouchDevice;</script><div id="version"></div>
</body>
</html>执行时，建议採用火狐浏览器...
以下是执行效果：
