ChatGPTを使って神経衰弱を作ってみました。
自力で作るなら何日もかかりそうなものが1時間程度でできました。
最初にざっくりと指示を出して、気になる部分を修正していくという作り方です。
簡単な修正は自力でやって、難しそうなところはAIに丸投げです。
まずは完成版で遊んでみてください。
神経衰弱をやってみよう！
有名なトランプゲームと同じルールです。
今回は数字ではなく動物の絵文字で作りました。同じ絵文字を揃えましょう。
ゲーム制作手順
まずは超ざっくりと指示を出します。
- javascriptで神経衰弱を作って
- カードは10枚
👆これだけの指示である程度完成しました。
👇これだけの指示でChatGPTの作ったゲームがこちらです。
同じ指示なら同じ結果になるというわけではありませんが、今回はこのようなアプリが出てきました。
主な修正点
- 5列だとスマホでは幅が足りなくなるので、4列に変更して、カードを12枚にする
- 左寄せを中央寄せに変更
- 数字だと見た目が地味なので動物の絵文字に変更
- クリアするとアラートが出る設定を、メッセージと「もう一回」ボタンを表示する設定に変更
- 「もう一回」ボタンを押すと最初からやり直すことができるようにする
4列・12枚、中央寄せ、絵文字に変更は自力でサクッと。
「もう一回ボタン」はめんどくさいのでAIにお願いしました。
アラートではなく、メッセージと「もう一回」ボタンを出すようにしてください
👆これだけでAIがやってくれました。
簡単に完成して面白いですが、達成感がないのが問題点ですね。
完成版のコード
動物絵文字の神経衰弱アプリのコードを載せておくので、コピペして試してください。
私もコードの全てを理解しているわけではないのですが、想定通りに動いているならまあいいかという感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>神経衰弱</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
font-family: sans-serif;
display: flex;
justify-content: center;
}
h1 {
margin: 30px 0;
text-align: center;
}
.message {
text-align: center;
margin-bottom: 20px;
display: none;
}
.message p {
font-size: 18px;
}
.message button {
margin-top: 20px;
padding: 6px 12px;
font-size: 16px;
cursor: pointer;
}
.board {
display: grid;
grid-template-columns: repeat(4, 80px);
gap: 10px;
}
.card {
width: 80px;
height: 100px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
line-height: 1;
cursor: pointer;
user-select: none;
}
.card.open,
.card.matched {
background: #fff;
cursor: default;
}
</style>
</head>
<body>
<div class="wrap">
<h1>神経衰弱</h1>
<div class="message" id="message">
<p id="clearText"></p>
<button id="restartBtn">もう一回</button>
</div>
<div class="board" id="board"></div>
</div>
<script>
const baseEmojis = ['🐼', '😸', '🐧', '🐋', '🐵', '🐭'];
const emojis = [];
baseEmojis.forEach((emoji) => {
emojis.push(emoji);
emojis.push(emoji);
});
const shuffleArray = (ary) => {
let len = ary.length;
while (len) {
let i = Math.floor(Math.random() * len);
let last = ary[--len];
ary[len] = ary[i];
ary[i] = last;
}
return ary;
};
const board = document.getElementById('board');
const message = document.getElementById('message');
const clearText = document.getElementById('clearText');
const restartBtn = document.getElementById('restartBtn');
let firstCard = null;
let lock = false;
let matchedCount = 0;
const cardNum = 12;
const initGame = () => {
board.innerHTML = '';
firstCard = null;
lock = false;
matchedCount = 0;
message.style.display = 'none';
clearText.textContent = '';
const shuffled = shuffleArray([...emojis]);
shuffled.forEach((emoji) => {
const card = document.createElement('div');
card.className = 'card';
card.dataset.emoji = emoji;
card.textContent = '';
card.addEventListener('click', () => {
if (lock || card.classList.contains('open') || card.classList.contains('matched')) {
return;
}
card.classList.add('open');
card.textContent = card.dataset.emoji;
if (!firstCard) {
firstCard = card;
return;
}
if (firstCard.dataset.emoji === card.dataset.emoji) {
firstCard.classList.add('matched');
card.classList.add('matched');
matchedCount += 2;
if (matchedCount === cardNum) {
message.style.display = 'block';
clearText.textContent = 'クリアしました！';
}
firstCard = null;
} else {
lock = true;
setTimeout(() => {
firstCard.classList.remove('open');
card.classList.remove('open');
firstCard.textContent = '';
card.textContent = '';
firstCard = null;
lock = false;
}, 800);
}
});
board.appendChild(card);
});
};
restartBtn.addEventListener('click', () => {
initGame();
});
initGame();
</script>
</body>
</html>