用html5做个游戏,用HTML5做2048游戏（一）

首先我们需要做一个2048游戏的静态页面，效果如下图所示(颜色是我在网上找的代码，如有雷同，一定是我在抄袭)：

要做这样一个页面只需要掌握以下两点技术即可：

1.html5/css/js

2.Jquery

1)首先是准备工作(导入jquery包)

2048小游戏

其中，此游戏的界面样式均放在2048.css中

2)游戏标题部分

2048

score:0

我们为此部分添加样式：

header{

width: 100%;height: 100px;display:block ;text-align: center;

}

header p{

font-size: 30px;font-family: arial;

}

header input{

display: block;

margin: 20px auto;

width: 100px;

padding: 10px 10px;

background-color: #8f7a66;

font-family: Arial;

color: white;

border-radius: 10px;

text-decoration: none;

}

3)游戏主界面的静态页面

它是分为4X4的棋盘式界面，16个小方格的颜色和状态是一致的，代码如下：

它得到样式设计如下：

.game{

width: 460px;

height: 460px;

padding: 20px;

margin: 50px auto;

background-color: #bbada0;

border-radius: 10px;

position: relative;

margin-top: 100px;

vertical-align: middle;

}

.gride-cell{

width: 100px;

height: 100px;

border-radius: 6px;

background-color: #ccc0b3;

position: relative;

float: left;

margin: 7.5px;

}

细心的朋友可以发现，我这个其实并没有绝对居中，有点小瑕疵。

但是作为一个练习的项目主要是掌握这个游戏动起来的部分，既它的游戏逻辑JS。

详情见下一篇博客。