じゃんけんゲームを作ろう（勝ち負けを判定）

たける コンピュータとじゃんけんできたらいいなあ。勝ち負けの判定ってむずかしそう…。

りこ じゃんけんの作戦表を先に整理すれば、判定はカンタンになるよ。相手の手は乱数（第10回）で決めよう。

手を「番号」で考える

3つの手に、番号をつけます。

const hands = ['グー✊', 'チョキ✌️', 'パー✋']
//               0          1          2

相手（コンピュータ）の手は、乱数で決めます（第10回でやったやり方）。

const cpuIndex = Math.floor(Math.random() * 3)   // 0 / 1 / 2 のどれか

勝ち負けのルールを整理する

じゃんけんは「自分の手の次の手に勝つ」と考えると、すっきりします。

番号で見ると、「自分の番号 ＋1（3でひとまわり）」が相手の番号のとき、自分の勝ちです。これを式で書くと (自分 + 1) % 3 === 相手 になります（% 3 は「3でわったあまり」で、2の次が0にもどる、という意味）。

• 同じ番号 → あいこ
• (自分 + 1) % 3 === 相手 → かち
• それ以外 → まけ

じゃんけんのコード

import { useState } from 'react'

const hands = ['グー✊', 'チョキ✌️', 'パー✋']

function Janken() {
  const [message, setMessage] = useState('手をえらんでね')
  const [cpu, setCpu] = useState('？')

  const play = (myIndex) => {
    const cpuIndex = Math.floor(Math.random() * 3)
    setCpu(hands[cpuIndex])

    if (myIndex === cpuIndex) {
      setMessage('あいこ！🤝')
    } else if ((myIndex + 1) % 3 === cpuIndex) {
      setMessage('かち！🎉')
    } else {
      setMessage('まけ…😢')
    }
  }

  return (
    <div>
      <p>あいて：{cpu}</p>
      <p>{message}</p>
      {hands.map((h, i) => (
        <button key={h} onClick={() => play(i)}>{h}</button>
      ))}
    </div>
  )
}

hands.map((h, i) => ...) の i は、その手の番号（0・1・2）です。ボタンをおすと、その番号で play を呼びます。

たける 勝てた！番号で考えると判定がこんなにスッキリするんですね。

りこ そう。勝った回数を数える state を足せば、もっとゲームっぽくなるよ。

勝った回数を数える（発展）

勝ち数の wins を足して、かち！ のときに1ふやします。

const [wins, setWins] = useState(0)

// 「かち！」のところに1行たす：
setWins(wins + 1)

画面に <p>かった数：{wins}</p> を出せば、何回勝ったかが分かります。

やってみよう

StackBlitzで作ってみましょう。さらに、こんなアレンジもできます。

• 勝ったときに 🎉 をたくさん出す
• 「あいこ」のとき、もう一回うながすメッセージにする
• グー・チョキ・パーのボタンを大きくする（CSSの font-size）

まとめ

• 手に番号をつける（グー0・チョキ1・パー2）と、判定がスッキリする
• 相手の手は Math.floor(Math.random() * 3) で決める（第10回の乱数）
• 判定：同じならあいこ、(自分+1)%3===相手 ならかち、それ以外はまけ
• 勝ち数の state を足せば、もっとゲームらしくなる

次の第13回は、いよいよ最終回。StackBlitzで作ったものを、自分のパソコンでも動かす方法を学びます。