ルーレットゲームを作ろう！【小学生でもかんたん！】

こんにちは！今日は、パソコンのメモ帳だけでできる
おもしろい「ルーレットゲーム」の作り方を紹介するよ！

完成するとこんなアプリになります→ルーレットゲーム

このゲームでできること

くだものがクルクル回るルーレット🎯
それぞれのくだものに点数があるよ🍓🍌🍒
10回やったらスコアと評価が出るよ
リセットボタンでやり直せる✨

まずはChatGPTにお願いしてみよう！

「ChatGPT（チャットジーピーティー）」にこんなふうにお願いしてね：

プロンプト：
「ルーレットゲームを作ってください。果物ごとに点数をつけて、10回で合計点を出して評価して、リセットボタンもつけてください。小学生でも遊べるようにしてください。」

※このプロンプトをコピーして、ChatGPTにペーストすればOK！

メモ帳でプログラムを作ってみよう！

パソコンの「メモ帳」をひらこう
下のプログラムをぜんぶコピーして、ペーストしてね
「roulette.html」という名前で保存しよう
ダブルクリックするとゲームがはじまるよ！

ChatGPTが作ったプログラム

👇このコードをコピーして、メモ帳に貼りつけてね！

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>ルーレットゲーム</title>
<style>
body {
text-align: center;
font-family: sans-serif;
background: #f0f8ff;
padding-top: 30px;
}
#roulette {
font-size: 60px;
margin: 20px;
}
button {
font-size: 24px;
padding: 10px 30px;
margin: 10px;
border-radius: 10px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #388e3c;
}
#score {
font-size: 24px;
margin-top: 20px;
}
#result {
font-size: 26px;
margin-top: 20px;
font-weight: bold;
}
#pointTable {
margin-top: 30px;
display: inline-block;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 10px;
padding: 15px 30px;
text-align: left;
}
#pointTable h2 {
margin-top: 0;
text-align: center;
}
.pointRow {
font-size: 20px;
line-height: 1.8;
}
</style>
</head>
<body>

<h1>ルーレットゲーム（10回チャレンジ）</h1>
<div id=”roulette”>🎰</div>
<button onclick=”startRoulette()” id=”startButton”>スタート！</button>
<button onclick=”resetGame()”>リセット</button>
<div id=”score”>スコア：0（0/10回）</div>
<div id=”result”></div>

<div id=”pointTable”>
<h2>🍒 果物の点数表 🍒</h2>
<div class=”pointRow”>🍒 さくらんぼ：10点</div>
<div class=”pointRow”>🍓 いちご：9点</div>
<div class=”pointRow”>🍉 すいか：8点</div>
<div class=”pointRow”>🍇 ぶどう：7点</div>
<div class=”pointRow”>🥝 キウイ：6点</div>
<div class=”pointRow”>🍌 バナナ：5点</div>
<div class=”pointRow”>🍍 パイナップル：4点</div>
<div class=”pointRow”>🍎 りんご：3点</div>
</div>

let totalScore = 0;
let playCount = 0;
let interval;
const maxTurns = 10;

function startRoulette() {
if (playCount >= maxTurns) return;

function updateScore() {
document.getElementById(“score”).textContent =
`スコア：${totalScore}（${playCount}/${maxTurns}回）`;
}

function resetGame() {
totalScore = 0;
playCount = 0;
clearInterval(interval);
document.getElementById(“roulette”).textContent = “🎰”;
document.getElementById(“score”).textContent = “スコア：0（0/10回）”;
document.getElementById(“result”).textContent = “”;
document.getElementById(“startButton”).disabled = false;
}
</script>

</body>
</html>

メモ帳の使い方と保存方法

メモ帳をひらく方法
　パソコンで「スタート」→「メモ帳」と検索してクリック！
貼りつける方法
　ここでコピーしたコードをメモ帳に「右クリック → 貼り付け」
保存のしかた
　「ファイル」→「名前を付けて保存」
　ファイル名は roulette.html にして、**文字コードを「UTF-8」**にすると安心！
　保存したら、ダブルクリックでゲームスタート！