【小学生でもできる！】じゃんけんゲームアプリを作ろう！

AI・プログラミング
2025.04.28

【小学生でもできる！】じゃんけんゲームアプリを作ろう！

完成品はこちらじゃんけんゲームアプリ

こんにちは！今日は、みんなで楽しくじゃんけんゲームを作る方法を紹介するよ！
簡単なHTMLとJavaScriptを使って、あなたのブラウザ上で遊べるアプリが作れるよ！

必要なもの

  1. パソコン（またはタブレット）
    これを使って、コードを入力していきます。

  2. インターネット接続
    コードを書いたり、動かしたりするために必要です。

  3. メモ帳（またはエディタ）
    ここでコードを書きます。パソコンに最初から入っているメモ帳や、エディタを使ってもOK！

じゃんけんゲームを作る準備

まずは、ゲームを作るために必要なコードをChatGPTに頼んで作ってもらうよ！
「ChatGPTにプロンプトを入力してコードを作ろう」と思ったら、次のようにお願いしてみてね。

ChatGPTでコードを作る

ChatGPTに「じゃんけんゲームを作って！」とお願いすると、こんな感じでコードを作ってくれるよ！
以下の内容をChatGPTに入力してみよう。

プロンプト（ChatGPTに入力する内容）

diff
じゃんけんゲームを作ってください。
ゲームは10回戦ワンセットで、結果を評価します。
以下の内容で作ってください：
- プレイヤーとPCがじゃんけんをする
- プレイヤーは「グー」「パー」「チョキ」を選ぶ
- 10回戦終了後に最終結果（勝ち・負け・引き分け）を表示
- ゲームの途中で毎回の勝敗を表示

できあがったコード

ChatGPTがこのようなコードを作ってくれるよ！

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>じゃんけんゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.result, .finalResult {
margin-top: 20px;
font-size: 18px;
}
.buttons {
margin-top: 20px;
}
button {
font-size: 20px;
padding: 10px 20px;
cursor: pointer;
margin: 10px;
}
</style>
</head>
<body>
<h1>じゃんけんゲーム 🎮</h1>
<p>あなたとPCの勝負！10回戦ワンセット！</p><div class=“buttons”>
<button onclick=“play(‘rock’)”>グー</button>
<button onclick=“play(‘paper’)”>パー</button>
<button onclick=“play(‘scissors’)”>チョキ</button>
</div><div class=“result”>
<h2>ゲームの結果（10回戦）</h2>
<p id=“gameResult”>まだ開始されていません。</p>
<p id=“yourScore”>あなた: 0</p>
<p id=“pcScore”>PC: 0</p>
</div>

<div class=“finalResult”>
<h2>最終評価</h2>
<p id=“finalEvaluation”>まだ結果が出ていません。</p>
</div>

<script>
let yourWins = 0;
let pcWins = 0;
let roundsPlayed = 0;

function play(yourChoice) {
if (roundsPlayed >= 10) {
document.getElementById(“gameResult”).textContent = “ゲームは終了しました！”;
return;
}

const pcChoice = getPCChoice();
const result = getRoundResult(yourChoice, pcChoice);
updateScore(result);
roundsPlayed++;

// 結果を表示
document.getElementById(“gameResult”).textContent = `あなた: ${yourChoice} – PC: ${pcChoice}`;
document.getElementById(“yourScore”).textContent = `あなた: ${yourWins}`;
document.getElementById(“pcScore”).textContent = `PC: ${pcWins}`;

// 10回戦が終わったら最終評価
if (roundsPlayed === 10) {
evaluateGame();
}
}

function getPCChoice() {
const choices = [‘rock’, ‘paper’, ‘scissors’];
const randomIndex = Math.floor(Math.random() * 3);
return choices[randomIndex];
}

function getRoundResult(yourChoice, pcChoice) {
if (yourChoice === pcChoice) {
return ‘draw’;
}
if (
(yourChoice === ‘rock’ && pcChoice === ‘scissors’) ||
(yourChoice === ‘scissors’ && pcChoice === ‘paper’) ||
(yourChoice === ‘paper’ && pcChoice === ‘rock’)
) {
return ‘win’;
} else {
return ‘lose’;
}
}

function updateScore(result) {
if (result === ‘win’) {
yourWins++;
} else if (result === ‘lose’) {
pcWins++;
}
}

function evaluateGame() {
let evaluation = ”;
if (yourWins > pcWins) {
evaluation = ‘あなたの勝ち！🎉’;
} else if (yourWins < pcWins) {
evaluation = ‘PCの勝ち！😔’;
} else {
evaluation = ‘引き分けです！’;
}
document.getElementById(“finalEvaluation”).textContent = evaluation;
}
</script>
</body>
</html>

ゲームを動かす

  1. 上記のコードをメモ帳にコピーして、janken.htmlという名前で保存します。

  2. 保存したファイルをダブルクリックして、ブラウザで開きます。

  3. すると、じゃんけんゲームがスタート！「グー」「パー」「チョキ」のボタンを押して、じゃんけんを楽しんでね。

まとめ

今回は、ChatGPTを使って「じゃんけんゲーム」を作ってみました！
これで、あなたも自分のアプリを作れるようになったね！🎮✨

もし、もっと進化させたい場合は、次のようなことを挑戦してみてね：

  • ボタンのデザインを変更してみよう！

  • 10回戦以外で、もっと長いゲームにしてみよう！

  • ゲーム終了後に「もう一度やる」ボタンを追加してみよう！

これからも、いろいろなアプリを作って遊んでみてください！🎨😊

コメント

タイトルとURLをコピーしました