html 2048小游戏【源码详解（一）】

导言

这里先讲一下2048小游戏的界面设计，包含结构和样式，主要是用拆分的思想进行。完整代码可以先看主页的上一篇。篇幅3500字。

游戏规则

游戏规则如下：

1.游戏开始时，棋盘上有两个数字方块，数字为2或4。
2.每次操作可以选择上、下、左、右四个方向进行滑动。
滑动时，所有方块会朝着滑动方向移动，如果两个相同数字的方块在滑动方向上紧挨着，
3.它们会合并成一个数字加倍的方块。
4.每次操作后，系统会在空白的位置随机生成一个数字方块，数字为2或4。
5.当棋盘上有一个方块的数字达到2048时，游戏胜利。
6.如果棋盘被填满且无法再进行有效的滑动操作时，游戏结束。

思维工具

拆分思想、简化思想

游戏界面1-容器

用html编写游戏，梦的起点往往是从一个box（盒子/div）开始的，让我们一起起航到远方。

html结构

创建一个id为gameContainer的div容器作为游戏的界面。

<!-- 1. 游戏界面 -->
<div id="gameContainer"></div>

css样式

这里显示一个500px * 500px带边框的div，实际上个在后面是会自动按内容扩容，用到了下面这个属性，所以后面会去掉，具体可以参照主页完整代码。
display:inline-block; >>> 将元素显示为内联块级元素（也叫行内块级元素），即既具有内联元素的特性（可以在一行显示），又具有块级元素的特性（可以设置宽高、内外边距等）

					/* 1. 设置页面整体样式 */
			       body {
			            text-align: center;		// 将游戏界面居中
			            margin-top: 50px;
			        }
			                
			        /* 2. 设置游戏容器样式 */
			        #gameContainer {
			            margin-top: 50px;
			            display: inline-block;
						border: 1px solid red; //设置红色的边框
						width: 500px; 		
						height: 500px;
			        }

游戏界面2 -其他细节

游戏标题

html结构

<!-- 2. 游戏标题 -->
<h1>2048</h1>

css样式

游戏的标题样式，这里设置为字体50px，相当于加粗的效果，颜色设置为浅灰色。

/* 3. 标题样式的设置 */
h1 {
       font-size: 50px;
       color: #776e65; // 浅灰色
 }

游戏分数

html结构

设置一个id为score的div，初始化分数是0.

<!-- 3. 分数显示 -->
<div id="score">Score: 0</div>

css样式

这里颜色设计为浅灰色，和上面一样，尽可能保持统一的颜色会比较好看

/* 4.分数的样式设计 */
#score {
    font-size: 24px; //字体大小
    margin-bottom: 10px; //外边距，下外边距
    color: #776e65; //浅灰色
	 }

效果图

到这里已经阅读1000字了，小伙伴们坚持阅读也会让你们不断成长，加油，你是最棒的！

游戏面板容器

这里是游戏真正开始的界面，用于填充游戏元素。

html结构

<!-- 4. 游戏面板容器 -->
<div id="gridContainer"></div>

css样式

这里用拆分思想将游戏面板拆分为4行4列的游戏模块，具体实现如下。
1.首先设置容器的宽高为400px（像素）。
2.border：1px solid #bbada0;>>> 设置容器的边框样式为实线，宽度为1像素，颜色为浅灰，这里可以用16进制颜色表选取。
3.display:grid; >>>将容器的显示方式设置为网格布局。
4.grid-template-columns:repeat(4,1fr);>>> 设置网格的列模板，重复4次1fr（等分比例），就是将容器分为4等分。这里可以看效果图。
fr 就是是一种 CSS 单位，用于设置网格布局中的分数比例。fr 表示分数单位（fraction unit），用于将可用空间按照比例划分。
5.grid-gap：10px;>>>设置网格之间的间隙为10像素。
其他：设置背景颜色和内边距。

/*5. 游戏面板容器样式设计*/
					#gridContainer {
					    /* 设置容器宽度为400像素 */
					    width: 400px;
					    /* 设置容器高度为400像素 */
					    height: 400px;
					    /* 设置容器边框样式为实线，宽度为1像素，颜色为#bbada0 */
					    border: 1px solid #bbada0;
					    /* 设置容器为网格布局 */
					    display: grid;
					    /* 设置网格列模板，重复4次1fr（等分比例） */
					    grid-template-columns: repeat(4, 1fr);
					    /* 设置网格间隙为10像素 */
					    grid-gap: 10px;
					    /* 设置容器背景颜色为#faf8ef */
					    background-color: #faf8ef;
					    /* 设置容器内边距为10像素 */
					    padding: 10px;
					}

效果图

拆分思想将游戏面板拆分成四行四列。
这里已经阅读2000字了，在这里也和小伙伴们坚持学习，加油！

游戏结束界面

游戏结束容器

html结构

为游戏的结束设计一个容器，设置了一个id名为gameOverContainer的容器

<!-- 5. 游戏结束提示和重启按钮容器 -->
<div id="gameOverContainer">		
</div>

css样式

加载游戏界面，和开始游戏的时候不应该显示游戏结束的容器，所以这里display设置为none。

#gameOverContainer {
				/* 默认情况下隐藏容器 */
				display: none;
				/* 上边距为20像素 */
				margin-top: 20px;
			}

游戏提示结束界面

html结构

<div id="gameOverContainer">		
</div>

这是在游戏结束容器里面的代码，所以一起拿过来了，写过了上面那一行可以将他删掉。

<div id="gameOverContainer">
				<!-- 6. 游戏结束提示 -->
				<div id="gameOver">Game Over!</div>
				<!-- 7. 重启按钮 -->
				<button id="restartButton">Restart</button>
			</div>

css样式

#gameOver {
				/* 设置字体大小为36像素 */
				font-size: 36px;
				/* 设置字体颜色为#776e65 */
				color: #776e65;
				/* 底边距为10像素 */
				margin-bottom: 10px;
			}

重新开始按钮的设计

为了游戏结束后游戏的重新开始，这里设计了一个重新开始的按钮。

html结构

<!-- 7. 重启按钮 -->
<button id="restartButton">Restart</button>

css样式

设置背景颜色为棕色，字体为白色。

#restartButton {
				/* 设置字体大小为20像素 */
				font-size: 20px;
				/* 设置内边距为8像素顶部和底部，20像素左右 */
				padding: 8px 20px;
				/* 设置边框圆角为6像素 */
				border-radius: 6px;
				/* 设置背景颜色为#8f7a66 */
				background-color: #8f7a66;
				/* 设置字体颜色为白色 */
				color: #fff;
				/* 设置边框样式为无，即没有边框 */
				border: none;
				/* 设置光标样式为手型 */
				cursor: pointer;
			}

效果图

这里为了展示效果先把上面的游戏结束容器的display显示方式设置为none的这一行代码进行注释。

由于时间关系，这里就先写页面结构和样式部分的设计，重点掌握拆分思想。欢迎反馈和交流学习。