小学生でも作れる！スロットマシンアプリをChatGPTといっしょに作ろう

小学生でも作れる！スロットマシンアプリをChatGPTといっしょに作ろう🎰✨

こんにちは！
今回は、パソコンとメモ帳だけで作れる「スロットマシンアプリ」の作り方を紹介します！🎉

しかも、むずかしいプログラミングは必要ありません。
ChatGPTにお願いするだけで、かんたんに作れちゃうんです！

小学生でもできるように、やさしく説明していきますね。

完成したらこんなアプリになります→スロットマシンアプリ

使うもの
ChatGPTへのお願い（プロンプト）の書き方
1. ChatGPTへのお願い（プロンプト例）
ChatGPTが作ってくれたコード
1. スロットマシンアプリのコード
メモ帳に張り付けて保存します
まとめ

使うもの

パソコン
メモ帳（またはテキストエディタ）
ブラウザ（Google ChromeやSafariなど）
ChatGPT（スマホでもパソコンでもOK！）

ChatGPTへのお願い（プロンプト）の書き方

ChatGPTにアプリを作ってもらうためには、
「どんなアプリを作りたいか」をわかりやすくお願い（プロンプト）します。

たとえば、こんなふうに書きます！

ChatGPTへのお願い（プロンプト例）

このように書けば、ChatGPTがアプリのプログラムを作ってくれます！

ChatGPTが作ってくれたコード

実際にChatGPTが書いてくれたコードがこちらです！

スロットマシンアプリのコード

html

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>リセットつきスロットマシン</title>

<style>

body {

text-align: center;

font-family: Arial, sans-serif;

margin-top: 30px;

}

.slot {

font-size: 80px;

margin: 10px;

display: inline-block;

width: 100px;

height: 100px;

border: 3px solid #333;

line-height: 100px;

background: #fff;

user-select: none;

}

.controls {

margin: 20px;

}

button {

font-size: 18px;

margin: 5px;

padding: 10px 20px;

}

#result, #score, #playCount {

font-size: 24px;

margin-top: 20px;

}

</style>

</head>

<body>

<h1>🎰 スロットマシン 🎰</h1><div>
<div class=“slot” id=“slot1”>🍒</div>
<div class=“slot” id=“slot2”>🍒</div>
<div class=“slot” id=“slot3”>🍒</div>
</div>

<div id=“result”></div>
<div id=“score”>得点：0点</div>
<div id=“playCount”>残りプレイ：20回</div>

function start() {
if (playsLeft <= 0) {
alert(“セット終了！リセットしてね！”);
return;
}

document.getElementById(‘result’).textContent = “”;
slots = [
document.getElementById(‘slot1’),
document.getElementById(‘slot2’),
document.getElementById(‘slot3’)
];

randoms = weightedRandom();

for (let i = 0; i < 3; i++) {
if (timers[i]) {
clearInterval(timers[i]);
}
timers[i] = setInterval(() => {
slots[i].textContent = items[Math.floor(Math.random() * items.length)];
}, 100);
}

slots.targetItems = randoms;
}

function stopSlot(index) {
if (timers[index]) {
clearInterval(timers[index]);
slots[index].textContent = slots.targetItems[index];
timers[index] = null;
}

if (timers.every(timer => timer === null)) {
judge();
}
}

function judge() {
const s1 = slots[0].textContent;
const s2 = slots[1].textContent;
const s3 = slots[2].textContent;
let message = “”;

if (s1 === s2 && s2 === s3) {
message = “🎉 ３つ揃い！100点！！ 🎉”;
totalScore += 100;
} else if (s1 === s2 || s2 === s3 || s1 === s3) {
message = “✨ ２つ揃い！30点！ ✨”;
totalScore += 30;
} else {
message = “😅 揃わず…0点”;
}

document.getElementById(‘result’).textContent = message;
document.getElementById(‘score’).textContent = `得点：${totalScore}点`;

playsLeft–;
document.getElementById(‘playCount’).textContent = `残りプレイ：${playsLeft}回`;

if (playsLeft === 0) {
document.getElementById(‘result’).textContent = `セット終了！最終得点：${totalScore}点 🎯`;
}
}

function resetGame() {
for (let i = 0; i < 3; i++) {
if (timers[i]) {
clearInterval(timers[i]);
timers[i] = null;
}
}
totalScore = 0;
playsLeft = 20;

document.getElementById(‘slot1’).textContent = “🍒”;
document.getElementById(‘slot2’).textContent = “🍒”;
document.getElementById(‘slot3’).textContent = “🍒”;
document.getElementById(‘result’).textContent = “”;
document.getElementById(‘score’).textContent = “得点：0点”;
document.getElementById(‘playCount’).textContent = “残りプレイ：20回”;
}
</script>