ChatGPTが作った「クリックゲームアプリ」

AI・プログラミング

次はクリックゲームアプリを作りましょう！
これは「制限時間内にボタンを何回クリックできるか？」というシンプルだけど楽しいゲームです🎯

◆ 完成するアプリのイメージ

  • スタートボタンを押すとカウント開始

  • 10秒間、何回クリックできたかを記録

  • 結果が表示されて再チャレンジも可能！

  • クリックゲームアプリ

◆ メモ帳で作れる「クリックゲームアプリ」のHTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックゲーム</title>
<style>
body {
font-family: "Arial", sans-serif;
text-align: center;
margin-top: 100px;
}
button {
font-size: 1.8em;
padding: 15px 30px;
margin: 10px;
cursor: pointer;
}
#score {
font-size: 2em;
margin: 20px;
}
#timer {
font-size: 1.5em;
color: #555;
}
</style>
</head>
<body>
<h1>10秒チャレンジ！クリックゲーム</h1>
<div id="timer">のこり時間：10 秒</div>
<div id="score">スコア：0</div>
<button id="startBtn" onclick="startGame()">スタート</button>
<button id="clickBtn" onclick="countClick()" disabled>クリック！</button><script>
let score = 0;
let timeLeft = 10;
let timer;

function startGame() {
score = 0;
timeLeft = 10;
document.getElementById(“score”).textContent = “スコア：0”;
document.getElementById(“timer”).textContent = `のこり時間：${timeLeft} 秒`;
document.getElementById(“clickBtn”).disabled = false;
document.getElementById(“startBtn”).disabled = true;

timer = setInterval(() => {
timeLeft–;
document.getElementById(“timer”).textContent = `のこり時間：${timeLeft} 秒`;

if (timeLeft <= 0) {
clearInterval(timer);
document.getElementById(“clickBtn”).disabled = true;
document.getElementById(“startBtn”).disabled = false;
alert(`タイムアップ！あなたのスコアは「${score}」でした！`);
}
}, 1000);
}

function countClick() {
score++;
document.getElementById(“score”).textContent = `スコア：${score}`;
}
</script>
</body>
</html>

◆ 使い方（毎回同じ流れ！）

  1. メモ帳を開く

  2. 上のコードをコピー＆ペースト

  3. 「clickgame.html」という名前で保存

  4. ファイルをダブルクリックして実行！

◆ ChatGPTへのプロンプト例

このように聞けば、似たようなゲームを簡単に作ってくれます：

ChatGPTさん、「10秒間に何回ボタンを押せるか数えるクリックゲーム」をHTMLとJavaScriptだけで作ってください。初心者向けにメモ帳で保存して遊べる形にしてください。

まとめ

もっと凝った機能をつけたいときはこう言いましょう：

「クリック回数ランキングを表示できるようにして」
「ボタンの色を毎回変わるようにして」

コメント

タイトルとURLをコピーしました