接🥕吃瓜：基于JS的兔年创意小游戏

2023-09-07 12:21:24

兔年创意小游戏：用 JavaScript 编写一场胡萝卜争夺战

随着农历新年的到来，是时候用一些有趣的创意游戏来庆祝了。兔年创意小游戏就是为你量身打造的，让你尽享兔年的喜庆。这款小游戏旨在通过让玩家控制一只可爱的兔子来收集胡萝卜道具，从而获得分数。话不多说，让我们踏上兔年创意小游戏之旅，一起领略它的趣味与挑战！

游戏场景设计

首先，创建一个游戏容器来容纳所有游戏元素。将这个容器命名为“game-container”，并设置其样式，包括宽度、高度和边框。

接下来，添加一个“score-container”来显示玩家的分数。将其定位在容器的左上角，并设置字体大小。

现在，是时候让兔子出场了！创建一个“rabbit”元素，设置其初始位置、大小和背景颜色。

最后，让我们加入一些胡萝卜道具。创建一个“carrot”类，并为每个胡萝卜设置位置、大小和颜色。

游戏逻辑

现在，让我们为游戏注入一些生命力。首先，让兔子在键盘控制下移动，包括左右、上下移动。

下一步是让胡萝卜掉落。使用 setInterval 函数，以一定的间隔向下移动胡萝卜。当胡萝卜超出容器底部时，将其重置到顶部。

最后，也是最重要的一步，让我们检测碰撞并增加分数。使用 setInterval 函数，检查兔子和胡萝卜是否发生碰撞。如果发生碰撞，则将胡萝卜重置到顶部，并增加玩家的分数。

示例代码

<div id="game-container"></div>
<div id="score-container"></div>
<div id="rabbit"></div>
<div class="carrot"></div>

// 兔子移动
const rabbit = document.getElementById('rabbit');
document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowLeft':
      rabbit.style.left = parseInt(rabbit.style.left) - 5 + 'px';
      break;
    case 'ArrowRight':
      rabbit.style.left = parseInt(rabbit.style.left) + 5 + 'px';
      break;
    case 'ArrowUp':
      rabbit.style.bottom = parseInt(rabbit.style.bottom) + 5 + 'px';
      break;
    case 'ArrowDown':
      rabbit.style.bottom = parseInt(rabbit.style.bottom) - 5 + 'px';
      break;
  }
});

// 胡萝卜掉落
const carrots = document.querySelectorAll('.carrot');
carrots.forEach((carrot) => {
  setInterval(() => {
    carrot.style.top = parseInt(carrot.style.top) + 5 + 'px';
    if (parseInt(carrot.style.top) > 400) {
      carrot.style.top = '0px';
    }
  }, 100);
});

// 碰撞检测和加分
setInterval(() => {
  carrots.forEach((carrot) => {
    const rabbitRect = rabbit.getBoundingClientRect();
    const carrotRect = carrot.getBoundingClientRect();
    if (rabbitRect.intersects(carrotRect)) {
      carrot.style.top = '0px';
      const score = document.getElementById('score-container');
      score.innerText = parseInt(score.innerText) + 1;
    }
  });
}, 100);