ハイアンドローゲームを ChatGPT で作成する

今回はハイアンドローゲームを
ChatGPT で作成する試みをしたいと思います。

https://uni928.github.io/SephirothHighAndLow/

***

ChatGPT とのやり取り

という事で ChatGPT に以下の質問をしました。

```html: 私の質問
こんにちは、お願いがあります。

下記の仕様のハイアンドローゲームを html 形式で作成して頂けますか？

---

・起動するとアプリ側が 0 から 1000 の間のランダムな値を設定します。
・ユーザーは 0 から 1000 の値を入力してボタンを押します。
・回答した数字が正しければ正解と表示して、同時にかかった回数を表示します。
・アプリ側は 1 回嘘が付けます。
・嘘を付ける回数は 3 回回答する度に 1 増えます。
・アプリ側は High か Low で返事をしますが、嘘を付けるならば嘘を付く事ができます。
・アプリ側はなるべく回数がかかるように嘘を付きます。
```

すると下記の回答が返ってきました。

```html: ChatGPT の回答
こんにちは！ハイアンドローゲームのHTML形式のコードを作成しますね。

このゲームの仕様に基づいて、ゲームを作成するために以下のようなHTML、CSS、JavaScriptコードを作成しました。JavaScript部分で、ランダムな値を生成し、嘘をつくロジックを実装しています。

html
コードをコピーする
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ハイアンドローゲーム</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    #game-container {
      margin-top: 20px;
    }
    input, button {
      font-size: 16px;
      padding: 10px;
      margin: 10px;
    }
    #message {
      font-size: 18px;
      font-weight: bold;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>ハイアンドローゲーム</h1>
  <p>0から1000の間の数字を当ててください。</p>

  <div id="game-container">
    <input type="number" id="userGuess" min="0" max="1000" placeholder="0から1000の数字" />
    <button onclick="makeGuess()">予想する</button>
    <p id="message"></p>
    <p>試行回数: <span id="attempts">0</span></p>
  </div>

  <script>
    let targetNumber = Math.floor(Math.random() * 1001); // 0 から 1000 のランダムな数字
    let attempts = 0;
    let liesAllowed = 0;
    let liesUsed = 0;

    function makeGuess() {
      const userGuess = parseInt(document.getElementById('userGuess').value);
      const messageElement = document.getElementById('message');
      const attemptsElement = document.getElementById('attempts');

      if (isNaN(userGuess) || userGuess < 0 || userGuess > 1000) {
        messageElement.innerText = "0から1000の数字を入力してください。";
        return;
      }

      attempts++;
      attemptsElement.innerText = attempts;
      const isCorrect = userGuess === targetNumber;

      if (isCorrect) {
        messageElement.innerText = `正解！ ${attempts}回で当たり！`;
        resetGame();
      } else {
        if (liesUsed < liesAllowed) {
          // 嘘をつくチャンスがあれば
          if (Math.random() < 0.5) {
            // 嘘をつく
            const lieDirection = userGuess < targetNumber ? 'Low' : 'High';
            messageElement.innerText = lieDirection + "（嘘）";
            liesUsed++;
            return;
          }
        }

        if (userGuess < targetNumber) {
          messageElement.innerText = "High";
        } else {
          messageElement.innerText = "Low";
        }

        // 3回に1回嘘をつける
        if (attempts % 3 === 0) {
          liesAllowed++;
        }
      }
    }

    function resetGame() {
      targetNumber = Math.floor(Math.random() * 1001); // 新しいターゲットを設定
      attempts = 0;
      liesUsed = 0;
      liesAllowed = 0;
      document.getElementById('attempts').innerText = attempts;
      document.getElementById('userGuess').value = '';
      document.getElementById('message').innerText = '次のゲームを開始します。';
    }
  </script>
</body>
</html>
このゲームの特徴：
ターゲットのランダム値： ゲームが開始されると、アプリは 0 から 1000 の間でランダムなターゲットの数字を設定します。

ユーザーの入力： ユーザーは 0 から 1000 の間で自分の予想する数字を入力し、ボタンを押して予想を送信します。

嘘のルール： ゲーム内ではアプリ側が最初は正直に「High」または「Low」と返答しますが、3回に1回のペースで嘘をつける機会が与えられます。嘘をついた場合、その時の返答は「High」または「Low」となり、ユーザーに誤ったヒントを与えます。

正解時の表示： ユーザーが正しい数字を入力すると、「正解！」と表示され、試行回数が表示されます。次のゲームが開始されます。

説明：
makeGuess 関数で、ユーザーの入力をチェックし、ゲームの進行を管理します。
resetGame 関数で、新しいターゲット値を設定してゲームをリセットします。
嘘をつくロジックは、liesUsed と liesAllowed を使って制御され、3回ごとに嘘をつく回数が1増えます。
このコードをコピーしてHTMLファイルとして保存し、ブラウザで開けばゲームを楽しむことができます。
```

なんとこの質問だけで
ほとんど正常に動作するコードを
頂くことができました。

このコードを手動で微修正する事で
短時間でハイアンドローゲームを
実装する事が出来ました。

修正版は以下のサイトで
遊ぶことが出来ます。

https://uni928.github.io/SephirothHighAndLow/

よろしければ遊んでみて頂けると幸いです。

***

以上ハイアンドローゲームを
ChatGPT で制作する試みをしました。

AI を使わずに最初から実装するよりも
明らかに短時間で実装出来た自信があります。

ChatGPT は便利だなと思いました。

この記事が皆さんの ChatGPT を使うきっかけになれますように。
閲覧ありがとうございました。