右左どっち？

右か左を選んでください。

このゲームでは、右と左のボタンをクリックして進んでいきます。途中でまずい食べ物の位置（3番目）に到達すると、残念なメッセージが表示されます。絵文字を使用することも可能ですが、具体的な絵文字については質問文に記載がないため、上記の実装ではテキストのみを表示しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

了解です。では、右と左の選択肢で進んでいくゲームを作成します。以下が実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>右左どっち？</title>
</head>
<body>
  <h1>右左どっち？</h1>
  <p id="message">右か左を選んでください。</p>
  <button id="rightBtn">右</button>
  <button id="leftBtn">左</button>

// 右ボタンクリック時の処理
    document.getElementById('rightBtn').addEventListener('click', function() {
      position += 1;
      checkOutcome();
    });

// 左ボタンクリック時の処理
    document.getElementById('leftBtn').addEventListener('click', function() {
      position -= 1;
      checkOutcome();
    });

// ゲームの結果をチェックする関数
    function checkOutcome() {
      // まずい食べ物の位置
      const badFoodPosition = 3;

if (position === badFoodPosition) {
        // まずい食べ物に到達した場合
        document.getElementById('message').textContent = '残念！まずい食べ物に当たりました！';
        disableButtons();
      } else {
        // まずい食べ物以外の場合
        document.getElementById('message').textContent = '続けて進む方向を選んでください。';
      }
    }

// ボタンを無効化する関数
    function disableButtons() {
      document.getElementById('rightBtn').disabled = true;
      document.getElementById('leftBtn').disabled = true;
    }
  </script>
</body>
</html>
```