基于 HTML5 Canvas 制作一个精致的 2048 小游戏--day2

李优秀  金牌会员 | 4 小时前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 489|帖子 489|积分 1467

为了使 2048 游戏的设计更加美观和用户友好，我们可以进行以下几项优化：

  • 改善颜色方案：使用更温馨的颜色组合。
  • 添加动画效果：为方块的移动和归并添加渐变效果。
  • 优化分数显示：在分数增长时使用动画效果。
以下是改进后的代码示例：

1. CSS 样式（style.css）

  1. body {
  2.     display: flex;
  3.     justify-content: center;
  4.     align-items: center;
  5.     height: 100vh;
  6.     background-color: #faf8ef;
  7.     font-family: 'Arial', sans-serif;
  8. }
  10. .container {
  11.     position: relative;
  12.     width: 420px; /* 自适应游戏板的总宽度 */
  13. }
  15. canvas {
  16.     border: 2px solid #bbada0;
  17.     background-color: #eee4da;
  18.     transition: background-color 0.3s ease; /* 过渡效果 */
  19. }
  21. .score {
  22.     position: absolute;
  23.     top: -40px; /* 根据需要调整分数的位置 */
  24.     right: 10px;
  25.     font-size: 24px;
  26.     color: #776e65;
  27.     font-weight: bold;
  28. }
复制代码
2. 更新 HTML（index.html）

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>2048 游戏</title>
  7.     <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <canvas id="gameCanvas"></canvas>
  12.         <div class="score" id="scoreDisplay">Score: 0</div> <!-- 分数显示 -->
  13.     </div>
  14.     <script src="script.js"></script>
  15. </body>
  16. </html>
复制代码
3. JavaScript 动画和动态效果（script.js）

