JavaScript--2048游戏（一）

2048游戏项目第一天

实现效果：

第一天完成项目内容和样式的制作
项目界面结构分析：

对应html和css样式如下

<!--HTML内容-->
<p>Score:<span id="score"></span></p>
		<div id="back">
		<!--背景-->
			<!--第一行-->
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<!--第二行-->
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<!--第三行-->
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<!--第四行-->
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
			<div class="grid"></div>
		<!--前景-->
			<!--第一行-->
			<div id="c00" class="cell n2">2</div>
			<div id="c01" class="cell n4">4</div>
			<div id="c02" class="cell n8">8</div>
			<div id="c03" class="cell n16">16</div>
			<!--第二行-->
			<div id="c10" class="cell n32">32</div>
			<div id="c11" class="cell n64">64</div>
			<div id="c12" class="cell n128">128</div>
			<div id="c13" class="cell n256">256</div>
			<!--第三行-->
			<div id="c20" class="cell n512">512</div>
			<div id="c21" class="cell n1024">1024</div>
			<div id="c22" class="cell n2048">2048</div>
			<div id="c23" class="cell n4096">4096</div>
			<!--第四行-->
			<div id="c30" class="cell n8192">8192</div>
			<div id="c31" class="cell"></div>
			<div id="c32" class="cell"></div>
			<div id="c33" class="cell"></div>
		</div>

/*CSS样式*/
p{
	width: 480px;
	margin: 0 auto;
	font-family: Arial;
	font-weight: bold;
	font-size: 40px;
	padding-top: 15px;
	/*设置分数样式*/
}
#back{
	width:487px;
	height:487px;
	margin: 0 auto;/*居中*/
	border: 1px solid #bbada0;
	background-color: #bbada0;
	border-radius: 10px;/*设置圆角*/
	position: relative;
}
.grid,.cell{
	width: 100px;
	height: 100px;
	border-radius: 6px;
}
.grid{
	width: 98px;
	height: 98px;
	float: left;
	border: 1px solid #ccc0b3;
	background-color: #ccc0b3;
	margin: 16px 0 0 16px;
}
.cell{
	text-align: center;
	line-height: 100px;
	color: #776e65;
	font-size: 60px;
	position: absolute;
}
/*设置每一行前景单元格垂直位置*/
#c00,#c01,#c02,#c03{top:17px;}
#c10,#c11,#c12,#c13{top:133px;}
#c20,#c21,#c22,#c23{top:249px;}
#c30,#c31,#c32,#c33{top:365px;}
/*设置每一列前景单元格水平位置*/
#c00,#c10,#c20,#c30{left:17px;}
#c01,#c11,#c21,#c31{left:133px;}
#c02,#c12,#c22,#c32{left:249px;}
#c03,#c13,#c23,#c33{left:365px;}
/*设置每个数字的样式*/
.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;}
.n2,.n4,.n8,.n16,.n32,.n64,.n128,.n256,.n512,.n1024,.n2048,.n4096,.n8192{color: #fff;}
.n1024,.n2048,.n4096,.n8192{font-size: 40px;}

完成效果如下：