簡単なゲームならプログラムできるらしいChatGPTに、神経衰弱のプログラムを作らせ見てました。
ChatGPTが作った神経衰弱 | 東亜遊戯
こんな感じで出来上がったものです。ルールは、通常通りの神経衰弱です。クリア後にもう一度遊ぶ際は、ページを読み込みなおしてください。CPUが相手してくれるわけで
toua-yuugi.com
どういう指示を出したかというと↓
「Webページ上で動作する神経衰弱のプログラムを教えてください。」
この一言のみ。
で、返ってきたのが↓
以下は、HTML、CSS、およびJavaScriptを使用してWebページ上で動作する神経衰弱のプログラムの基本的な実装例です。
<!DOCTYPE html>
<html>
<head>
<title>神経衰弱</title>
<style>
.card {
width: 100px;
height: 150px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
display: inline-block;
margin: 5px;
text-align: center;
font-size: 24px;
cursor: pointer;
}
.card.clicked {
background-color: #999;
}
</style>
</head>
<body>
<h1>神経衰弱</h1>
<div id="gameBoard"></div>
<script>
// カードの種類
var cardTypes = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
// カードをシャッフルする関数
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// カードを作成する関数
function createCards() {
var cards = cardTypes.concat(cardTypes);
cards = shuffle(cards);
var gameBoard = document.getElementById('gameBoard');
for (var i = 0; i < cards.length; i++) {
var card = document.createElement('div');
card.className = 'card';
card.dataset.cardType = cards[i];
card.innerHTML = '?';
card.addEventListener('click', clickCard);
gameBoard.appendChild(card);
}
}
// カードをクリックしたときの処理
var firstCard = null;
var secondCard = null;
function clickCard() {
if (this === firstCard) return;
this.classList.add('clicked');
this.innerHTML = this.dataset.cardType;
if (!firstCard) {
firstCard = this;
} else if (!secondCard) {
secondCard = this;
checkCards();
}
}
// カードをチェックする関数
function checkCards() {
var isMatch = firstCard.dataset.cardType === secondCard.dataset.cardType;
isMatch ? disableCards() : resetCards();
}
// カードが一致した場合の処理
function disableCards() {
firstCard.removeEventListener('click', clickCard);
secondCard.removeEventListener('click', clickCard);
resetBoard();
}
// カードが一致しなかった場合の処理
function resetCards() {
setTimeout(function() {
firstCard.innerHTML = '?';
secondCard.innerHTML = '?';
firstCard.classList.remove('clicked');
secondCard.classList.remove('clicked');
resetBoard();
}, 1000);
}
// カードをリセットする関数
function resetBoard() {
[firstCard, secondCard] = [null, null];
}
途切れているようなので、「続けてください」と指示すると、更にコードが。
// ゲームを初期化する関数
function initializeGame() {
var gameBoard = document.getElementById('gameBoard');
gameBoard.innerHTML = '';
createCards();
}
// ゲームを開始する
initializeGame();
</script>
</body>
</html>
これを、メモ帳で一つのhtmlファイルにまとめ、サーバーにアップしました。
なんか出来てるっぽい！
カードをクリックすると、ちゃんと裏返ります。
カードが揃うと、裏返ったままになります。さすがにCPUはいませんが、トランプ代わりにして友人と遊べるぐらいのものはできました。暇つぶしに一人でやるのもよさそう。
ちなみに、ページをリロードすると、カードがシャッフルされます。地味に芸が細かい。
ただ、クリアできた（全部めくり終わった）ても何もないので、その後は自分でリロードする必要がありそう。
だにせよ、ここまでのコードを一言の指示で書いてくれるChatGPT、かなりすごいわ。
実際のゲームがこれです。
ChatGPTが作った神経衰弱 | 東亜遊戯
こんな感じで出来上がったものです。ルールは、通常通りの神経衰弱です。クリア後にもう一度遊ぶ際は、ページを読み込みなおしてください。CPUが相手してくれるわけで
toua-yuugi.com
コメント