“2048”游戏网页版html+css+js

“2048”游戏网页版html+css+js

 别忘了请点个赞+收藏+关注支持一下博主喵！！！
   2048 游戏是一个非常流行的数字拼图游戏，玩家通过移动方块使相同数字的方块合并，终极到达 2048 或更高分数。本教程将详细先容怎样使用 HTML、CSS 和 JavaScript 创建一个简朴的 2048 游戏网页。
  项目结构如下：（懒得搭vue了）

1. 2048-game/
2. ├── index.html
3. ├── styles.css
4. └── script.js

复制代码

1. index.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8"> <!-- 设置文档的字符编码为 UTF-8 -->
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上适配屏幕宽度 -->
6.     <title>2048 Game</title> <!-- 页面标题 -->
7.     <link rel="stylesheet" href="styles.css"> <!-- 引入外部 CSS 文件 -->
8. </head>
9. <body>
10.     <div class="game-container"> <!-- 游戏容器，用于包裹整个游戏界面 -->
11.         <div class="score-container">0</div> <!-- 分数显示区域 -->
12.         <div class="grid-container"> <!-- 网格容器，用于包裹 4x4 的游戏网格 -->
13.             <div class="grid-row"> <!-- 每一行的网格 -->
14.                 <div class="grid-cell"></div> <!-- 每一个网格单元 -->
15.                 <div class="grid-cell"></div>
16.                 <div class="grid-cell"></div>
17.                 <div class="grid-cell"></div>
18.             </div>
19.             <div class="grid-row">
20.                 <div class="grid-cell"></div>
21.                 <div class="grid-cell"></div>
22.                 <div class="grid-cell"></div>
23.                 <div class="grid-cell"></div>
24.             </div>
25.             <div class="grid-row">
26.                 <div class="grid-cell"></div>
27.                 <div class="grid-cell"></div>
28.                 <div class="grid-cell"></div>
29.                 <div class="grid-cell"></div>
30.             </div>
31.             <div class="grid-row">
32.                 <div class="grid-cell"></div>
33.                 <div class="grid-cell"></div>
34.                 <div class="grid-cell"></div>
35.                 <div class="grid-cell"></div>
36.             </div>
37.         </div>
38.         <button id="restart-button">Restart</button> <!-- 重新开始按钮 -->
39.     </div>
40.     <script src="script.js"></script> <!-- 引入外部 JavaScript 文件 -->
41. </body>
42. </html>

复制代码

2. styles.css

