使用 ReactJS 创建石头剪刀布游戏

ReactJS 是一个流行的 JavaScript 库，可用于构建交互式用户界面。在本篇文章中，我们将使用 ReactJS 来构建石头剪刀布游戏。

游戏规则

石头剪刀布（Rock-paper-scissors）是一种在两人之间进行的手势比拼游戏。游戏的规则很简单：

• 石头赢剪刀，剪刀赢布，布赢石头
• 玩家同时展示自己的手势，手势相同则平局

实现方式

我们将使用 ReactJS 来实现这个游戏。我们首先需要创建一个 Game 组件，用于渲染游戏的界面。

import React, { useState } from "react";

function Game() {
  const gestures = ["rock", "paper", "scissors"];
  const [playerGesture, setPlayerGesture] = useState("");
  const [computerGesture, setComputerGesture] = useState("");
  const [result, setResult] = useState("");

  const handleGestureClick = (gesture) => {
    const computerGesture = gestures[Math.floor(Math.random() * gestures.length)];
    setPlayerGesture(gesture);
    setComputerGesture(computerGesture);

    if (gesture === computerGesture) {
      setResult("Draw!");
    } else if (
      (gesture === "rock" && computerGesture === "scissors") ||
      (gesture === "scissors" && computerGesture === "paper") ||
      (gesture === "paper" && computerGesture === "rock")
    ) {
      setResult("You Win!");
    } else {
      setResult("Computer Wins!");
    }
  };

  return (
    <div>
      <h1>Rock-paper-scissors</h1>
      <div>
        <button onClick={() => handleGestureClick("rock")}>Rock</button>
        <button onClick={() => handleGestureClick("paper")}>Paper</button>
        <button onClick={() => handleGestureClick("scissors")}>Scissors</button>
      </div>
      {playerGesture && (
        <div>
          You selected: {playerGesture}
        </div>
      )}
      {computerGesture && (
        <div>
          Computer selected: {computerGesture}
        </div>
      )}
      {result && (
        <div>
          {result}
        </div>
      )}
    </div>
  );
}

export default Game;

我们定义了三个状态变量：playerGesture、computerGesture 和 result。playerGesture 表示玩家选择的手势，computerGesture 表示计算机选择的手势，result 表示游戏结果。我们在 handleGestureClick 函数中生成计算机的手势，并根据规则计算结果。最后，我们使用这些状态变量来渲染界面。

游戏界面

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

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

export default App;

我们在 App 组件中渲染 Game 组件。现在，如果您运行应用程序，您将看到一个简单的界面，其中包含三个按钮，用于选择手势。选择手势后，程序将显示您的选择、计算机的选择和游戏的结果。

结束语

在本篇文章中，我们使用 ReactJS 构建了石头剪刀布游戏。这个游戏很简单，但我们成功地展示了如何使用 ReactJS 构建交互式用户界面。希望这篇文章能够帮助您更好地理解 ReactJS 和它的工作原理。