React adalah framework JavaScript yang mudah digunakan yang memungkinkan kita membuat aplikasi front end.

Di artikel ini, kita akan melihat cara membuat aplikasi koin flip dengan React dan JavaScript.

Buat Proyek

Kita dapat membuat proyek React dengan Create React App.

Untuk menginstalnya, kami menjalankan:

npx create-react-app coin-flip

Buat Aplikasi Coin Flip

Untuk membuat aplikasi flip koin, kami menulis:

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>
  );
}

Kemudian kami menentukan selectedFacedan coinFlipResultnegara bagian untuk mengatur wajah koin yang dipilih dan hasil koin flip masing-masing.

Selanjutnya, kita memiliki flipfungsi untuk memanggil setCoinFlipResultuntuk mengatur hasil flip koin.

Kami melakukannya dengan memilih nilai dari facesarray secara acak.

Selanjutnya, kami mendefinisikan computerSelectedFacewith the useMemohook.

Callback hanya mengambil wajah yang belum dipilih oleh pemain.

Kami memperhatikan selectedFacenilainya untuk melihat mana yang harus dipilih.

The isWinvariabel memeriksa apakah coinFlipResultsama selectedFaceuntuk menentukan apakah pemain menang.

Kemudian kami harus showResultmengembalikan hasilnya untuk ditunjukkan kepada pemain.

Di bawahnya, kami memiliki tombol untuk membiarkan pemain memilih kepala atau ekor saat kami mengekliknya.

Kemudian kami menunjukkan apa yang dipilih oleh pemain dan komputer.

Dan di bawahnya, kami memiliki tombol flip coin untuk mengambil bagian muka koin.

Dan di bawahnya, kami panggil showResultuntuk menunjukkan hasilnya.

Kesimpulan

Kita bisa membuat game flip koin dengan mudah dengan React dan JavaScript.

Lebih banyak konten di plainenglish.io