チャットGPT-4oは簡単なゲームを一行の指示で作れるしプログラム学習にも使える

2024年5月18日 16:52

今までのGPTとか他の言語モデルでも作れない事はなかったのですが、出力されるコードの質が微妙だったり、修正が必要だったりしたんですよね。

でも、チャットGPT-4oならマジで、簡単な指示文だけでモグラ叩きゲームが作れました。

きっかけとなったのは、先日、こんなXのポストを見かけました。

最新のChatGPT、もう簡単なゲームなら１行の指示で全プログラムを書いてくれる

プロンプト例
「Unityでもぐら叩きを作りたいです、必要なプログラムを考えてC#のファイルリストを作ってください」

簡単なゲームなら「もぐら叩き」の部分を他のジャンルに変えれば同じことができます pic.twitter.com/Bk32VqwaNx
— ひろはす@ゲーム開発情報発信 (@hirohasusan) May 17, 2024

以前GPT3.5の時にJavaScriptとPythonで、キャッチザフルールやジャンケンゲームのコードを書いて持った経験があるんですが、その時は修正が多くて結構てこずりました。

なので、半信半疑だったのですが、Claud3と比べてGPT-4oがどのくらいやるんだろうか？と軽い気持ちで試してみると、マジで作れたのでビックリです。

JavaScriptでモグラ叩きゲーム

さっきのXのポストをマネて出した指示文は「ジャバスクリプトでもぐら叩きを作りたいです、必要なプログラムを考えてファイルリストを作ってください」です。出てきた回答は

ChatGPT

もぐら叩きゲームをJavaScriptで作成するために、以下のファイルリストとその役割を提案します。

ファイルリスト

index.html
- ゲームのHTML構造を定義します。
style.css
- ゲームの見た目やレイアウトを整えるためのCSSファイルです。
script.js
- ゲームのロジックを実装するJavaScriptファイルです。
images/
- ゲームで使用する画像（例：もぐら、背景、ハンマーなど）を格納するディレクトリです。

各ファイルの内容

1. index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>もぐら叩きゲーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>もぐら叩きゲーム</h1>
        <div class="score-board">
            スコア: <span id="score">0</span>
        </div>
        <div class="grid">
            <div class="hole" id="hole1"></div>
            <div class="hole" id="hole2"></div>
            <div class="hole" id="hole3"></div>
            <div class="hole" id="hole4"></div>
            <div class="hole" id="hole5"></div>
            <div class="hole" id="hole6"></div>
            <div class="hole" id="hole7"></div>
            <div class="hole" id="hole8"></div>
            <div class="hole" id="hole9"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. style.css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.game-container {
    text-align: center;
}

.score-board {
    margin-bottom: 20px;
    font-size: 24px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
}

.hole {
    width: 100px;
    height: 100px;
    background-color: #8b4513;
    border: 2px solid #654321;
    position: relative;
}

.hole .mole {
    width: 80px;
    height: 80px;
    background-image: url('images/mole.png');
    background-size: cover;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
}

3. script.js

let score = 0;
let activeHole = null;
let timer = null;

document.addEventListener('DOMContentLoaded', () => {
    const holes = document.querySelectorAll('.hole');

    holes.forEach(hole => {
        hole.addEventListener('click', () => {
            if (hole === activeHole) {
                score++;
                document.getElementById('score').textContent = score;
                hideMole();
            }
        });
    });

    startGame();
});

function startGame() {
    score = 0;
    document.getElementById('score').textContent = score;
    timer = setInterval(showMole, 1000);
}

function showMole() {
    if (activeHole) {
        hideMole();
    }
    const holes = document.querySelectorAll('.hole');
    const randomHole = holes[Math.floor(Math.random() * holes.length)];
    randomHole.innerHTML = '<div class="mole"></div>';
    randomHole.querySelector('.mole').style.display = 'block';
    activeHole = randomHole;
}

