本人正在学习ing，应该bug众多还请见谅
如有转载请告知，谢谢！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048</title>
<style>
*{
font-family: arial;
margin: 0;
padding: 0;
}
.header{
width: 500px;
height: 50px;
color: #000;
margin: 0 auto;
font-size: 48px;
font-weight: bold;
margin-top: 100px;
}
.header>span{
color: #f00;
}
.cell_all{
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #bbada0;
border-radius: 10px;
}
.cell{
width: 110px;
height: 110px;
border: 1px solid #000;
opacity: 0.95;
float: left;
border-radius: 9px;
margin-left: 10px;
margin-top: 12px;
font-size: 35px;
font-weight: bold;
line-height: 110px;
text-align: center;
color: #fff;
}
/*不同数字加减后的数值*/
.n2{
background-color:#eee3da;
color:#776e65;
}
.n4{
background-color:#ede0c8;
color:#776e65;
}
.n8{
background-color:#f2b179;
}
.n16{
background-color:#f59563;
}
.n32{
background-color:#f67c5f;
}
.n64{
background-color:#f65e3b;
}
.n128{
background-color:#edcf72;
}
.n256{
background-color:#edcc61;
}
.n512{
background-color:#9c0;
}
.n1024{
font-size:40px;
background-color:#33b5e5;
}
.n2048{
font-size:40px;
background-color: #09c;
}
.n4096{
background-color:#a6c;
font-size:40px;
}
.n8192{
background-color:#93c;
font-size:40px;
}
/*gameover*/
.gameover{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
display: none;
}
.gameover>p{
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #000;
border-radius: 15px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 66px;
}
.gameover_p>span{
color: #f00;
font-size: 40px;
}
.gameover_p>a{
text-decoration: none;
background-color: #9f8d77;
border-radius: 5px;
color: #fff;
padding: 8px 8px 4px;
}
</style>
</head>
<body>
<!-- header -->
<div class="header">
SCORE:<span id="score_01">0</span>
</div>
<!-- 4*4 -->
<div class="cell_all">
<!-- 第一行 -->
<div class="cell" id="c00"></div>
<div class="cell" id="c01"></div>
<div class="cell" id="c02"></div>
<div class="cell" id="c03"></div>
<!-- 第二行 -->
<div class="cell" id="c10"></div>
<div class="cell" id="c11"></div>
<div class="cell" id="c12"></div>
<div class="cell" id="c13"></div>
<!-- 第三行 -->
<div class="cell" id="c20"></div>
<div class="cell" id="c21"></div>
<div class="cell" id="c22"></div>
<div class="cell" id="c23"></div>
<!-- 第四行 -->
<div class="cell" id="c30"></div>
<div class="cell" id="c31"></div>
<div class="cell" id="c32"></div>
<div class="cell" id="c33"></div>
<!--[
[00,01,02,03],
[10,11,12,13],
[20,21,22,23