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

🕗 发布于 2025-01-19 06:52 html5 前端 html

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

改善颜色方案：使用更温馨的颜色组合。
添加动画效果：为方块的移动和合并添加渐变效果。
优化分数显示：在分数增加时使用动画效果。

以下是改进后的代码示例：
在这里插入图片描述

1. CSS 样式（style.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #faf8ef;
    font-family: 'Arial', sans-serif;
}

.container {
    position: relative;
    width: 420px; /* 自适应游戏板的总宽度 */
}

canvas {
    border: 2px solid #bbada0;
    background-color: #eee4da;
    transition: background-color 0.3s ease; /* 过渡效果 */
}

.score {
    position: absolute;
    top: -40px; /* 根据需要调整分数的位置 */
    right: 10px;
    font-size: 24px;
    color: #776e65;
    font-weight: bold;
}

2. 更新 HTML（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048 游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <canvas id="gameCanvas"></canvas>
        <div class="score" id="scoreDisplay">Score: 0</div> <!-- 分数显示 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

3. JavaScript 动画和动态效果（script.js）

在 JavaScript 中，我们将实现方块的移动和合并时的动画效果。我们也会在分数更新时添加动画效果。

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const gridSize = 4;
const tileSize = 100;
canvas.width = gridSize * tileSize;
canvas.height = gridSize * tileSize;

let board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
let score = 0;

initBoard();

function initBoard() {
  addRandomTile();
  addRandomTile();
  drawBoard();
}

function drawBoard() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let r = 0; r < gridSize; r++) {
    for (let c = 0; c < gridSize; c++) {
      drawTile(r, c);
    }
  }
  updateScoreDisplay();
}

function drawTile(r, c) {
  const value = board[r][c];
  ctx.fillStyle = value !== 0 ? getTileColor(value) : "#ccc0b3";
  ctx.fillRect(
    c * tileSize + 5,
    r * tileSize + 5,
    tileSize - 10,
    tileSize - 10
  ); // 为方块添加间距

  if (value !== 0) {
    ctx.fillStyle = getTextColor(value);
    ctx.font = "bold 35px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(
      value,
      c * tileSize + tileSize / 2,
      r * tileSize + tileSize / 2
    );
  }
}

function getTileColor(value) {
  switch (value) {
    case 2:
      return "#eee4da";
    case 4:
      return "#ede0c8";
    case 8:
      return "#f2b179";
    case 16:
      return "#f59563";
    case 32:
      return "#f67c5f";
    case 64:
      return "#f67c5f";
    case 128:
      return "#edcf72";
    case 256:
      return "#edcc61";
    case 512:
      return "#edc850";
    case 1024:
      return "#edc53f";
    case 2048:
      return "#edc22e";
    default:
      return "#ccc0b3";
  }
}

function getTextColor(value) {
  return value <= 4 ? "#776e65" : "#ffffff"; // 小于等于4的数字使用深色，大于4的使用白色
}

function addRandomTile() {
  let emptyCells = [];
  for (let r = 0; r < gridSize; r++) {
    for (let c = 0; c < gridSize; c++) {
      if (board[r][c] === 0) {
        emptyCells.push({ r, c });
      }
    }
  }

  if (emptyCells.length) {
    const { r, c } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
    board[r][c] = Math.random() < 0.9 ? 2 : 4;
  }
}

document.addEventListener("keydown", (event) => {
  let moved = false;
  switch (event.key) {
    case "ArrowUp":
      moved = moveUp();
      break;
    case "ArrowDown":
      moved = moveDown();
      break;
    case "ArrowLeft":
      moved = moveLeft();
      break;
    case "ArrowRight":
      moved = moveRight();
      break;
  }

  if (moved) {
    addRandomTile();
    drawBoard();
    if (checkGameOver()) {
      showGameOver();
    }
  }
});

function canMergeTiles(r1, c1, r2, c2) {
  return board[r1][c1] !== 0 && board[r1][c1] === board[r2][c2];
}

function moveUp() {
  let moved = false;
  for (let c = 0; c < gridSize; c++) {
    for (let r = 1; r < gridSize; r++) {
      if (board[r][c] !== 0) {
        let targetRow = r;
        while (targetRow > 0 && board[targetRow - 1][c] === 0) {
          board[targetRow - 1][c] = board[targetRow][c];
          board[targetRow][c] = 0;
          targetRow--;
          moved = true;
        }
        if (targetRow > 0 && canMergeTiles(targetRow - 1, c, targetRow, c)) {
          board[targetRow - 1][c] *= 2;
          score += board[targetRow - 1][c];
          board[targetRow][c] = 0;
          moved = true;
        }
      }
    }
  }
  return moved;
}

function moveDown() {
  let moved = false;
  for (let c = 0; c < gridSize; c++) {
    for (let r = gridSize - 2; r >= 0; r--) {
      if (board[r][c] !== 0) {
        let targetRow = r;
        while (targetRow < gridSize - 1 && board[targetRow + 1][c] === 0) {
          board[targetRow + 1][c] = board[targetRow][c];
          board[targetRow][c] = 0;
          targetRow++;
          moved = true;
        }
        if (
          targetRow < gridSize - 1 &&
          canMergeTiles(targetRow + 1, c, targetRow, c)
        ) {
          board[targetRow + 1][c] *= 2;
          score += board[targetRow + 1][c];
          board[targetRow][c] = 0;
          moved = true;
        }
      }
    }
  }
  return moved;
}

