■はじめに
前回、前々回で、「 プログラミング初心者がChatGPTを利用すれば、簡単にゲームを作成できるか 」と、「 プログラミング初心者がChatGPTを利用すれば、簡単にブロック崩し風ゲーム 」を作成できるかチャレンジしましたが、
今回は、「 ChatGPTを利用すれば、簡単にテトリス風ゲーム 」を作成できるかチャレンジしたいと思います。
応用編のため、プログラミング未経験の方や初心者の方には少し難しい内容になりますが、今回もプログラミング自体は行っておらず、「 ChatGPTが組んだプログラム（HTML、css、JavaScriptを使用したプログラム） 」をどのようにしたら動かせるのかに注力しておりますのでお付き合いください。
※「 簡単なゲーム作成 」や「 ブロック崩し風ゲーム 」の作成につきましては、ページ下部の「 Backボタン 」や「 もくじ 」を利用して閲覧していただけたらと思います。
この記事を見て皆さんが、「 明日の話しのネタにしてみよう 」、今度の休みは「 こんなことやってみよう 」のヒントになれば幸いです。
【 結果 】
プログラミング未経験の方や初心者の方が、「 ChatGPT 」を利用しても、簡単に「 テトリス風ゲーム 」は作れないという結果になりました。
時間をかけて何度も質問を繰り返せば「 テトリス風ゲーム 」を作れないこともないと思いますが、「 簡単（1～2時間） 」という定義から外れるため、今回は簡単に「 テトリス風ゲーム 」は作れないという結論にしたいと思います。
ただ、時間などの制約を外して、週末に遊びながら作っていたら、いつの間にか完成している程度のポテンシャルは秘めていると思います。
■開発環境
今回も前回と同様に、開発環境は「 インターネット閲覧ソフト（ブラウザ） 」と「 メモ帳 」を使いたいと思います。
この二つであればすでにパソコンにインストールしてあると思いますので、特別な準備をしないで済むと思います。
また、新しくソフトをインストールする行為は「 簡単 」とは言い難いためです。
【開発環境】
・ChatGPT 3.5
・Windowsのインストールしてあるパソコン
（OSはWindows10 or 11が好ましい）
・インターネットを見られる環境。
（Edge、chrome）
・メモ帳
■テトリス風ゲームを作る
ChatGPTへの質問の仕方
ChatGPTに質問をするために、以下のキーワードを含めて質問をしたいと思います。
まずは、前回の「 ブロック崩し 」を「 テトリス 」に変更しただけの質問をしたいと思います。
【キーワード】
●ブラウザ
インターネット閲覧ソフトを使ってゲームを行うため、「 ブラウザ 」という言葉を使用します。
●HTML
ブラウザでプログラミングを行うということは「 HTML 」という言語をつかうため、「 HTML 」という言葉を使用します。
●ソースコード
プログラミングの内容のことを「 ソースコード 」というので、「 ソースコード 」という言葉を使用します。
●テトリス
「 テトリス風 」のゲームを作りたいため、「 テトリス 」という言葉を使用します。
上記の「 キーワード 」を含めて、下記のような質問をしたいと思います。
「 htmlを使用し、パソコンのブラウザ上で動くテトリスのプログラミングのソースコードを教えて。 」
ChatGPTへ質問する
先ほど決めた質問内容をChatGPTへ質問したいと思います。
「 htmlを使用し、パソコンのブラウザ上で動くテトリスのプログラミングのソースコードを教えて。 」
ChatGPTの回答
上記の質問を行った結果、下記のような回答を得ることができました。
※ 文章の末尾に[ChatGPT]と記載している箇所は、ChatGPTの回答文になります。
HTMLだけで動くテトリスを作成するのは少し複雑ですが、JavaScriptとHTMLを組み合わせて簡単なテトリスを作ることは可能です。以下に、基本的なテトリスのソースコードを示します。[ChatGPT]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
～ 以下略 ～
※ 上手く動かなかったためプログラムは省略しております。このコードは、HTMLのcanvas要素を使用してテトリスのゲーム領域を作成し、JavaScriptでゲームのロジックを処理しています。基本的な機能は備えていますが、ゲームのロジックや新しいテトリスのブロックの追加、ブロックの移動などを追加するには、さらに多くのコードが必要になります。[ChatGPT]
■ゲームを動かす①（失敗）
ゲームを動かす手順
【 ゲームを動かす手順 】
① メモ帳を新規に作成する。（名前はお好みでOK）
② メモ帳を開く。
③ メモ帳に「 プログラム 」を張り付ける。
※ DOCTYPE html ～ /html の部分になります。
④ メモ帳（～～.txt）を「 保存 」する。
⑤ 拡張子を変更する。（～～.txt → ～～.html）
⑥ 「 拡張子を変更しますか？ 」で、「 はい 」を選択する。
⑦ 「 HTML形式ファイル 」を「 ダブルクリック 」で起動する。
⑧ ゲームで遊ぶ。
ゲーム画面
ゲームを起動すると下図のような「 ブロック崩し風ゲーム 」がブラウザで起動しました。
・・・
ただの「 黒い四角い箱 」ですね。
■上手くいかないので何度も質問を繰り返す
ChatGPTへ質問を繰り返す
気を取り直して、何度か質問を行うことで、まともなものができるのではないかと思い、下記の質問を何度も繰り返してみましたが、完成とは程遠いものしかできませんでした。
「 htmlを使用し、パソコンのブラウザ上で動くテトリスのプログラミングのソースコードを教えて。 」
下図は失敗したゲーム画面になります。
何度も質問していると、「 ChatGPT 」が言うには、「 html言語 」の他に、「 css 」と「 JavaScript 」という言語が必要なことが分かってきました。
なので、質問内容を少し修正し「 css 」と「 JavaScript 」を追加してみました。
「 html、css、JavaScriptを使用し、パソコンのブラウザ上で動くテトリスのプログラミングのソースコードを教えて。 」
ChatGPTの回答
上記の修正の後質問を行った結果、下記のような回答を得ることができました。
※ 文章の末尾に[ChatGPT]と記載している箇所は、ChatGPTの回答文になります。
Tetrisのゲームはかなり複雑なので、全てのコードをここに書くのは難しいですが、基本的なHTML、CSS、JavaScriptを使用したTetrisのプログラムの概要を以下に示します。[ChatGPT]
まず、HTMLでゲームのボードを作成します。[ChatGPT]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
～ 以下略 ～
次に、CSSでゲームのボードやブロックのスタイルを定義します。[ChatGPT]
#game-board {
width: 300px;
height: 600px;
border: 2px solid #000;
margin: 0 auto;
}
～ 以下略 ～
最後に、JavaScriptでゲームのロジックを実装します。[ChatGPT]
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('game-board');
let currentPosition = 4;
const width = 10;
～ 以下略 ～
※ ここでもまともに動作しなかったため、プログラムは省略しております。これはTetrisの基本的なプログラムです。ゲームの機能を追加したり、見た目を改善したりするためには、さらに多くのコードが必要になりますが、これは始めるための良い出発点です。[ChatGPT]
■css と JavaScript について
今回の修正を行った質問では、「 css 」と「 JavaScript 」という言語を使用しています。
「 テトリス風ゲーム 」を動かすためには、「 HTML 」言語と同様に、
「 css 」と「 JavaScript 」をテキストファイルに貼り付けて「 ファイル名の末尾を変更 」してあげればよいのですが、少しコツがあるため「 css と JavaScript 」について説明しておきたいと思います。
cssについて
「 CSS（Cascading Style Sheets） 」は、ウェブページやウェブアプリケーションの「 スタイルやレイアウト 」を記述するためのスタイルシート言語で、「 HTML言語 」などと組み合わせて使用され、ウェブページの外観やレイアウトを制御します。
HTML言語と一緒に記述されることもあれば、ファイルを別にして「 ファイル名.css 」とう拡張子を使用し、記述されることもあります。
「 HTML言語 」と「 css言語 」を別ファイルにする理由は、一つのファイルにプログラムを記述すると長くなってしまったり、あとから修正するときに分かりやすいようにするためです。
JavaScriptについて
「 JavaScript（JS） 」は、ウェブページやウェブアプリケーションを「 動的に操作する 」ためのプログラミング言語です。「 HTML言語 」や「 CSS言語 」と組み合わせて使用され、ウェブページに動的な機能や要素を実装することができます。
「 css言語 」と同様に、HTML言語と一緒に記述されることもあれば、ファイルを別にして「 ファイル名.js 」とう拡張子を使用し、記述されることもあります。
ファイルの作成方法
「 css 」「 JavaScript 」形式ファイルの作成方法について説明したいと思います。
●css形式ファイル
デスクトップに「 メモ帳 」を新規で作成します。
ファイル名はあとで修正するため、分かりやすいように今回は「 新規 」としておきたいと思います。
先ほどChatGPTに作ってもらった「 cssのプログラム 」を「 メモ帳（新規.txt） 」を開いて貼り付けます。
プログラムが張り付けられたら、メモ帳（新規.txt）を「 保存 」します。
「 新規.txt 」は、拡張子が「 .txt 」となっているため、「 テキストを扱うデータファイル 」です。
「 css形式 」に拡張子を変更するためには、「 新規.txt 」末尾の「 .txt 」を「 .css 」に変更してあげれば、拡張子を変更することができます。
●JavaScript形式ファイル
「 JavaScript 」形式ファイルも同様の手順で拡張子を「 ファイル名.txt → ファイル名.js 」と変更してあげることで、「 txt形式 → JavaScript形式 」に変更することができます。
ファイル名について
「 css 」「 JavaScript 」形式の「 ファイル名の付け方 」について説明したいと思います。
「 HTML 」「 css 」「 JavaScript 」など、プログラムファイルを別にした場合、お互いのことが分かるよう「 ファイル名 」を教えてあげる必要があります。
ファイル名の教え方は「 プログラム文中に記述 」してあげればよいのですが、今回は「 ChatGPT 」にプログラムを組んでもらったため、プログラムの中からその「 名前を探してファイル名を変更 」する必要があります。
ゲームを動かすときに「 HTML形式ファイル 」を起動していることからも予想できると思いますが、
「 css と JavaScript のファイル名 」は、「 HTML 」言語の中に記述してあります。
※ ChatGPTにプログラムを組んでもらっているので、毎回同じとは言い切れませんが・・・。
「 HTML 」のプログラム中に、「 ～～.css 」「 ～～.js 」と書かれている箇所がありますので、拡張子の前の部分がファイル名になります。
●下図なら
・cssのファイル名は「 styles.css 」
・JavaScriptのファイル名は「 script.js 」
先ほど探したファイル名に変更してあげることで、「 HTML 」から「 css 」「 JavaScript 」ファイルを見ることができるようになります。
3つのファイルを分割するのかまとめるのかは、ChatGPTの気分によって変わりますが、プログラムが長いときは分割ファイルになることが多い印象です。
ここまで複雑になってくると、時間もかかるし「 簡単に 」とは程遠くなってきましたね。
■ゲームを動かす②（失敗）
「 HTML 」「 css 」「 JavaScript 」ファイルができたので、さっそく動かしてみたいと思います。
「 HTMLファイル 」をダブルクリックして、「 テトリス風ゲーム 」起動してみます。
「 テトリス風ゲーム 」は起動しましたが、まったく動く気配がありません。
仕方がないので、「 ChatGPT 」にブロックが動くよう依頼してみました。
※ ここは新規ではなく連続で質問を行っています。
「 ブロックが動きません。ブロックが動くようにしてください。 」
何度質問をしてもうまく修正してくれないため諦めました。
ここまでで、1～2時間なんてとうの昔に過ぎております。
■意地でもゲームがしたい
ChatGPTへ質問
ここまで失敗すると、意地でも「 テトリス風ゲーム 」を「 ChatGPT 」に作らせたくなってきたので、「 プログラミング初心者 」というルールを無視して、以下のような質問をしてみました。笑
JavaScriptを使用してブラウザ上で動作するテトリスゲームを作ってください。HTMLのcanvas要素を使用してゲーム画面を作成し、JavaScriptでそれを操作します。機能としては、キーボードを使用してブロックの移動や回転を制御し、行の消去も盛り込んでください。ゲームオーバー時にはアラートが表示され、ゲーム画面がクリアされて得点もリセットされるようにしてください。
ChatGPTの回答
上記の質問を行った結果、下記のような回答を得ることができました。
※ 文章の末尾に[ChatGPT]と記載している箇所は、ChatGPTの回答文になります。
【 ChatGPTの回答 】
以下は、HTMLのcanvas要素とJavaScriptを使用して実装されたシンプルなテトリスゲームです。このコードは、基本的なゲームプレイと機能を提供しますが、さらに改善やカスタマイズが可能です。[ChatGPT]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<style>
canvas {
border: 1px solid black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="tetrisCanvas" width="300" height="600"></canvas>
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('tetrisCanvas');
const context = canvas.getContext('2d');
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = canvas.width / COLS;
let board = [];
for (let row = 0; row < ROWS; row++) {
board[row] = [];
for (let col = 0; col < COLS; col++) {
board[row][col] = 0;
}
}
function drawBlock(x, y) {
context.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
context.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
function drawBoard() {
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
if (board[row][col]) {
context.fillStyle = 'blue';
drawBlock(col, row);
} else {
context.clearRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
}
}
}
}
let currentPiece = {
x: 0,
y: 0,
shape: [
[1, 1],
[1, 1]
]
};
function drawPiece() {
context.fillStyle = 'red';
for (let row = 0; row < currentPiece.shape.length; row++) {
for (let col = 0; col < currentPiece.shape[row].length; col++) {
if (currentPiece.shape[row][col]) {
drawBlock(currentPiece.x + col, currentPiece.y + row);
}
}
}
}
function checkCollision() {
for (let row = 0; row < currentPiece.shape.length; row++) {
for (let col = 0; col < currentPiece.shape[row].length; col++) {
if (currentPiece.shape[row][col] && (board[currentPiece.y + row] && board[currentPiece.y + row][currentPiece.x + col]) !== 0) {
return true;
}
}
}
return false;
}
function mergePiece() {
for (let row = 0; row < currentPiece.shape.length; row++) {
for (let col = 0; col < currentPiece.shape[row].length; col++) {
if (currentPiece.shape[row][col]) {
board[currentPiece.y + row][currentPiece.x + col] = 1;
}
}
}
}
function rotatePiece() {
const rotatedPiece = [];
for (let col = 0; col < currentPiece.shape[0].length; col++) {
rotatedPiece[col] = [];
for (let row = 0; row < currentPiece.shape.length; row++) {
rotatedPiece[col][currentPiece.shape.length - 1 - row] = currentPiece.shape[row][col];
}
}
currentPiece.shape = rotatedPiece;
}
function movePieceDown() {
currentPiece.y++;
if (checkCollision()) {
currentPiece.y--;
mergePiece();
currentPiece = generateRandomPiece();
if (checkCollision()) {
clearInterval(gameInterval);
alert('Game Over');
resetGame();
}
}
}
function movePieceRight() {
currentPiece.x++;
if (checkCollision()) {
currentPiece.x--;
}
}
function movePieceLeft() {
currentPiece.x--;
if (checkCollision()) {
currentPiece.x++;
}
}
function clearRows() {
for (let row = 0; row < ROWS; row++) {
if (board[row].every(cell => cell)) {
board.splice(row, 1);
board.unshift(Array(COLS).fill(0));
}
}
}
function resetGame() {
board = [];
for (let row = 0; row < ROWS; row++) {
board[row] = [];
for (let col = 0; col < COLS; col++) {
board[row][col] = 0;
}
}
currentPiece = generateRandomPiece();
gameInterval = setInterval(() => {
movePieceDown();
clearRows();
drawBoard();
drawPiece();
}, 500);
}
function generateRandomPiece() {
const shapes = [
[[1, 1],
[1, 1]],
[[1, 1, 1, 1]],
[[1, 0],
[1, 0],
[1, 1]],
[[0, 1],
[0, 1],
[1, 1]],
[[0, 1],
[1, 1],
[1, 0]],
[[1, 1, 0],
[0, 1, 1]]
];
const randomIndex = Math.floor(Math.random() * shapes.length);
const shape = shapes[randomIndex];
return {
x: Math.floor(COLS / 2) - Math.floor(shape[0].length / 2),
y: 0,
shape: shape
};
}
document.addEventListener('keydown', event => {
switch (event.key) {
case 'ArrowLeft':
movePieceLeft();
break;
case 'ArrowRight':
movePieceRight();
break;
case 'ArrowDown':
movePieceDown();
break;
case 'ArrowUp':
rotatePiece();
if (checkCollision()) {
rotatePiece();
rotatePiece();
rotatePiece();
}
break;
}
});
resetGame();
});
</script>
</body>
</html>このコードをHTMLファイルに貼り付けて保存し、ブラウザで開くと、テトリスゲームがプレイできます。キーボードの矢印キーでブロックを操作し、行が揃うと消去されます。ブロックが画面の上まで積み重なるとゲームオーバーとなり、アラートが表示されます。[ChatGPT]
■ゲームを動かす③
あ・・・
なんかそれっぽいのができました。
【 操作方法 】
・キーボードの「 左右 」でブロックを動かす。
・キーボードの「 上 」でブロックを回転させる。
・キーボードの「 下 」でブロックを下げる。
その後、何度か同じ質問を繰り返し行いましたが、微妙なものしかできませんでした。
自分でプログラムを修正せず、「 ChatGPT 」にプログラムを書かせるだけでは簡単に「 テトリス風ゲーム 」を作るのは難しそうです。
■結果
【 結果 】
プログラミング未経験の方や初心者の方が、「 ChatGPT 」を利用しても、簡単に「 テトリス風ゲーム 」は作れないという結果になりました。
時間をかけて何度も質問を繰り返せば「 テトリス風ゲーム 」を作れないこともないと思いますが、「 簡単に（1～2時間） 」という定義から外れるため、今回は簡単に「 テトリス風ゲーム 」は作れないという結論になります。
ただ、時間などの制約を外して、週末に遊びながら作っていたら、いつの間にか完成している程度のポテンシャルは秘めていると思います。
興味が出た方は「 テトリス風ゲーム 」の作成を週末にトライしてみるのも一興ではないでしょうか。
数回に渡る話しの中で、少しでもChatGPTに親しんで頂けたなら幸いです。
内容を理解しやすくするため表現を誇張しているが部分があることや、 このサイトの内容が絶対に正しいという保証は出来ません。 また、実作業における破損・傷害等に付きましても保証できないため、ご了承の上お付き合い頂けたら幸いです。