用HTML5做2048游戏（一）

来源：互联网发布：des密码算法编辑：程序博客网时间：2024/05/21 18:44

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

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

1.html5/css/js

2.Jquery

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

<head><meta charset="utf-8" /><title>2048小游戏</title><link rel="stylesheet" href="css/2048.css" />

<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>

</head>

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

2）游戏标题部分

<div><header>

<h1>2048</h1><input type="button" id="butt" value="new game" /><p>score:<span id="score">0</span></p></header>

</div>

我们为此部分添加样式：

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个小方格的颜色和状态是一致的，代码如下：

<div class="game"><div class="gride-cell" id="gride1-1"></div><div class="gride-cell" id="gride1-2"></div><div class="gride-cell" id="gride1-3"></div><div class="gride-cell" id="gride1-4"></div><div class="gride-cell" id="gride2-1"></div><div class="gride-cell" id="gride2-2"></div><div class="gride-cell" id="gride2-3"></div><div class="gride-cell" id="gride2-4"></div><div class="gride-cell" id="gride3-1"></div><div class="gride-cell" id="gride3-2"></div><div class="gride-cell" id="gride3-3"></div><div class="gride-cell" id="gride3-4"></div><div class="gride-cell" id="gride4-1"></div><div class="gride-cell" id="gride4-2"></div><div class="gride-cell" id="gride4-3"></div><div class="gride-cell" id="gride4-4"></div>

</div>

它得到样式设计如下：

.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。

详情见下一篇博客。

1 0