JS与HTML、CSS实现2048小游戏（一）

引言

这是大一刚结束的时候做的东西，之前也写了文章做记录，最近想发一下博客，就重新整理了一下，拿来试试水。

知识储备

我们学校的课程安排在大一的时候只学习了html，所以当时做这个项目的时候我通过自学来实现的。因此在学习之前，你需要做一些准备，了解一下html、css、JavaScript的基本语法。前两项算是比较简单，依靠大一时期课本便足够了，最主要的则是JavaScript。这一项大家可以找到一本JavaScript的书进行学习。我当时使用的是《21学通JavaScript》，觉得上面的讲解比较基础，适合初学者快速入门。
就是下面这本：

编译器推荐

应该回来看这个博客的应该是初学者，我就给大家推荐几个比较好用的编译器。
首先，最为基础的写网站的工具是记事本，只需要写完之后把后缀名txt改为html便可以直接访问写好的html网站。
其次就是入门比较常用的adobe公司出品的Dreamweaver，同样是这个公司出品的还有Photoshop（PS）、Premiere（Pr）、Flash等等，这个编译器几乎可以写网站涉及到的大多数功能，不过相对来说他的内置预览功能比较令人头疼。

最后则是我使用的编译器——jetbrains公司出品的webstorm，这个编译器我觉得比较清晰明了，而且对于设置的颜色的16位编码会有一个比较清晰的预览功能。因为我经常会使用同样是jetbrains公司出品的IDEA（JAVA）、pycharm（python）、clion（c++）的编译器，所以我比较喜欢同样这个公司出品的软件的风格。不过就是这个软件的破解码不太好找，大家可以通过自己学校edu结尾的邮箱申请一个学生认证账号，可以免费使用这个公司的大多数产品。

游戏框架

既然是制作一款游戏，那咱们便先要创建一个项目，搭建出这个游戏的基础架构。
我在这里放了七个文件来存放游戏的框架代码：

2048.css ：2048的游戏界面样式
animation.js：游戏动画逻辑文件
game.js ：游戏交互逻辑文件
index.html ：游戏页面，并在头文件中引入其余的js或css文件：
Jquery -1.11.0.js：网络上下载的JavaScript的代码库，减少游戏中手写JS的代码量（有直接可以调用的就直接用就好了）
main.js ：游戏主逻辑文件
game.js ：游戏交互逻辑文件

构建游戏的基础页面

第二步，便要构建游戏的基础页面。

上图便是游戏的主要框架，为了让代码更为清晰，我将这个页面分为了两个部分，前三块标题、按钮、计分器，我将其放入header中作为页面的头部，操作界面则由单独的DIV构成。因为主要实现游戏的逻辑语言是JavaScript，在其中一些需要链接的地方便要用id来进行命名。而游戏更新按钮，再点击时需要重置游戏，便引用javascript:newgame()方法，具体的方法内容则在.js后缀的文件中编写。
头部位置设置好了，再来看操作界面。这个界面是由四行四列的方格组成，最外侧还有一个大方格，便用17个div来定义这一区域。而在命名小格子的名称时使用的数字时0-0，是因为计算机在一般情况下都是从0开始计数的，比如：数组，这样命名符合计算机规则。

<header>
		<h1>2048</h1>
    	<a href="javascript:newgame();" id="newgamebutton">New Game</a>
    	<p>score:<span id="score">0</span></p>
    </header>
    <div id="grid-container">
		<div class="grid-cell" id="grid-cell-0-0"></div>
		<div class="grid-cell" id="grid-cell-0-1"></div>
		<div class="grid-cell" id="grid-cell-0-2"></div>
		<div class="grid-cell" id="grid-cell-0-3"></div>
		<div class="grid-cell" id="grid-cell-1-0"></div>
		<div class="grid-cell" id="grid-cell-1-1"></div>
		<div class="grid-cell" id="grid-cell-1-2"></div>
		<div class="grid-cell" id="grid-cell-1-3"></div>
		<div class="grid-cell" id="grid-cell-2-0"></div>
		<div class="grid-cell" id="grid-cell-2-1"></div>
		<div class="grid-cell" id="grid-cell-2-2"></div>
		<div class="grid-cell" id="grid-cell-2-3"></div>
		<div class="grid-cell" id="grid-cell-3-0"></div>
		<div class="grid-cell" id="grid-cell-3-1"></div>
		<div class="grid-cell" id="grid-cell-3-2"></div>
		<div class="grid-cell" id="grid-cell-3-3"></div>
	</div>

将上面这个代码体现出来便是这样一个效果，因为还没由加上CSS样式，便没有什么具体的显示。
大致的页面设置完了，就要设置CSS样式，先是将整个界面居中，调整字体大小，再设置操作界面中各个div的间隔，大小与宽度，鉴于这些内容比较基础，我就不一一描述了，大家可以参照以下代码进行调整。建议大家先自己尝试着编写这部分代码，等编写完之后在来对照我的代码，如果有问题欢迎大家指正交流。

#grid-container{
	width: 520px;
	height: 520px;
	margin: 50px auto;
	background-color: #bbada0;
	border-radius:10px;
	position: relative;
	overflow: auto;
}
.grid-cell{
	width: 100px;
	height: 100px;
	margin: 10px;
	border-radius: 6px;
	background-color: #ccc0b3;
	position: absolute;
}

.number-cell{
	margin: 10px;
	border-radius: 6px;
	font-family: Arial;
	font-weight: bold;
	font-size: 60px;
	line-height: 100px;
	text-align: center;
	position: absolute;
}

这样构建完页面会出现只显示一个格子的状况，后续的JS程序会调整成刚开始预览的16格的状况。而使用JS来初始化是为了方便在编写其他函数时方便调用每个方块的信息。

后续文章

JS与HTML、CSS实现2048小游戏（二）