【感コラム vol.26】Chat GPT4に世界で一番簡単なゲームを作って貰ったよ

感コラム

スポンサーリンク




世界で一番簡単なゲームってなんだろう?

ワードプレスでゲームって作れるのかな?

そんな疑問が湧いてきたので、Chat GPT4にJavaとHTMLで作って貰っちゃいました。

クリックでスコアを増やすゲーム

このゲームは、ボタンをクリックするたびにスコアが1点増える非常にシンプルなものです。

シンプルクリックゲーム

クリックゲーム

スコア: 0

まさかのクリックでスコアがあがるゲームでした。

これを楽しいと感じるのは数字を覚えている子供だけじゃ??10秒で何回叩けるか!みたいに発展させると面白くなるかも?

とにかくこれがゲームなのかと、思考の外側を突いてきたゲームでした。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルクリックゲーム</title>
</head>
<body>
<h1>クリックゲーム</h1>
<p>スコア: <span id="score">0</span></p>
<button onclick="addScore()">クリック!</button>
<button onclick="resetScore()">リセット</button>

<script>
// JavaScriptでスコアを管理する
let score = 0;  // スコアの初期値

function addScore() {
    score++;  // スコアを1増やす
    document.getElementById('score').innerText = score;  // スコア表示を更新
}

function resetScore() {
    score = 0;  // スコアを0にリセット
    document.getElementById('score').innerText = score;  // スコア表示を更新
}
</script>
</body>
</html>

数字当てゲーム

このゲームでは、プレイヤーがランダムに生成された1から100までの数字を当てることを目指します。

プレイヤーが予想する数字を入力し、それが正解より高いか低いかのヒントをもとに、次の予想を行います。

数字当てゲーム

数字当てゲーム

1から100までの数字を当ててください!

なかなか面白い!

ちゃんとゲームじゃん!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数字当てゲーム</title>
</head>
<body>
<h1>数字当てゲーム</h1>
<p>1から100までの数字を当ててください!</p>
<input type="number" id="guess" placeholder="数字を入力">
<button onclick="makeGuess()">予想する</button>
<button onclick="resetGame()">リセット</button>
<p id="feedback"></p>

<script>
let answer = Math.floor(Math.random() * 100) + 1;  // 1から100までのランダムな数字
let attempts = 0;  // 試行回数

function makeGuess() {
    let userGuess = parseInt(document.getElementById('guess').value);  // ユーザーの予想を取得
    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        document.getElementById('feedback').innerText = "1から100の間の数字を入力してください。";
        return;
    }
    attempts++;
    if (userGuess === answer) {
        document.getElementById('feedback').innerText = `正解です!試行回数: ${attempts}回`;
    } else if (userGuess < answer) {
        document.getElementById('feedback').innerText = "もっと大きい数字です。";
    } else {
        document.getElementById('feedback').innerText = "もっと小さい数字です。";
    }
}

function resetGame() {
    answer = Math.floor(Math.random() * 100) + 1;  // 新たなランダム数字
    attempts = 0;  // 試行回数リセット
    document.getElementById('guess').value = '';  // 入力フィールドクリア
    document.getElementById('feedback').innerText = '';  // フィードバックメッセージクリア
}
</script>
</body>
</html>

タイマーカウントダウンゲーム

このゲームでは、ユーザーが設定した秒数のカウントダウンが終わるとアラートで終了を知らせるシンプルなタイマーゲームです。

プレイヤーはタイマーを設定し、スタートボタンを押してカウントダウンを開始します。

タイマーカウントダウンゲーム

タイマーカウントダウンゲーム

これただのタイマーやない?

キッチンで毎日使ってます〜。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマーカウントダウンゲーム</title>
</head>
<body>
<h1>タイマーカウントダウンゲーム</h1>
<label for="timeInput">タイマー設定(秒):</label>
<input type="number" id="timeInput" placeholder="秒数を入力">
<button onclick="startTimer()">スタート</button>
<button onclick="resetTimer()">リセット</button>
<p id="timerDisplay"></p>

<script>
let timerId;  // タイマーIDを保持する変数

function startTimer() {
    let time = parseInt(document.getElementById('timeInput').value);  // 入力された秒数
    if (isNaN(time) || time <= 0) {
        alert("有効な秒数を入力してください。");
        return;
    }
    clearInterval(timerId);  // 既存のタイマーがあればクリア
    document.getElementById('timerDisplay').innerText = `${time}秒`;
    timerId = setInterval(() => {
        if (time <= 0) {
            clearInterval(timerId);
            alert("時間です!");
            document.getElementById('timerDisplay').innerText = "";
        } else {
            time--;
            document.getElementById('timerDisplay').innerText = `${time}秒`;
        }
    }, 1000);
}

function resetTimer() {
    clearInterval(timerId);  // タイマーを停止
    document.getElementById('timerDisplay').innerText = "";  // 表示をクリア
    document.getElementById('timeInput').value = "";  // 入力フィールドをクリア
}
</script>
</body>
</html>

さいごに

最初に作ってくれたゲームはリセットボタンがなくて、修正してもらいました。

面白い。

ワードプレスにゲーム載せられちゃった。できたできた!わーい!

大学時代にLinuxで作らされたこのゲーム、Chat GPT4に作ってもらったよ。タッチ操作使用。

複雑になるとミスをするChat GPT4。私の伝え方にもよるけど、これが限界でした。良かったらやってみてね。

ボールを落とさないゲーム

 

:::::::::::::::::::::::::::::::::

 

クリックして意識を拡大!本当のスピリチュアルを手に入れよう!

↓     ↓     ↓

にほんブログ村 哲学・思想ブログ スピリチュアル・精神世界へ
にほんブログ村

スポンサーリンク




コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です