简约版“叠叠乐”小游戏：用创意代码块造就童趣世界

前端

2023-10-22 19:07:10

前言

儿时记忆中的“叠叠乐”游戏，规则简单却又妙趣横生。如今，借助现代技术，我们可以用代码块轻松复刻这款经典游戏。本文将介绍如何使用 JavaScript、HTML5 和创意代码块构建一个简约版的“叠叠乐”游戏，带你重温童年乐趣。

游戏规则

“叠叠乐”游戏的规则非常简单：

将 54 根木棍纵向叠成 18 层，每一层由 3 根木棍组成。
玩家轮流从塔中抽出一根木棍，并将其放在塔顶。
塔倒塌或玩家无法抽取木棍时，游戏结束。

开发步骤

1. 创建 HTML 画布

<canvas id="canvas" width="500" height="500"></canvas>

2. 获取画布上下文

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

3. 定义木棍类

class Stick {
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  draw() {
    ctx.fillStyle = "brown";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

4. 初始化游戏状态

const sticks = [];
const towerHeight = 18;
const towerWidth = 3;
const stickWidth = 10;
const stickHeight = 50;

let gameOver = false;
let currentPlayer = 1;

5. 创建游戏循环

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制木棍塔
  for (const stick of sticks) {
    stick.draw();
  }

  // 检测游戏结束
  if (gameOver) {
    alert(`游戏结束！玩家 ${currentPlayer} 获胜！`);
    return;
  }

  // 轮到玩家抽取木棍
  if (currentPlayer === 1) {
    // TODO: 等待玩家操作
  } else {
    // TODO: AI 自动抽取木棍
  }

  // 切换玩家
  currentPlayer = currentPlayer === 1 ? 2 : 1;

  // 继续游戏循环
  requestAnimationFrame(gameLoop);
}