function moveLeft() {
  let moved = false;
  for (let r = 0; r < gridSize; r++) {
    for (let c = 1; c < gridSize; c++) {
      if (board[r][c] !== 0) {
        let targetCol = c;
        while (targetCol > 0 && board[r][targetCol - 1] === 0) {
          board[r][targetCol - 1] = board[r][targetCol];
          board[r][targetCol] = 0;
          targetCol--;
          moved = true;
        }
        if (targetCol > 0 && canMergeTiles(r, targetCol - 1, r, targetCol)) {
          board[r][targetCol - 1] *= 2;
          score += board[r][targetCol - 1];
          board[r][targetCol] = 0;
          moved = true;
        }
      }
    }
  }
  return moved;
}

function moveRight() {
  let moved = false;
  for (let r = 0; r < gridSize; r++) {
    for (let c = gridSize - 2; c >= 0; c--) {
      if (board[r][c] !== 0) {
        let targetCol = c;
        while (targetCol < gridSize - 1 && board[r][targetCol + 1] === 0) {
          board[r][targetCol + 1] = board[r][targetCol];
          board[r][targetCol] = 0;
          targetCol++;
          moved = true;
        }
        if (
          targetCol < gridSize - 1 &&
          canMergeTiles(r, targetCol + 1, r, targetCol)
        ) {
          board[r][targetCol + 1] *= 2;
          score += board[r][targetCol + 1];
          board[r][targetCol] = 0;
          moved = true;
        }
      }
    }
  }
  return moved;
}

function checkGameOver() {
  for (let r = 0; r < gridSize; r++) {
    for (let c = 0; c < gridSize; c++) {
      if (board[r][c] === 0) {
        return false; // 还有空格
      }
      if (c < gridSize - 1 && canMergeTiles(r, c, r, c + 1)) {
        return false; // 可以合并
      }
      if (r < gridSize - 1 && canMergeTiles(r, c, r + 1, c)) {
        return false; // 可以合并
      }
    }
  }
  return true; // 游戏结束
}

function updateScoreDisplay() {
  const scoreDisplay = document.getElementById("scoreDisplay");
  scoreDisplay.innerText = "Score: " + score;
}

function showGameOver() {
  alert("游戏结束！您的得分是：" + score);
}

动画效果

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

原文地址：https://blog.csdn.net/wxdzuishaui/article/details/145232995

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：河北省乡镇界面图层shp格式arcgis数据乡镇名称和编码2020年wgs84坐标无偏移内容测评
下一篇：2024春秋杯密码题第一、二天WP

20250115面试鸭特训营第23天
20250115面试鸭特训营第23天
阅读更多2025-01-19
【机器学习实战中阶】音乐流派分类-自动化分类不同音乐风格
数据下载地址：https://www.kaggle.com/datasets/andradaolteanu/gtzan-dataset-music-genre-classification/data背
阅读更多2025-01-19
open3d+opencv双阈值分割深度图过滤点云（C++）
在3D视觉中，有时候我们需要根据某一深度信息来筛选物体，原理和灰度图的二值化类似，对深度图根据深度值范围筛选，获得对应物体轮廓掩膜，最终可将符合某一深度范围的不规则物体从点云中过滤出来。
阅读更多2025-01-19
【深度学习】1.深度学习解决问题与应用领域
一、图像识别相关问题二、自然语言处理问题三、语音识别与合成问题一、医疗保健领域二、交通领域三、金融领域四、娱乐领域
阅读更多2025-01-19
基础科学——高等数学简洁笔记-第一章第一节(函数----上)
函数涉及到整个高等数学，只有掌握了基础的知识，才能够探讨更深层次的东西。
阅读更多2025-01-19
Linux：磁盘分区
一个文件可以是被打开的文件，也可以是未被打开的文件被打开的文件就是在内存中，未被打开的文件一般就是放在磁盘上的为什么要放在磁盘上呢？磁盘有什么优缺点？
阅读更多2025-01-19
WPF 属性绑定详解
属性绑定是指在 WPF 中，将一个对象（称为绑定源）的属性值与另一个对象（称为绑定目标）的属性进行关联。当绑定源的属性值发生变化时，绑定目标的属性值会自动更新，反之亦然。这种机制使得数据的呈现和数据的
阅读更多2025-01-19
51c自动驾驶~合集47
我自己的原文哦~ https://blog.51cto.com/whaosoft/13083194性能爆拉30%！英伟达：时空一致下的生成重建大一统新方案~从自车的驾驶轨迹中生成真实的视觉图像是
阅读更多2025-01-19
【数据分享】1929-2024年全球站点的逐日最高气温数据（Shp\Excel\免费获取）
【数据分享】1929-2024年全球站点的逐日最高气温数据（Shp\Excel\免费获取）
阅读更多2025-01-19
【Excel超实用，VLOOKUP函数，通过excel数据精准匹配，将一个excel文件的某列数据，用另一个excel文件快速填充】
A$2:$B112 ：指定范围，这里的范围，指的是模板 2.xlsx Sheet页的范围，囊括了匹配值和对应的填充内容，从A2开始，直到B112结束。如下图1所示，1.xlsx文件，有两列数据，
阅读更多2025-01-19

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

1. CSS 样式（style.css）

2. 更新 HTML（index.html）

3. JavaScript 动画和动态效果（script.js）

动画效果

相关文章