在 JavaScript 中，我们将实现方块的移动和归并时的动画效果。我们也会在分数更新时添加动画效果。
  1. const canvas = document.getElementById("gameCanvas");
  2. const ctx = canvas.getContext("2d");
  4. const gridSize = 4;
  5. const tileSize = 100;
  6. canvas.width = gridSize * tileSize;
  7. canvas.height = gridSize * tileSize;
  9. let board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
  10. let score = 0;
  12. initBoard();
  14. function initBoard() {
  15.   addRandomTile();
  16.   addRandomTile();
  17.   drawBoard();
  18. }
  20. function drawBoard() {
  21.   ctx.clearRect(0, 0, canvas.width, canvas.height);
  22.   for (let r = 0; r < gridSize; r++) {
  23.     for (let c = 0; c < gridSize; c++) {
  24.       drawTile(r, c);
  25.     }
  26.   }
  27.   updateScoreDisplay();
  28. }
  30. function drawTile(r, c) {
  31.   const value = board[r][c];
  32.   ctx.fillStyle = value !== 0 ? getTileColor(value) : "#ccc0b3";
  33.   ctx.fillRect(
  34.     c * tileSize + 5,
  35.     r * tileSize + 5,
  36.     tileSize - 10,
  37.     tileSize - 10
  38.   ); // 为方块添加间距
  40.   if (value !== 0) {
  41.     ctx.fillStyle = getTextColor(value);
  42.     ctx.font = "bold 35px Arial";
  43.     ctx.textAlign = "center";
  44.     ctx.textBaseline = "middle";
  45.     ctx.fillText(
  46.       value,
  47.       c * tileSize + tileSize / 2,
  48.       r * tileSize + tileSize / 2
  49.     );
  50.   }
  51. }
  53. function getTileColor(value) {
  54.   switch (value) {
  55.     case 2:
  56.       return "#eee4da";
  57.     case 4:
  58.       return "#ede0c8";
  59.     case 8:
  60.       return "#f2b179";
  61.     case 16:
  62.       return "#f59563";
  63.     case 32:
  64.       return "#f67c5f";
  65.     case 64:
  66.       return "#f67c5f";
  67.     case 128:
  68.       return "#edcf72";
  69.     case 256:
  70.       return "#edcc61";
  71.     case 512:
  72.       return "#edc850";
  73.     case 1024:
  74.       return "#edc53f";
  75.     case 2048:
  76.       return "#edc22e";
  77.     default:
  78.       return "#ccc0b3";
  79.   }
  80. }
  82. function getTextColor(value) {
  83.   return value <= 4 ? "#776e65" : "#ffffff"; // 小于等于4的数字使用深色，大于4的使用白色
  84. }
  86. function addRandomTile() {
  87.   let emptyCells = [];
  88.   for (let r = 0; r < gridSize; r++) {
  89.     for (let c = 0; c < gridSize; c++) {
  90.       if (board[r][c] === 0) {
  91.         emptyCells.push({ r, c });
  92.       }
  93.     }
  94.   }
  96.   if (emptyCells.length) {
  97.     const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
  98.     board[r][c] = Math.random() < 0.9 ? 2 : 4;
  99.   }
  100. }
  102. document.addEventListener("keydown", (event) => {
  103.   let moved = false;
  104.   switch (event.key) {
  105.     case "ArrowUp":
  106.       moved = moveUp();
  107.       break;
  108.     case "ArrowDown":
  109.       moved = moveDown();
  110.       break;
  111.     case "ArrowLeft":
  112.       moved = moveLeft();
  113.       break;
  114.     case "ArrowRight":
  115.       moved = moveRight();
  116.       break;
  117.   }
  119.   if (moved) {
  120.     addRandomTile();
  121.     drawBoard();
  122.     if (checkGameOver()) {
  123.       showGameOver();
  124.     }
  125.   }
  126. });
  128. function canMergeTiles(r1, c1, r2, c2) {
  129.   return board[r1][c1] !== 0 && board[r1][c1] === board[r2][c2];
  130. }
  132. function moveUp() {
  133.   let moved = false;
  134.   for (let c = 0; c < gridSize; c++) {
  135.     for (let r = 1; r < gridSize; r++) {
  136.       if (board[r][c] !== 0) {
  137.         let targetRow = r;
  138.         while (targetRow > 0 && board[targetRow - 1][c] === 0) {
  139.           board[targetRow - 1][c] = board[targetRow][c];
  140.           board[targetRow][c] = 0;
  141.           targetRow--;
  142.           moved = true;
  143.         }
  144.         if (targetRow > 0 && canMergeTiles(targetRow - 1, c, targetRow, c)) {
  145.           board[targetRow - 1][c] *= 2;
  146.           score += board[targetRow - 1][c];
  147.           board[targetRow][c] = 0;
  148.           moved = true;
  149.         }
  150.       }
  151.     }
  152.   }
  153.   return moved;
  154. }
  156. function moveDown() {
  157.   let moved = false;
  158.   for (let c = 0; c < gridSize; c++) {
  159.     for (let r = gridSize - 2; r >= 0; r--) {
  160.       if (board[r][c] !== 0) {
  161.         let targetRow = r;
  162.         while (targetRow < gridSize - 1 && board[targetRow + 1][c] === 0) {
  163.           board[targetRow + 1][c] = board[targetRow][c];
  164.           board[targetRow][c] = 0;
  165.           targetRow++;
  166.           moved = true;
  167.         }
  168.         if (
  169.           targetRow < gridSize - 1 &&
  170.           canMergeTiles(targetRow + 1, c, targetRow, c)
  171.         ) {
  172.           board[targetRow + 1][c] *= 2;
  173.           score += board[targetRow + 1][c];
  174.           board[targetRow][c] = 0;
  175.           moved = true;
  176.         }
  177.       }
  178.     }
  179.   }
  180.   return moved;
  181. }
  183. function moveLeft() {
  184.   let moved = false;
  185.   for (let r = 0; r < gridSize; r++) {
  186.     for (let c = 1; c < gridSize; c++) {
  187.       if (board[r][c] !== 0) {
  188.         let targetCol = c;
  189.         while (targetCol > 0 && board[r][targetCol - 1] === 0) {
  190.           board[r][targetCol - 1] = board[r][targetCol];
  191.           board[r][targetCol] = 0;
  192.           targetCol--;
  193.           moved = true;
  194.         }
  195.         if (targetCol > 0 && canMergeTiles(r, targetCol - 1, r, targetCol)) {
  196.           board[r][targetCol - 1] *= 2;
  197.           score += board[r][targetCol - 1];
  198.           board[r][targetCol] = 0;
  199.           moved = true;
  200.         }
  201.       }
  202.     }
  203.   }
  204.   return moved;
  205. }
  207. function moveRight() {
  208.   let moved = false;
  209.   for (let r = 0; r < gridSize; r++) {
  210.     for (let c = gridSize - 2; c >= 0; c--) {
  211.       if (board[r][c] !== 0) {
  212.         let targetCol = c;
  213.         while (targetCol < gridSize - 1 && board[r][targetCol + 1] === 0) {
  214.           board[r][targetCol + 1] = board[r][targetCol];
  215.           board[r][targetCol] = 0;
  216.           targetCol++;
  217.           moved = true;
  218.         }
  219.         if (
  220.           targetCol < gridSize - 1 &&
  221.           canMergeTiles(r, targetCol + 1, r, targetCol)
  222.         ) {
  223.           board[r][targetCol + 1] *= 2;
  224.           score += board[r][targetCol + 1];
  225.           board[r][targetCol] = 0;
  226.           moved = true;
  227.         }
  228.       }
  229.     }
  230.   }
  231.   return moved;
  232. }
  234. function checkGameOver() {
  235.   for (let r = 0; r < gridSize; r++) {
  236.     for (let c = 0; c < gridSize; c++) {
  237.       if (board[r][c] === 0) {
  238.         return false; // 还有空格
  239.       }
  240.       if (c < gridSize - 1 && canMergeTiles(r, c, r, c + 1)) {
  241.         return false; // 可以合并
  242.       }
  243.       if (r < gridSize - 1 && canMergeTiles(r, c, r + 1, c)) {
  244.         return false; // 可以合并
  245.       }
  246.     }
  247.   }
  248.   return true; // 游戏结束
  249. }
  251. function updateScoreDisplay() {
  252.   const scoreDisplay = document.getElementById("scoreDisplay");
  253.   scoreDisplay.innerText = "Score: " + score;
  254. }
  256. function showGameOver() {
  257.   alert("游戏结束！您的得分是：" + score);
  258. }  
复制代码
动画效果


  • 移动与归并动画：我们可以使用 CSS 的 transition 属性来增长方块变革过程中的平滑感。这种效果可以在 drawTile 函数中体现，比方更改方块的背景致时使用过渡效果。
  • 分数动画：我们可以在分数增长时使用淡入或渐变效果，以增长分数的视觉吸引力。这可以通过添加相关的 CSS 来实现，比方淡入特效，可以通过 JavaScript 调整 scoreDisplay 的样式。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

李优秀

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表