2048虽然只是一个小单机，到处都是，但重要的我们是要锻炼自己的逻辑思维，2048对于一些初入JS的同学而言，很值得参考
话不多说，我们直接上代码：
首先是HTML
<body>
<p>2048</p>
<div class="star">score:<span id="score01">0</span>（这里放一个元素在JS里储存它的变量）</div>
<div class="big">
<!-- 第一行 -->
<div class="cell n2" id="c00">2</div>
<div class="cell n" id="c01"></div>
<div class="cell n4" id="c02">4</div>
<div class="cell n" id="c03"></div>
<!-- 第二行 -->
<div class="cell n" id="c10"></div>
<div class="cell n2048" id="c11">2048</div>(这里只是做一个简单的视图看看效果，后面会写JS覆盖掉)
<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>
</div>
<div class="aa" id="gameover">
<div class="over">
Game over
<br>
SCORE:<span id="score02">0</span> （这里放一个元素在JS里储存它的变量）
<br>
<br>
<a href="#" onclick="sta()">重新开始</a>
</div>
</div>
<script src="./demo.js"></script>
</body>
这个没有什么好说的，一目了然，接下来是css：
//全局属性
*{
margin: 0;
padding: 0;
font-size: 30px;
font-weight: bold;
text-decoration: none;
}
//整个2048边框
.big{
width: 500px;
height: 500px;
background-color: rgba(80, 69, 46, 0.26);
border-radius: 10px;
margin: auto;
}
//2048标题
p{
font-size: 40px;
text-align: center;
}
//开始游戏
.star{
margin-top: 20px;
font-size: 40px;
width: 500px;
margin: auto;
}
//每个小数字方块的样式
.cell{
width: 100px;
height: 100px;
margin-top: 20px;
margin-left: 20px;
border-radius: 5px;
background-color: honeydew;
float: left;
color: white;
text-align: center;
line-height: 110px;
}
//每一个相加数字之和的样式
.n2{
background-color: #eee3da;
}
.n4{
background-color: #ede0c8;
}
.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{
background-color: #33b5e5;
}
.n2048{
background-color: #09c;
}
.n4096{
background-color: #a6c;
}
.n8192{
background-color: #93c;
}
//游戏结束之和出来遮罩层
.aa{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,0.3);
display: none;
}
//游戏结束框
.over{
width: 300px;
height: 200px;
background-color: white;
border-radius: 10px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
position: absolute;
text-align: center;
}
//重新开始样式
.over a{
background-color: #9f8d77;
border-radius: 5px;
color: #fff;
padding: 10px;
}
敲黑板！重点来了
以下是js代码：
//以数组的形式存方法
//先把游戏需要的准备工作做好，最后再写上下左右的操作
var game={
data:[], //存放数据
score:0, //分数
status:0, //当前状态，时刻监听，时刻需要改变，下面两个元素就是用来改变status元素
gameover:0, //游戏结束时为0
gameruning:1, //游戏开始时为1
//开始游戏的方法
start:function(){
this.score=0; //游戏开始，当前分数是0
this.data = [ //声明数组，放到2048的格子中去
[0,0,0,0],
最低0.47元/天 解锁文章
1069
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
