返回

嘎子偷月饼：小游戏创作指南

前端

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

通过编写富有创意且易于理解的小游戏来提升你的网站参与度。在本文中，我们将深入探讨如何使用JQuery创建广受欢迎的“嘎子偷月饼”小游戏。

1. 游戏设置

为了开始创建我们的游戏，我们需要设置一个基本的画布和角色。

<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
</script>

2. 创建角色

接下来，我们需要创建嘎子和牧羊犬角色。

var gazi = {
  x: 100,
  y: 100,
  width: 50,
  height: 50,
  color: 'red'
};

var dog = {
  x: 500,
  y: 100,
  width: 50,
  height: 50,
  color: 'blue'
};

3. 游戏循环

为了让游戏持续运行，我们需要创建一个游戏循环。

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

  // 绘制嘎子
  ctx.fillStyle = gazi.color;
  ctx.fillRect(gazi.x, gazi.y, gazi.width, gazi.height);

  // 绘制牧羊犬
  ctx.fillStyle = dog.color;
  ctx.fillRect(dog.x, dog.y, dog.width, dog.height);

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

4. 键盘输入

接下来，我们需要实现键盘输入来控制嘎子。

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 37) {
    gazi.x -= 5;
  } else if (event.keyCode === 39) {
    gazi.x += 5;
  }
});

5. 牧羊犬 AI

为了让游戏更具挑战性，我们需要添加牧羊犬 AI。

function dogAI() {
  // 让牧羊犬向嘎子移动
  if (dog.x < gazi.x) {
    dog.x += 5;
  } else if (dog.x > gazi.x) {
    dog.x -= 5;
  }

  // 让牧羊犬随机移动
  if (Math.random() < 0.05) {
    dog.y += Math.random() * 10 - 5;
  }
}

6. 月饼生成

接下来，我们需要生成飞行的月饼。

function createMooncake() {
  var mooncake = {
    x: Math.random() * canvas.width,
    y: 0,
    width: 20,
    height: 20,
    color: 'yellow'
  };

  mooncakes.push(mooncake);
}

7. 碰撞检测

最后，我们需要检测碰撞来判断嘎子是否捕获到月饼。

function checkCollision() {
  for (var i = 0; i < mooncakes.length; i++) {
    if (gazi.x < mooncakes[i].x + mooncakes[i].width &&
        gazi.x + gazi.width > mooncakes[i].x &&
        gazi.y < mooncakes[i].y + mooncakes[i].height &&
        gazi.y + gazi.height > mooncakes[i].y) {
      mooncakes.splice(i, 1);
      score++;
    }
  }
}

8. 完成的游戏

综合以上步骤，我们将得到一个完整的小游戏。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var gazi = {
      x: 100,
      y: 100,
      width: 50,
      height: 50,
      color: 'red'
    };

    var dog = {
      x: 500,
      y: 100,
      width: 50,
      height: 50,
      color: 'blue'
    };

    var mooncakes = [];
    var score = 0;

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

      // 绘制嘎子
      ctx.fillStyle = gazi.color;
      ctx.fillRect(gazi.x, gazi.y, gazi.width, gazi.height);

      // 绘制牧羊犬
      ctx.fillStyle = dog.color;
      ctx.fillRect(dog.x, dog.y, dog.width, dog.height);

      // 牧羊犬 AI
      dogAI();

      // 月饼生成
      if (Math.random() < 0.05) {
        createMooncake();
      }

      // 碰撞检测
      checkCollision();

      // 绘制月饼
      for (var i = 0; i < mooncakes.length; i++) {
        ctx.fillStyle = mooncakes[i].color;
        ctx.fillRect(mooncakes[i].x, mooncakes[i].y, mooncakes[i].width, mooncakes[i].height);
        mooncakes[i].y += 5;
      }

      // 显示分数
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('分数：' + score, 10, 30);

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

    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 37) {
        gazi.x -= 5;
      } else if (event.keyCode === 39) {
        gazi.x += 5;
      }
    });

    gameLoop();
  </script>
</body>
</html>

通过遵循这些步骤，你将能够创建一个简单有趣的“嘎子偷月饼”小游戏，提升你网站的互动性。