先html简单布局
<span id="score">得分:</span>
<button id="start">游戏开始</button>
<div class="main">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
再简单设置样式
*{
margin: 0;
padding: 0;
}
.main{
width:500px;
height: 500px;
border:1px solid black;
}
#start{
margin-left: 450px;
}
.main div{
width:100px;
height:100px;
margin: 10px;
float:left;
border:1px solid black;
text-align: center;
}
.bg2,.bg4{background:#ccc;font-size:80px;}
.bg8{background: #fb6b2b;font-size:80px;}
.bg16{background: #fb6368;font-size:80px;}
.bg32{background: #b6fbb1;font-size:80px;}
.bg64{background: #5dfbe0;font-size:80px;}
.bg128{background: #65b6fb;font-size:60px;}
.bg256{background: #554efb;font-size:60px;}
.bg512{background: #fb1036;font-size:60px;}
.bg1024{background: #fb2fad;font-size:40px;}
.bg2048{background: #f4fb1b;font-size:40px;}
最后看一下jquery实现过程
var initRC=[[0,1,2,3],[4,5,6,7],[8,9,10,11],[12,13,14,15]];
$(function (){
function getEmptyDiv(){
var divs=[];
$(".main div").each(function (index , elem){
if(elem.innerText==""){
divs.push(elem);
}
});
return divs;
}
function addClassAll(){
$(".main div").each(function (index ,elem){
var num=elem.innerText;
$(elem).removeClass().addClass("bg"+num);
});
}
$("#start").click(function (){
$(".main div").empty();
//divs.empty();
//随机出现数字
// 2 或 4
// 放在16个div中的其中两里
// 先做一个随机数字放一个div中
//同一个格子,不能出现两次随机数
// 随机数只能出现在空白的div中
getRandomNum();
getRandomNum();
addClassAll();
});
function getRandomNum(){
var EmptyDivs=getEmptyDiv();
if(EmptyDivs.length==0){
alert("不能再继续随机数");
}
var ranNum=Math.random()>0.4?"2":"4";
var divRanNum=parseInt(Math.random()*EmptyDivs.length);
EmptyDivs[divRanNum].innerHTML=ranNum;
}
function rowUpMove(row1,row2){
var divs=$(".main div");
for(var i=0;i<4;i++){
var div1= divs[initRC[row1][i]];
var div2= divs[initRC[row2][i]];
if(div2.innerText==""){
}else if(div1.innerText==""){
div1.innerText=div2.innerText;
div2.innerText="";
}else if(div1.innerText==div2.innerText){
div1.innerText=div1.innerText*2;
div2.innerText="";
}
}
}
function colLeftMove(col1,col2){
var divs=$(".main div");
for(var i=0;i<4;i++){
if(divs[initRC[i][col2]].innerText==""){
}else if(divs[initRC[i][col1]].innerText==""){
divs[initRC[i][col1]].innerText=divs[initRC[i][col2]].innerText;
divs[initRC[i][col2]].innerText="";
}else if(divs[initRC[i][col1]].innerText==divs[initRC[i][col2]].innerText){
divs[initRC[i][col1]].innerText=divs[initRC[i][col1]].innerText*2;
divs[initRC[i][col2]].innerText="";
}
}
}
$(window).keyup(function (e){
switch(e.keyCode){
case 37:
//左
for(var i=0;i<3;i++){
colLeftMove(0,1);
colLeftMove(1,2);
colLeftMove(2,3);
}
getRandomNum();
addClassAll();
break;
case 38:
//上
for(var i=0;i<3;i++) {
rowUpMove(0, 1);
rowUpMove(1, 2);
rowUpMove(2, 3);
}
getRandomNum();
addClassAll();
break;
case 40:
//下
for(var i=0;i<3;i++) {
rowUpMove(3, 2);
rowUpMove(2, 1);
rowUpMove(1, 0);
}
getRandomNum();
addClassAll();
break;
case 39:
//右
for(var i=0;i<3;i++){
colLeftMove(3,2);
colLeftMove(2,1);
colLeftMove(1,0);
}
getRandomNum();
addClassAll();
break;
}
});
})