用HTML5做2048游戏（一）

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

                       

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

1.html5/css/js

2.Jquery

     1）首先是准备工作（导入jquery包）

       其中，此游戏的界面样式均放在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。

详情见下一篇博客。