用 React18 构建点击计分小游戏

news2024/11/24 13:14:05

本教程将带你创建一个简单的点击计分游戏，使用 React 和基本的 Hooks。游戏规则很简单：在 10 秒内尽可能多地点击按钮以获取高分。

项目结构

确保你的项目结构如下：
在这里插入图片描述

编写 ClickGame 组件

在 src/ClickGame.js 文件中，编写如下代码：

import React, { useState, useEffect } from "react";

function ClickGame() {
  const [score, setScore] = useState(0);
  const [timeLeft, setTimeLeft] = useState(10); // 游戏时长为 10 秒
  const [isGameRunning, setIsGameRunning] = useState(false);

  useEffect(() => {
    let timer;
    if (isGameRunning && timeLeft > 0) {
      timer = setInterval(() => {
        setTimeLeft((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      setIsGameRunning(false);
    }
    return () => clearInterval(timer);
  }, [isGameRunning, timeLeft]);

  const startGame = () => {
    setScore(0);
    setTimeLeft(10);
    setIsGameRunning(true);
  };

  const handleClick = () => {
    if (isGameRunning) {
      setScore((prevScore) => prevScore + 1);
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>点击计分游戏</h1>
      <p>剩余时间: {timeLeft} 秒</p>
      <p>得分: {score}</p>
      {isGameRunning ? (
        <button style={styles.gameButton} onClick={handleClick}>
          点我得分！
        </button>
      ) : (
        <button style={styles.startButton} onClick={startGame}>
          开始游戏
        </button>
      )}
      {!isGameRunning && timeLeft === 0 && <p>游戏结束！最终得分：{score}</p>}
    </div>
  );
}

const styles = {
  container: {
    textAlign: "center",
    fontFamily: "Arial, sans-serif",
    marginTop: "50px",
  },
  title: {
    fontSize: "2rem",
    color: "#333",
  },
  gameButton: {
    padding: "10px 20px",
    fontSize: "1.5rem",
    backgroundColor: "#4CAF50",
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  },
  startButton: {
    padding: "10px 20px",
    fontSize: "1.5rem",
    backgroundColor: "#008CBA",
    color: "white",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
  },
};

export default ClickGame;

编写 App 组件

在 src/App.js 文件中，编写如下代码：

import React from "react";
import ClickGame from "./ClickGame";

function App() {
  return (
    <div>
      <ClickGame />
    </div>
  );
}

export default App;