【端午节特辑】使用React制作互动小游戏，让你玩转端午节！

端午节粽子制作

端午节来咯！我不会包粽子，那就用React框架来包几个粽子，快跟我学起来吧。
首先，我们需要添加一张粽子图片，并将其放在页面上。在React中，我们可以使用标签来添加图片，如下所示：

import React from "react";
import "./App.css";
import zongzi from "./zongzi.png";
function App() {
  return (
    <div className="App">
      <img src={zongzi} alt="zongzi" />
    </div>
  );
}
export default App;

在上面的代码中，我从本地导入了一个名为zongzi.png的图片，并将其放在了

元素中间。
接下来，我为粽子添加一些动画效果。我们可以使用CSS动画来实现这一点。以下是一个简单的示例：

@keyframes drop {
  0% {
    transform: translateY(-400px);
  }
  100% {
    transform: translateY(800px);
  }
}
img {
  animation-name: drop;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

在上面的代码中，我定义了一个名为drop的CSS动画，该动画会将粽子从顶部向下落下。我还将动画的持续时间设置为5秒，并将其重复无限次。
现在，我已经成功地将端午节粽子放在了页面上，并为它添加了一个下落的动画效果。

捡粽子小游戏

接下来，我将为我的端午节游戏添加一个小游戏：捡粽子。在游戏中，用户需要点击屏幕上的粽子，以得分。
首先，我们需要在页面上添加一些粽子，使用CSS使它们随机出现在页面上。

import React, { useState, useEffect } from "react";
import "./App.css";
import zongzi from "./zongzi.png";
const ZONGZI_SIZE = 50;
function App() {
  const [zongzis, setZongzis] = useState([]);
  useEffect(() => {
    const interval = setInterval(() => {
      const x = Math.random() * window.innerWidth;
      const y = Math.random() * window.innerHeight;
      setZongzis((zongzis) => [...zongzis, { x, y }]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="App" onClick={handleClick}>
      {zongzis.map((zongzi, index) => (
        <img
          key={index}
          src={zongziImage}
          alt="zongzi"
          style={{
            position: "absolute",
            left: zongzi.x,
            top: zongzi.y,
            width: ZONGZI_SIZE,
            height: ZONGZI_SIZE,
            cursor: "pointer",
          }}
        />
      ))}
    </div>
  );
}
export default App;

在代码中，我使用useState() hook来管理所有的粽子，使用useEffect() hook每隔一定时间随机生成一个新粽子。我还为每个粽子设置了一个随机的坐标，并将其渲染到屏幕上。
接下来，我们需要添加一个处理点击事件的函数来让用户点击粽子得分。

function handleClick(event) {
  const x = event.clientX;
  const y = event.clientY;
  setZongzis((zongzis) => {
    const clickedZongzi = zongzis.find((zongzi) => {
      const left = zongzi.x;
      const right = zongzi.x + ZONGZI_SIZE;
      const top = zongzi.y;
      const bottom = zongzi.y + ZONGZI_SIZE;
      return x >= left && x <= right && y >= top && y <= bottom;
    });
    if (clickedZongzi) {
      return zongzis.filter((zongzi) => zongzi !== clickedZongzi);
    }
    return zongzis;
  });
}

在上面的代码中，我检查用户的点击位置是否在任何一个粽子的范围内。如果是，我们会将该粽子从粽子列表中删除，并增加得分。否则，我们不会做任何事情。
完整代码请见下面：

import React, { useState, useEffect } from "react";
import "./App.css";
import zongziImage from "./zongzi.png";
const ZONGZI_SIZE = 50;
function App() {
  const [zongzis, setZongzis] = useState([]);
  useEffect(() => {
    const interval = setInterval(() => {
      const x = Math.random() * window.innerWidth;
      const y = Math.random() * window.innerHeight;
      setZongzis((zongzis) => [...zongzis, { x, y }]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  function handleClick(event) {
    const x = event.clientX;
    const y = event.clientY;
    setZongzis((zongzis) => {
      const clickedZongzi = zongzis.find((zongzi) => {
        const left = zongzi.x;
        const right = zongzi.x + ZONGZI_SIZE;
        const top = zongzi.y;
        const bottom = zongzi.y + ZONGZI_SIZE;
        return x >= left && x <= right && y >= top && y <= bottom;
      });
      if (clickedZongzi) {
        return zongzis.filter((zongzi) => zongzi !== clickedZongzi);
      }
      return zongzis;
    });
  }
  return (
    <div className="App" onClick={handleClick}>
      {zongzis.map((zongzi, index) => (
        <img
          key={index}
          src={zongziImage}
          alt="zongzi"
          style={{
            position: "absolute",
            left: zongzi.x,
            top: zongzi.y,
            width: ZONGZI_SIZE,
            height: ZONGZI_SIZE,
            cursor: "pointer",
          }}
        />
      ))}
    </div>
  );
}
export default App;

在上面的代码中，我使用了React中的useState()和useEffect() hook来管理我的粽子列表和生成新粽子的定时器。我还编写了一个handleClick()函数来处理用户的点击事件，并从粽子列表中删除被点击的粽子，以此增加得分。
我们还将CSS样式中的.App类设置为全屏，并将背景颜色设置为黄色，以使游戏更加有趣。这是完整的CSS代码：

.App {
  background-color: yellow;
  height: 100vh;
  width: 100vw;
}

最后，我需要为游戏添加一些额外的功能，例如计分和游戏结束处理。我们可以在页面上添加一个计分板，并在每次得分时更新它。我们可以在handleClick()函数中检查粽子列表是否为空来判断游戏是否结束，并在结束时显示一个提示框。完整代码如下：

import React, { useState, useEffect } from "react";
import "./App.css";
import zongziImage from "./zongzi.png";
const ZONGZI_SIZE = 50;
function App() {
  const [zongzis, setZongzis] = useState([]);
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);
  useEffect(() => {
    if (zongzis.length === 0) {
      setGameOver(true);
    }
  }, [zongzis]);
  useEffect(() => {
    const interval = setInterval(() => {
      const x = Math.random() * window.innerWidth;
      const y = Math.random() * window.innerHeight;
      setZongzis((zongzis) => [...zongzis, { x, y }]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  function handleClick(event) {
    const x = event.clientX;
    const y = event.clientY;
    setZongzis((zongzis) => {
      const clickedZongzi = zongzis.find((zongzi) => {
        const left = zongzi.x;
        const right = zongzi.x + ZONGZI_SIZE;
        const top = zongzi.y;
        const bottom = zongzi.y + ZONGZI_SIZE;
        return x >= left && x <= right && y >= top && y <= bottom;
      });
      if (clickedZongzi) {
        setScore((score) => score + 1);
        return zongzis.filter((zongzi) => zongzi !== clickedZongzi);
      }
      return zongzis;
    });
  }
  return (
    <div className="App" onClick={handleClick}>
      <div className="score-board">Score: {score}</div>
      {gameOver && <div className="game-over">Game Over!</div>}
      {zongzis.map((zongzi, index) => (
        <img
          key={index}
          src={zongziImage}
          alt="zongzi"
          style={{
            position: "absolute",
            left: zongzi.x,
            top: zongzi.y,
            width: ZONGZI_SIZE,
            height: ZONGZI_SIZE,
            cursor: "pointer",
          }}
        />
      ))}
    </div>
  );
}
export default App;

在上面的代码中，我添加了一个名为score的状态来记录用户的得分。我还添加了一个名为gameOver的状态来表示游戏是否结束，并在游戏结束时向用户显示一个提示框。
最后，我们为计分板和游戏结束提示框添加了一些简单的CSS样式：

.score-board {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 24px;
  font-weight: bold;
}
.game-over {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: red;
}

现在，我已经完成了使用React制作端午节粽子和带有粽子掉落的小游戏的代码和思路。希望这篇文章能够帮助你更好地理解React的使用，以及如何使用React来制作简单的互动游戏。