チャットGPT-4oは簡単なゲームを一行の指示で作れるしプログラム学習にも使える
今までのGPTとか他の言語モデルでも作れない事はなかったのですが、出力されるコードの質が微妙だったり、修正が必要だったりしたんですよね。
でも、チャットGPT-4oならマジで、簡単な指示文だけでモグラ叩きゲームが作れました。
きっかけとなったのは、先日、こんなXのポストを見かけました。
最新のChatGPT、もう簡単なゲームなら１行の指示で全プログラムを書いてくれる
— ひろはす@ゲーム開発情報発信 (@hirohasusan) May 17, 2024
プロンプト例
「Unityでもぐら叩きを作りたいです、必要なプログラムを考えてC#のファイルリストを作ってください」
簡単なゲームなら「もぐら叩き」の部分を他のジャンルに変えれば同じことができます pic.twitter.com/Bk32VqwaNx
以前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になり大幅に機能が向上しました。
これだけ手伝ってくれるなら、簡単に好きにゲーム作れそうです。ドンドン色々な種類のゲームを作ってみて、また記事にしてみますので、皆様のお役に立てたら幸いです。それではまた。
この記事が気に入ったらサポートをしてみませんか？