じゃんけんゲームを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作ろう

グー・チョキ・パーのボタンと、結果・スコア表示エリアを配置しましょう。

💡 ヒント
index.html, style.css, script.js を作成します。じゃんけんの手ボタンと結果表示エリアを配置します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>じゃんけんゲーム</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <h1>✊ じゃんけんゲーム</h1>
    <div class="hands">
      <button class="hand-btn" data-hand="0">✊</button>
      <button class="hand-btn" data-hand="1">✋</button>
      <button class="hand-btn" data-hand="2">✌️</button>
    </div>
    <div id="result" class="result" style="display:none;"></div>
    <p id="score" class="score"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>
2

CPUの手をランダムに決めよう

CPUの手をランダムに決める関数を作りましょう。

💡 ヒント
Math.floor(Math.random() * 3) で 0〜2 のランダムな数を作ります。0=グー、1=パー、2=チョキとします。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

const hands = ["✊", "✋", "✌️"];

function getCpuHand() {
  return Math.floor(Math.random() * 3);
}
3

勝敗判定の関数を作ろう

プレイヤーとCPUの手を受け取り、勝ち・負け・引き分けを返す関数を作りましょう。

💡 ヒント
グー(0)はチョキ(2)に勝ち、パー(1)はグー(0)に勝ち、チョキ(2)はパー(1)に勝ちます。同じなら引き分けです。

参考: JS レッスン3: 条件分岐

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

function judge(player, cpu) {
  if (player === cpu) return "draw";
  if ((player === 0 && cpu === 2) || (player === 1 && cpu === 0) || (player === 2 && cpu === 1)) {
    return "win";
  }
  return "lose";
}
4

ボタンクリックで対戦しよう

各ボタンのクリックイベントで対戦処理を実行しましょう。

💡 ヒント
querySelectorAll で全ボタンを取得し、クリック時に data-hand の値を使って対戦処理を実行します。

参考: JS レッスン6: DOM操作

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

let wins = 0, losses = 0, draws = 0;
const resultEl = document.getElementById("result");
const scoreEl = document.getElementById("score");
const buttons = document.querySelectorAll(".hand-btn");

buttons.forEach(function(btn) {
  btn.addEventListener("click", function() {
    const player = Number(btn.dataset.hand);
    const cpu = getCpuHand();
    const result = judge(player, cpu);
    showResult(player, cpu, result);
  });
});
5

結果とスコアを表示しよう

対戦結果とスコアを画面に表示する関数を作りましょう。

💡 ヒント
結果に応じてメッセージと色を変えます。勝敗数を変数で管理して表示を更新します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

function showResult(player, cpu, result) {
  resultEl.style.display = "block";
  const msgs = { win: "🎉 あなたの勝ち！", lose: "😢 あなたの負け…", draw: "🤝 引き分け！" };
  const cls = { win: "win", lose: "lose", draw: "draw" };
  if (result === "win") wins++;
  else if (result === "lose") losses++;
  else draws++;
  resultEl.innerHTML = '<p class="hands-display">' + hands[player] + ' vs ' + hands[cpu] + '</p><p class="judge ' + cls[result] + '">' + msgs[result] + '</p>';
  scoreEl.textContent = wins + "勝 " + losses + "敗 " + draws + "引き分け";
}
6

CSSでデザインを整えて完成！

CSSでゲーム画面をデザインして完成です！友達と対戦回数を競ってみよう。

💡 ヒント
手のボタンを大きく表示し、ホバーで拡大するアニメーションをつけます。勝ち=緑、負け=赤、引き分け=グレーで色分けします。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body { font-family: sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.app { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 32px; width: 360px; text-align: center; }
h1 { font-size: 1.3rem; color: #333; margin-bottom: 20px; }
.hands { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.hand-btn { font-size: 2.5rem; padding: 12px; border: 2px solid #ddd; border-radius: 12px; background: #fff; cursor: pointer; transition: transform 0.1s; }
.hand-btn:hover { transform: scale(1.1); border-color: #3a86ff; }
.result { padding: 16px; border-radius: 12px; background: #f0f9ff; margin-bottom: 16px; }
.hands-display { font-size: 2rem; margin-bottom: 8px; }
.judge { font-size: 1.2rem; font-weight: bold; }
.win { color: #16a34a; }
.lose { color: #ff6b6b; }
.draw { color: #888; }
.score { font-size: 14px; color: #555; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら