端午节粽子制作
端午节来咯！我不会包粽子，那就用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) => (
<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来制作简单的互动游戏。