かんたん！1たい1カードバトルゲームのつくりかた（小学生でもできるよ）

AI・プログラミング

かんたん！1たい1カードバトルゲームのつくりかた（小学生でもできるよ）

こんにちは！
きょうは、メモ帳だけでできる、シンプルなカードバトルゲームの作りかたをしょうかいします。プログラミングがはじめてでも、コピーしてはるだけでOK！
10回たたかって、さいごにスコアとひょうかも出るよ！
完成するとこんなアプリになります→cardbattle

まずは ChatGPT に たのんでみよう！

ChatGPTに、こんなふうに話しかけてみてね：

1対1カードバトルゲームを作ってください。10問をワンセットとして、勝ち負けで点数をつけて、最後にスコアと評価を出してください。リセットボタンもつけてください。小学生でもわかるように作ってください。

 メモ帳でゲームをつくろう！

  1. **メモ帳（Notepad）**をひらこう（Windowsなら「スタート」→「メモ帳」で出てくるよ）

  2. 下のコードをぜんぶコピーして、メモ帳にはりつけてね

  3. 「名前をつけて保存」をえらんで、

    • ファイル名： cardgame.html

    • ファイルの種類：すべてのファイル

    • 文字コード：UTF-8
      にしてね

  4. 保存したファイルをダブルクリックすればゲームスタート！

ChatGPTがつくったプログラム（そのままコピーしてOK！）

html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1対1カードバトル（10問）</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 30px; }
.card-container { display: inline-block; margin: 10px; }
.card { font-size: 40px; width: 100px; height: 100px; line-height: 100px;
border: 2px solid black; border-radius: 10px; margin-bottom: 10px; }
.label { font-weight: bold; }
.result, .score { font-size: 24px; margin-top: 20px; }
button { font-size: 20px; padding: 10px 20px; margin: 10px; }
</style>
</head>
<body>
<h1>1対1カードバトル（10問）</h1>
<div>
<div class="card-container">
<div class="card" id="playerCard">❓</div>
<div class="label">あなた</div>
</div>
<div class="card-container">
<div class="card" id="cpuCard">❓</div>
<div class="label">PC</div>
</div>
</div>
<div class="result" id="result">バトルしよう！</div>
<div class="score" id="score">現在のスコア：0点（0/10）</div>
<div class="score" id="finalResult"></div>
<button onclick="battle()">バトル！</button>
<button onclick="resetGame()">リセット</button>

<script>
let score = 0;
let count = 0;

function drawCard() {
return Math.floor(Math.random() * 10) + 1;
}

function getEvaluation(score) {
if (score >= 90) return "評価：A（とても強い！）";
if (score >= 60) return "評価：B（がんばったね！）";
return "評価：C（もう一度チャレンジ！）";
}

function battle() {
if (count >= 10) return;

const player = drawCard();
const cpu = drawCard();
document.getElementById("playerCard").textContent = player;
document.getElementById("cpuCard").textContent = cpu;

let resultText = "";
if (player > cpu) {
resultText = "あなたの勝ち！ (+10点)";
score += 10;
} else if (player < cpu) {
resultText = "PCの勝ち！ (+0点)";
} else {
resultText = "引き分け！ (+5点)";
score += 5;
}

count++;
document.getElementById("result").textContent = resultText;
document.getElementById("score").textContent = `現在のスコア：${score}点（${count}/10）`;

if (count === 10) {
document.getElementById("finalResult").textContent = `最終スコア：${score}点　${getEvaluation(score)}`;
}
}

function resetGame() {
score = 0;
count = 0;
document.getElementById("playerCard").textContent = "❓";
document.getElementById("cpuCard").textContent = "❓";
document.getElementById("result").textContent = "バトルしよう！";
document.getElementById("score").textContent = "現在のスコア：0点（0/10）";
document.getElementById("finalResult").textContent = "";
}
</script>
</body>
</html>

まとめ＆アレンジのヒント

このゲームは、数字をくらべて勝ち負けを決めるシンプルなカードバトルです。でも、まだまだ工夫できることがたくさんあります！

 たとえば……

  • 絵文字カードにする（やなど）

  • もっとむずかしいルールを追加する（偶数カードは2倍？）

  • 勝った回数をカウントしてランキングを出す

コメント

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