用Vue 3 + Canvas打造经典坦克大战

2023-11-27 05:30:01

今天，让我们回到过去，重温一下经典游戏坦克大战。我们将使用现代框架Vue 3和Canvas来实现它。在本系列第一部分中，我们将创建一个基本游戏画布，包括游戏元素的呈现和基本的玩家控制。

游戏架构

我们的游戏架构将遵循MVVM（模型-视图-视图模型）模式。视图负责呈现用户界面，模型负责游戏逻辑，视图模型充当两者之间的桥梁。

设置画布

首先，我们需要创建一个HTML画布元素：

<canvas id="game-canvas" width="800" height="600"></canvas>

然后，在Vue组件中，我们将使用ref属性来访问画布元素：

<template>
  <canvas ref="canvas" id="game-canvas" width="800" height="600"></canvas>
</template>

<script>
export default {
  setup() {
    const canvas = ref<HTMLCanvasElement>(null);
    return { canvas };
  },
};
</script>

呈现游戏元素

为了呈现游戏元素，如坦克和障碍物，我们需要使用Canvas的绘图API。我们将创建一个名为drawElement的方法来处理此任务：

const drawElement = (ctx: CanvasRenderingContext2D, element: GameElement) => {
  // 根据元素类型选择适当的绘制方法
  switch (element.type) {
    case "tank":
      drawTank(ctx, element);
      break;
    case "obstacle":
      drawObstacle(ctx, element);
      break;
  }
};

基本玩家控制

为了控制坦克，我们将使用键盘事件监听器：

const handleKeyboardInput = (e: KeyboardEvent) => {
  if (e.key === "ArrowUp") {
    playerTank.move("up");
  } else if (e.key === "ArrowDown") {
    playerTank.move("down");
  } else if (e.key === "ArrowLeft") {
    playerTank.move("left");
  } else if (e.key === "ArrowRight") {
    playerTank.move("right");
  }
};

游戏循环

最后，我们需要创建一个游戏循环来不断更新游戏状态并重新渲染画面：

const gameLoop = () => {
  const ctx = canvas.value.getContext("2d");

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

  // 更新游戏元素位置
  updateGameElements();

  // 呈现游戏元素
  drawGameElements(ctx);

  // 请求下一帧动画
  requestAnimationFrame(gameLoop);
};