端午节粽子制作

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

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的图片，并将其放在了<div>元素中间。
接下来，我为粽子添加一些动画效果。我们可以使用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) => (<imgkey={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) => (<imgkey={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) => (<imgkey={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来制作简单的互动游戏。

本文链接：https://my.lmcjl.com/post/13048.html