Crea el proyecto

Podemos crear el proyecto React con Create React App.

Para instalarlo ejecutamos:

npx create-react-app rock-paper-scissors

con NPM para crear nuestro proyecto React.

Crea el juego de piedra, papel y tijeras

Para crear el juego de piedra, papel y tijeras, escribimos:

import React, { useMemo, useState } from "react";
const choices = ["rock", "paper", "scissors"];export default function App() {
  const [selected, setSelected] = useState("");
  const [computedSelected, setComputedSelected] = useState("");  const play = () => {
    if (!selected) {
      return;
    }
    const computerChoiceIndex = Math.floor(Math.random() * choices.length);
    setComputedSelected(choices[computerChoiceIndex]);
  };  const result = useMemo(() => {
    if (computedSelected === selected) {
      return `it's a tie`;
    } else {
      if (
        (computedSelected === "rock" && selected === "scissors") ||
        (computedSelected === "paper" && selected === "rock") ||
        (computedSelected === "scissors" && selected === "paper")
      ) {
        return "computer won";
      }
      return "player won";
    }
  }, [computedSelected, selected]);  return (
    <div>
      <div>
        <button onClick={() => setSelected("rock")}>rock</button>
        <button onClick={() => setSelected("paper")}>paper</button>
        <button onClick={() => setSelected("scissors")}>scissors</button>
      </div>
      <button onClick={play}>play</button>
      <p>your choice: {selected}</p>
      <p>computer's choice: {computedSelected}</p>
      <div>{result}</div>
    </div>
  );
}

Definimos la matriz de choices con las opciones para seleccionar.

Luego definimos el estado selected para contener la elección del jugador.

Y definimos el estado computedSelected para contener la elección de la computadora.

A continuación, definimos la función play para que la computadora elija la opción.

Llamamos setComputedSelected con una elección aleatoria para establecer la elección de la computadora.

Luego definimos la variable de result con el gancho useMemo para obtener los valores compyterSelected y selected para verificar quién ganó.

Si los valores son los mismos, entonces es un empate.

De lo contrario, la piedra vence a las tijeras, el papel vence a la piedra y las tijeras vence al papel.

Pasamos todos los valores que estamos viendo para calcular result en el segundo argumento.

Después. agregamos los botones para permitir que el jugador establezca el valor selected.

Debajo de eso, mostramos el botón de reproducción para ejecutar play cuando hacemos clic en él.

Luego mostramos la elección del jugador y la computadora.

Y finalmente, mostramos el result.

Conclusión

No hay mucho más qué decir: es posible crear un juego con React y JavaScript.