端午玩接粽子，奉上端午小游戏开发秘笈

前端

2024-01-15 19:50:59

端午节，粽叶飘香，龙舟竞渡，好不热闹。闲暇之余，来一局接粽子小游戏，定能为你枯燥的假期增添几分趣味！

本篇文章将带你一探端午小游戏背后的奥秘，教你如何利用 HTML、CSS 和 JavaScript 来打造一个趣味十足的接粽子小游戏。

游戏目标

接粽子游戏的目标很简单：你需要控制一个篮子，在粽子掉落之前接住它们。随着游戏进行，粽子掉落的速度会越来越快，难度也会越来越高。

游戏开发

1. 创建游戏画布

首先，我们需要创建一个游戏画布，也就是粽子和篮子所处的空间。使用以下 HTML 代码创建一个 div 元素：

<div id="game-canvas"></div>

2. 编写 CSS 样式

接下来，让我们为游戏画布和粽子设置一些基本的 CSS 样式：

#game-canvas {
  width: 600px;
  height: 400px;
  background-color: #ffffff;
}

.粽子 {
  width: 50px;
  height: 50px;
  background-color: #00ff00;
  border-radius: 10px;
  position: absolute;
}

3. 编写 JavaScript 代码

现在，让我们编写 JavaScript 代码来控制粽子的运动和篮子的位置：

// 获取游戏画布
const canvas = document.getElementById("game-canvas");

// 创建粽子
const 粽子 = document.createElement("div");
粽子.classList.add("粽子");
canvas.appendChild(粽子);

// 设置粽子的初始位置
粽子.style.left = "0px";
粽子.style.top = "0px";

// 设置篮子的初始位置
const basket = document.createElement("div");
basket.style.width = "100px";
basket.style.height = "100px";
basket.style.background-color = "#ff0000";
basket.style.position = "absolute";
basket.style.left = "250px";
basket.style.top = "350px";
canvas.appendChild(basket);

// 设置粽子的下落速度
let speed = 5;

// 设置游戏的循环
setInterval(function() {
  // 更新粽子的位置
  粽子.style.top = parseInt(粽子.style.top) + speed + "px";

  // 检查粽子是否掉落到画布底部
  if (parseInt(粽子.style.top) > 400) {
    粽子.style.top = "0px";
  }

  // 检查粽子是否被篮子接住
  if (粽子.getBoundingClientRect().top > basket.getBoundingClientRect().top &&
      粽子.getBoundingClientRect().left > basket.getBoundingClientRect().left &&
      粽子.getBoundingClientRect().right < basket.getBoundingClientRect().right) {
    粽子.style.top = "0px";
    speed++;
  }
}, 10);

// 控制篮子的移动
document.addEventListener("mousemove", function(e) {
  basket.style.left = e.clientX - canvas.offsetLeft - 50 + "px";
});