React는 프런트 엔드 앱을 만들 수있는 사용하기 쉬운 JavaScript 프레임 워크입니다.

이 기사에서는 React와 JavaScript로 동전 던지기 앱을 만드는 방법을 살펴 보겠습니다.

프로젝트 생성

Create React App으로 React 프로젝트를 만들 수 있습니다.

설치하려면 다음을 실행합니다.

npx create-react-app coin-flip

Coin Flip 앱 만들기

동전 던지기 앱을 만들기 위해 다음과 같이 작성합니다.

import React, { useMemo, useState } from "react";
const faces = ["heads", "tails"];
export default function App() {
  const [selectedFace, setSelectedFace] = useState("");
  const [coinFlipResult, setCoinFlipResult] = useState("");
const flip = () => {
    let index;
    if (Math.random() < 0.5) {
      index = 0;
    } else {
      index = 1;
    }
    setCoinFlipResult(faces[index]);
  };
const computerSelectedFace = useMemo(() => {
    const face = faces.find((f) => f !== selectedFace);
    return face;
  }, [selectedFace]);
const isWin = useMemo(() => {
    return coinFlipResult === selectedFace;
  }, [coinFlipResult, selectedFace]);
const showResult = () => {
    if (isWin) {
      return <p>you win</p>;
    }
    return <p>you lost</p>;
  };
return (
    <div>
      <div>
        <h1>select a face</h1>
        <button onClick={() => setSelectedFace("heads")}>heads</button>
        <button onClick={() => setSelectedFace("tails")}>tails</button>
      </div>
      <p>you selected: {selectedFace}</p>
      <p>computer selected: {computerSelectedFace}</p>
      <button onClick={flip}>flip coin</button>
      {showResult()}
    </div>
  );
}

그런 다음 selectedFace및 coinFlipResult상태를 정의하여 선택한 동전면과 동전 뒤집기 결과를 각각 설정합니다.

다음으로 동전 던지기 결과를 설정 flip하기 위해 호출 하는 함수가 setCoinFlipResult있습니다.

faces배열에서 무작위로 값을 선택하여이를 수행합니다 .

다음으로, 우리는 정의 computerSelectedFace와 useMemo훅.

콜백은 플레이어가 선택하지 않은 얼굴 만 선택합니다.

우리는 selectedFace어떤 것을 고를 지 가치를 주시합니다 .

isWin경우 변수 검사 coinFlipResult와 동일 selectedFace플레이어 이기면 결정한다.

그런 다음 showResult플레이어에게 보여줄 결과를 반환 해야합니다 .

그 아래에는 플레이어가 머리 나 꼬리를 클릭 할 때 선택할 수있는 버튼이 있습니다.

그런 다음 플레이어와 컴퓨터가 선택한 것을 보여줍니다.

그 아래에는 동전면을 선택할 수있는 동전 뒤집기 버튼이 있습니다.

그리고 그 아래 showResult에서 결과를 보여주기 위해 호출 합니다.

결론

React와 JavaScript로 쉽게 동전 던지기 게임을 만들 수 있습니다.

plainenglish.io 에서 더 많은 콘텐츠