function hideMole() {
    if (activeHole) {
        activeHole.innerHTML = '';
        activeHole = null;
    }
}

4. images/ ディレクトリ

mole.png (もぐらの画像)
その他必要な画像（背景やハンマーなど）

まとめ

これで基本的なもぐら叩きゲームが作成できます。このセットアップを元に、タイマーの追加やレベル調整、さらにデザインの改善など、自由に拡張していくことができます。

以上が出力分です。
html.css.scriptとファイルが分かれているのに、それぞれのコードをちゃんと書いていますね。これには驚きました。

ただ
background-image: url('images/mole.png');
この部分で使う画像はありません。

GPTの無料プランでは画像生成はできないので、AI画像生成サイトのLeonardo.aiでモグラの画像は別途作ってもらいました。

こんなゲームができました

シンプルですがチャント動きました。

ちょっと寂しかったので、GPTに他にいる画像ファイルの種類を聞き、さらにそれを埋め込んだコードを生成して欲しいと頼みました。

穴と背景、モグラを叩いた時に表示されるハンマーが追加されています。やっつけで作ったのでアレですが、後はドンドンカスタマイズしていけば自由にゲームが作れるのが分かりました。

ゲーム製作しながらプログラム勉強もできる

分からないところは全部聞けばGPTが丁寧に解説してくれます。

ハンマーの動きのコードを作ってもらいました。
style.cssに追加しろとの事です。


.hammer {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -30px;
    left: 30px;
    transform: rotate(-45deg);
    z-index: 1;
}

出てきたコードが分からなかったら「以下のコードの意味を初心者にも分かるように教えて下さい。」と聞いてその下にコードをコピペすれば解説してくれます。

チャットGTP
このCSSコードは、ハンマーの画像に対するスタイルを定義しています。各プロパティが何を意味するのか、初心者向けに説明します。

.hammer

これはCSSクラスの定義です。HTMLでクラスが "hammer" と指定された要素に対して、このスタイルが適用されます。

width: 50px;

ハンマーの画像の横幅（幅）を50ピクセルに設定しています。ピクセルは画面上の小さな点の単位で、50pxは幅が50ピクセルという意味です。

height: 50px;

ハンマーの画像の縦幅（高さ）を50ピクセルに設定しています。これも幅と同様に、50ピクセルの高さを指定しています。

position: absolute;

このプロパティは、要素の位置を親要素の中で絶対位置（absolute positioning）で配置することを指定します。これにより、 top や left プロパティを使って、要素の正確な位置を指定できます。

top: -30px;

このプロパティは、ハンマーの画像の上端を基準にして、親要素の上端から上方向に30ピクセル移動させます。負の値なので、上に移動します。

left: 30px;

このプロパティは、ハンマーの画像の左端を基準にして、親要素の左端から右方向に30ピクセル移動させます。

transform: rotate(-45deg);

このプロパティは、ハンマーの画像を回転させます。ここでは、時計回りに45度回転させています。負の値なので、反時計回りに回転させます。

z-index: 1;

このプロパティは、要素の重なり順序を指定します。z-index が大きい要素ほど前面に表示されます。ここでは、他の要素よりも前に表示されるように設定しています。

まとめ

このスタイルは、50x50ピクセルのハンマー画像を親要素の相対位置から少し上に持ち上げ、左にずらし、反時計回りに45度回転させ、他の要素より前に表示するようにしています。これにより、ハンマーが叩く動作をリアルに表現できます。

ゲーム制作の敷居が劇的に下がった

今までは検討違いや、惜しいコードを平気で書いてきたのですが、GDP-4oになり大幅に機能が向上しました。

これだけ手伝ってくれるなら、簡単に好きにゲーム作れそうです。ドンドン色々な種類のゲームを作ってみて、また記事にしてみますので、皆様のお役に立てたら幸いです。それではまた。

この記事が参加している募集

#AIとやってみた

36,796件

この記事が気に入ったらサポートをしてみませんか？