1. body {
2.     display: flex; /* 使用 Flexbox 布局 */
3.     justify-content: center; /* 水平居中 */
4.     align-items: center; /* 垂直居中 */
5.     height: 100vh; /* 占满整个视窗高度 */
6.     margin: 0; /* 移除默认外边距 */
7.     background-color: #faf8ef; /* 背景颜色 */
8.     font-family: Arial, sans-serif; /* 字体设置 */
9. }
11. .game-container {
12.     width: 500px; /* 容器宽度 */
13.     height: 500px; /* 容器高度 */
14.     position: relative; /* 相对定位 */
15.     background-color: #bbada0; /* 背景颜色 */
16.     border-radius: 10px; /* 圆角 */
17.     box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* 阴影效果 */
18. }
20. .score-container {
21.     position: absolute; /* 绝对定位 */
22.     top: 10px; /* 距离顶部 10px */
23.     left: 10px; /* 距离左边 10px */
24.     background-color: #eee4da; /* 背景颜色 */
25.     padding: 10px; /* 内边距 */
26.     border-radius: 5px; /* 圆角 */
27.     font-size: 24px; /* 字体大小 */
28.     font-weight: bold; /* 加粗字体 */
29. }
31. .grid-container {
32.     width: 400px; /* 网格容器宽度 */
33.     height: 400px; /* 网格容器高度 */
34.     position: absolute; /* 绝对定位 */
35.     top: 50%; /* 距离顶部 50% */
36.     left: 50%; /* 距离左边 50% */
37.     transform: translate(-50%, -50%); /* 居中对齐 */
38.     display: grid; /* 使用 Grid 布局 */
39.     grid-template-columns: repeat(4, 100px); /* 4 列，每列 100px */
40.     grid-template-rows: repeat(4, 100px); /* 4 行，每行 100px */
41.     gap: 10px; /* 网格间距 */
42. }
44. .grid-cell {
45.     background-color: #cdc1b4; /* 背景颜色 */
46.     border-radius: 3px; /* 圆角 */
47.     display: flex; /* 使用 Flexbox 布局 */
48.     justify-content: center; /* 水平居中 */
49.     align-items: center; /* 垂直居中 */
50.     font-size: 32px; /* 字体大小 */
51.     font-weight: bold; /* 加粗字体 */
52.     color: #776e65; /* 文字颜色 */
53. }
55. /* 不同数字的方块样式 */
56. .grid-cell.number-2 { background-color: #eee4da; color: #776e65; }
57. .grid-cell.number-4 { background-color: #ede0c8; color: #776e65; }
58. .grid-cell.number-8 { background-color: #f2b179; color: #f9f6f2; }
59. .grid-cell.number-16 { background-color: #f59563; color: #f9f6f2; }
60. .grid-cell.number-32 { background-color: #f67c5f; color: #f9f6f2; }
61. .grid-cell.number-64 { background-color: #f65e3b; color: #f9f6f2; }
62. .grid-cell.number-128 { background-color: #edcf72; color: #f9f6f2; }
63. .grid-cell.number-256 { background-color: #edcc61; color: #f9f6f2; }
64. .grid-cell.number-512 { background-color: #edc850; color: #f9f6f2; }
65. .grid-cell.number-1024 { background-color: #edc53f; color: #f9f6f2; }
66. .grid-cell.number-2048 { background-color: #edc22e; color: #f9f6f2; }
68. #restart-button {
69.     position: absolute; /* 绝对定位 */
70.     bottom: 10px; /* 距离底部 10px */
71.     left: 50%; /* 距离左边 50% */
72.     transform: translateX(-50%); /* 水平居中 */
73.     padding: 10px 20px; /* 内边距 */
74.     background-color: #8f7a66; /* 背景颜色 */
75.     color: #f9f6f2; /* 文字颜色 */
76.     border: none; /* 无边框 */
77.     border-radius: 5px; /* 圆角 */
78.     cursor: pointer; /* 鼠标指针样式 */
79.     font-size: 18px; /* 字体大小 */
80.     font-weight: bold; /* 加粗字体 */
81. }
83. #restart-button:hover {
84.     background-color: #746655; /* 鼠标悬停时的背景颜色 */
85. }

复制代码

3. 最难的script.js

1. const grid = document.querySelector('.grid-container'); // 获取网格容器
2. const cells = document.querySelectorAll('.grid-cell'); // 获取所有网格单元
3. const scoreContainer = document.querySelector('.score-container'); // 获取分数显示区域
4. const restartButton = document.getElementById('restart-button'); // 获取重新开始按钮
6. let score = 0; // 初始化分数
7. let hasWon = false; // 标记是否已经赢得游戏
9. const matrix = [
10.     [0, 0, 0, 0], // 初始化 4x4 的矩阵
11.     [0, 0, 0, 0],
12.     [0, 0, 0, 0],
13.     [0, 0, 0, 0]
14. ];
16. const winNumber = 2048; // 赢得游戏的目标数字
18. // 获取一个随机的空格子
19. function getRandomEmptyCell() {
20.     const emptyCells = []; // 存储所有空格子的坐标
21.     for (let i = 0; i < 4; i++) {
22.         for (let j = 0; j < 4; j++) {
23.             if (matrix[i][j] === 0) { // 如果格子为空
24.                 emptyCells.push({ row: i, col: j }); // 将坐标加入空格子列表
25.             }
26.         }
27.     }
28.     if (emptyCells.length > 0) { // 如果有空格子
29.         const randomIndex = Math.floor(Math.random() * emptyCells.length); // 随机选择一个空格子
30.         return emptyCells[randomIndex];
31.     }
32.     return null; // 没有空格子返回 null
33. }
35. // 在随机选择的空格子中添加一个新方块（2 或 4）
36. function addRandomTile() {
37.     const cell = getRandomEmptyCell();
38.     if (cell) {
39.         const value = Math.random() < 0.9 ? 2 : 4; // 90% 的概率生成 2，10% 的概率生成 4
40.         matrix[cell.row][cell.col] = value; // 更新矩阵
41.         updateGrid(); // 更新网格显示
42.     }
43. }
45. // 更新 HTML 网格中的方块显示
46. function updateGrid() {
47.     cells.forEach((cell, index) => {
48.         const row = Math.floor(index / 4); // 计算当前单元格所在的行
49.         const col = index % 4; // 计算当前单元格所在的列
50.         const value = matrix[row][col]; // 获取矩阵中的值
51.         cell.textContent = value || ''; // 显示值，如果没有值则显示空字符串
52.         cell.classList.remove('number-2', 'number-4', 'number-8', 'number-16', 'number-32', 'number-64', 'number-128', 'number-256', 'number-512', 'number-1024', 'number-2048'); // 移除所有样式类
53.         if (value !== 0) { // 如果有值，添加对应的样式类
54.             cell.classList.add(`number-${value}`);
55.         }
56.     });
57. }
59. // 向上移动
60. function moveUp() {
61.     for (let col = 0; col < 4; col++) { // 遍历每一列
62.         let tempCol = []; // 临时存储非零值
63.         for (let row = 0; row < 4; row++) {
64.             if (matrix[row][col] !== 0) {
65.                 tempCol.push(matrix[row][col]); // 将非零值加入临时列表
66.             }
67.         }
68.         tempCol = mergeTiles(tempCol); // 合并相同的值
69.         for (let row = 0; row < 4; row++) {
70.             matrix[row][col] = tempCol[row] || 0; // 更新矩阵
71.         }
72.     }
73.     addRandomTile(); // 添加新的方块
74.     checkGameOver(); // 检查游戏是否结束
75. }
77. // 向下移动
78. function moveDown() {
79.     for (let col = 0; col < 4; col++) { // 遍历每一列
80.         let tempCol = []; // 临时存储非零值
81.         for (let row = 3; row >= 0; row--) {
82.             if (matrix[row][col] !== 0) {
83.                 tempCol.push(matrix[row][col]); // 将非零值加入临时列表
84.             }
85.         }
86.         tempCol = mergeTiles(tempCol); // 合并相同的值
87.         for (let row = 3; row >= 0; row--) {
88.             matrix[row][col] = tempCol[3 - row] || 0; // 更新矩阵
89.         }
90.     }
91.     addRandomTile(); // 添加新的方块
92.     checkGameOver(); // 检查游戏是否结束
93. }
95. // 向左移动
96. function moveLeft() {
97.     for (let row = 0; row < 4; row++) { // 遍历每一行
98.         let tempRow = []; // 临时存储非零值
99.         for (let col = 0; col < 4; col++) {
100.             if (matrix[row][col] !== 0) {
101.                 tempRow.push(matrix[row][col]); // 将非零值加入临时列表
102.             }
103.         }
104.         tempRow = mergeTiles(tempRow); // 合并相同的值
105.         for (let col = 0; col < 4; col++) {
106.             matrix[row][col] = tempRow[col] || 0; // 更新矩阵
107.         }
108.     }
109.     addRandomTile(); // 添加新的方块
110.     checkGameOver(); // 检查游戏是否结束
111. }
113. // 向右移动
114. function moveRight() {
115.     for (let row = 0; row < 4; row++) { // 遍历每一行
116.         let tempRow = []; // 临时存储非零值
117.         for (let col = 3; col >= 0; col--) {
118.             if (matrix[row][col] !== 0) {
119.                 tempRow.push(matrix[row][col]); // 将非零值加入临时列表
120.             }
121.         }
122.         tempRow = mergeTiles(tempRow); // 合并相同的值
123.         for (let col = 3; col >= 0; col--) {
124.             matrix[row][col] = tempRow[3 - col] || 0; // 更新矩阵
125.         }
126.     }
127.     addRandomTile(); // 添加新的方块
128.     checkGameOver(); // 检查游戏是否结束
129. }
131. // 合并相同的值
132. function mergeTiles(tiles) {
133.     for (let i = 0; i < tiles.length - 1; i++) {
134.         if (tiles[i] === tiles[i + 1]) { // 如果相邻的两个值相同
135.             tiles[i] *= 2; // 合并值
136.             tiles.splice(i + 1, 1); // 删除合并后的值
137.             score += tiles[i]; // 更新分数
138.             scoreContainer.textContent = score; // 更新分数显示
139.             if (tiles[i] === winNumber && !hasWon) { // 如果达到目标值且未赢过
140.                 alert('You Win!'); // 提示胜利
141.                 hasWon = true; // 标记已赢
142.             }
143.         }
144.     }
145.     while (tiles.length < 4) { // 确保列表长度为 4
146.         tiles.push(0);
147.     }
148.     return tiles;
149. }
151. // 检查游戏是否结束
152. function checkGameOver() {
153.     let gameOver = true; // 默认游戏结束
154.     for (let i = 0; i < 4; i++) {
155.         for (let j = 0; j < 4; j++) {
156.             if (matrix[i][j] === 0 || // 如果有空格子
157.                 (i < 3 && matrix[i][j] === matrix[i + 1][j]) || // 或者有相邻的相同值
158.                 (j < 3 && matrix[i][j] === matrix[i][j + 1])) {
159.                 gameOver = false; // 游戏未结束
160.                 break;
161.             }
162.         }
163.         if (!gameOver) break;
164.     }
165.     if (gameOver) {
166.         alert('Game Over!'); // 提示游戏结束
167.     }
168. }
170. // 重新开始游戏
171. function restartGame() {
172.     matrix.forEach(row => row.fill(0)); // 重置矩阵
173.     score = 0; // 重置分数
174.     hasWon = false; // 重置胜利标记
175.     scoreContainer.textContent = score; // 更新分数显示
176.     addRandomTile(); // 添加初始方块
177.     addRandomTile(); // 添加初始方块
178.     updateGrid(); // 更新网格显示
179. }
181. // 监听键盘事件
182. document.addEventListener('keydown', (event) => {
183.     switch (event.key) {
184.         case 'ArrowUp': // 上箭头
185.             moveUp();
186.             break;
187.         case 'ArrowDown': // 下箭头
188.             moveDown();
189.             break;
190.         case 'ArrowLeft': // 左箭头
191.             moveLeft();
192.             break;
193.         case 'ArrowRight': // 右箭头
194.             moveRight();
195.             break;
196.     }
197. });
199. // 监听重新开始按钮点击事件
200. restartButton.addEventListener('click', restartGame);
202. // 初始化游戏
203. restartGame();

复制代码

 别忘了请点个赞+收藏+关注支持一下博主喵！！！
累了，水一下吧。。。。。。∗︎˚(* ˃̤൬˂̤ *)˚∗︎
gitee：2048-game: html+css+js设计的一个2048游戏（网页）