今回はハイアンドローゲームを
ChatGPT で作成する試みをしたいと思います。
ChatGPT とのやり取り
という事で ChatGPT に以下の質問をしました。
私の質問
こんにちは、お願いがあります。
下記の仕様のハイアンドローゲームを html 形式で作成して頂けますか？
---
・起動するとアプリ側が 0 から 1000 の間のランダムな値を設定します。
・ユーザーは 0 から 1000 の値を入力してボタンを押します。
・回答した数字が正しければ正解と表示して、同時にかかった回数を表示します。
・アプリ側は 1 回嘘が付けます。
・嘘を付ける回数は 3 回回答する度に 1 増えます。
・アプリ側は High か Low で返事をしますが、嘘を付けるならば嘘を付く事ができます。
・アプリ側はなるべく回数がかかるように嘘を付きます。
すると下記の回答が返ってきました。
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ファイルとして保存し、ブラウザで開けばゲームを楽しむことができます。
なんとこの質問だけで
ほとんど正常に動作するコードを
頂くことができました。
このコードを手動で微修正する事で
短時間でハイアンドローゲームを
実装する事が出来ました。
修正版は以下のサイトで
遊ぶことが出来ます。
よろしければ遊んでみて頂けると幸いです。
以上ハイアンドローゲームを
ChatGPT で制作する試みをしました。
AI を使わずに最初から実装するよりも
明らかに短時間で実装出来た自信があります。
ChatGPT は便利だなと思いました。
この記事が皆さんの ChatGPT を使うきっかけになれますように。
閲覧ありがとうございました。