点爆你的视觉！HTML+CSS+JS切水果游戏火热来袭#

2023-02-20 12:29:06

制作你自己的网页版切水果游戏：分步指南

探索切水果游戏的魅力

切水果游戏自诞生以来，就一直风靡手机和休闲游戏界。其简单的游戏机制——点击或滑动屏幕切水果——令人着迷，让玩家可以轻松地沉迷其中。现在，你也可以通过遵循本教程，在网页上创建自己的切水果游戏。

构建游戏画布

游戏画布是我们游戏的世界，它是一个显示游戏画面和交互元素的 HTML 元素。我们可以使用 <canvas> 标签轻松创建它。

<canvas id="game-canvas" width="640" height="480"></canvas>

获取画布上下文

接下来，我们需要获取画布上下文，这是一个 JavaScript 对象，它让我们能够操作画布并绘制图形。

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

加载游戏资源

为了让游戏栩栩如生，我们需要加载游戏资源，包括水果图像、背景和声音效果。我们可以使用 JavaScript 的 Image() 和 Audio() 对象。

// 加载水果图像
const fruitImages = [];
for (let i = 1; i <= 5; i++) {
  const image = new Image();
  image.src = `images/fruit${i}.png`;
  fruitImages.push(image);
}

// 加载背景图像
const backgroundImage = new Image();
backgroundImage.src = "images/background.png";

// 加载声音效果
const soundEffects = [];
for (let i = 1; i <= 3; i++) {
  const audio = new Audio();
  audio.src = `sounds/sound${i}.wav`;
  soundEffects.push(audio);
}

创建游戏对象

现在，让我们创建游戏对象，包括水果、背景和玩家。我们可以使用 JavaScript 的类来简化这一过程。

// 水果类
class Fruit {
  // 构造函数
  constructor(x, y, speed, type) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.type = type;
    this.width = 50;
    this.height = 50;
  }

  // 绘制水果
  draw() {
    ctx.drawImage(fruitImages[this.type], this.x, this.y, this.width, this.height);
  }

  // 更新水果位置
  update() {
    this.y += this.speed;
    if (this.y > canvas.height) {
      this.y = 0;
    }
  }
}

// 背景类
class Background {
  // 构造函数
  constructor(image) {
    this.image = image;
    this.x = 0;
    this.y = 0;
    this.width = canvas.width;
    this.height = canvas.height;
  }

  // 绘制背景
  draw() {
    ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
  }
}

// 玩家类
class Player {
  // 构造函数
  constructor(x, y, width, height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
  }

  // 绘制玩家
  draw() {
    ctx.fillStyle = "red";
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

  // 更新玩家位置
  update() {
    if (this.x < 0) {
      this.x = 0;
    }
    if (this.x > canvas.width - this.width) {
      this.x = canvas.width - this.width;
    }
  }
}

编写游戏循环

游戏循环是一个不断重复执行的函数，它负责更新游戏状态和绘制画面。我们使用 requestAnimationFrame() 方法实现它。

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

  // 绘制背景
  background.draw();

  // 绘制并更新玩家
  player.draw();
  player.update();

  // 绘制并更新水果
  for (let i = 0; i < fruits.length; i++) {
    fruits[i].draw();
    fruits[i].update();
  }

  // 请求下一次游戏循环
  requestAnimationFrame(gameLoop);
}

添加玩家控制

为了让玩家与游戏交互，我们需要添加控制机制。我们使用鼠标或键盘事件侦听器。

// 鼠标控制
canvas.addEventListener("mousemove", (e) => {
  player.x = e.clientX - canvas.offsetLeft - player.width / 2;
});

// 键盘控制
document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") {
    player.x -= 10;
  } else if (e.key === "ArrowRight") {
    player.x += 10;
  }
});

添加水果碰撞检测

当玩家切到水果时，我们需要进行碰撞检测并更新游戏状态。

for (let i = 0; i < fruits.length; i++) {
  // 检查碰撞
  if (player.x < fruits[i].x + fruits[i].width &&
      player.x + player.width > fruits[i].x &&
      player.y < fruits[i].y + fruits[i].height &&
      player.y + player.height > fruits[i].y) {
    // 删除水果
    fruits.splice(i, 1);

    // 更新得分
    score++;

    // 播放声音效果
    soundEffects[0].play();
  }
}

添加游戏结束条件

如果水果到达屏幕底部，游戏应该结束。

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i].y > canvas.height) {
    gameOver = true;
    soundEffects[2].play();
  }
}

运行游戏

最后，我们需要将所有内容连接起来并启动游戏。

<script>
  // 游戏循环
  const gameLoop = () => {
    // ... 之前的代码
  };

  // 开始游戏
  const startGame = () => {
    gameLoop();
  };

  window.onload = startGame;
</script>