小学生でも作れる！アルファベットタイピングアプリの作り方【ChatGPTでかんたん】

AI・プログラミング

小学生でも作れる！アルファベットタイピングアプリの作り方【ChatGPTでかんたん】

こんにちは！
今回は、キーボードでアルファベットを打ってあそぶゲームを作ってみよう！
むずかしそうに見えるけど、ChatGPTにお願いすればOK！
完成するとこんなアプリになります→alphabet_typing

🧠 まずはChatGPTにこう聞いてみよう！

ChatGPT（チャットジーピーティー）に、下の文をコピペして聞いてみよう👇

スタートボタン付きで、20問で終わるアルファベットタイピングアプリを作ってください。遊び方も画面に表示して、最後に点数と評価を出してください。

すると、ChatGPTが**ゲームのプログラム（コード）**をつくってくれるよ！
それを、次の手順で使えばすぐゲームができるんだ！

💾 メモ帳でゲームを作ろう！

📝 Step 1：メモ帳を開く

  1. キーボードで「メモ帳」と入力して開く

  2. ChatGPTが出してくれたコード全部をコピーして貼り付けよう

💾 Step 2：ファイルに保存

  1. メモ帳のメニューから「ファイル」→「名前を付けて保存」

  2. ファイル名を typing_game.html にする

  3. 「ファイルの種類」は「すべてのファイル（.）」にしてね

  4. 保存ボタンをクリック！

🌐 Step 3：ゲームスタート！

保存した typing_game.html をダブルクリックすると、ブラウザ（Chromeなど）でゲームが開くよ！
さあ、チャレンジしてみよう！

✅ ChatGPTが作ってくれたプログラム（コード）

下のコードをぜんぶコピーしてメモ帳に貼り付けてね👇

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アルファベットタイピング</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 30px;
background-color: #f0f8ff;
}
h1 {
font-size: 2em;
margin-bottom: 10px;
}
#howto {
font-size: 1em;
margin-bottom: 20px;
color: #333;
}
#question {
font-size: 5em;
margin: 30px;
color: blue;
}
#result, #score {
font-size: 1.2em;
margin: 10px;
}
#startBtn {
font-size: 1.2em;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>アルファベットタイピング</h1>
<div id="howto">
スタートボタンを押すと20問が始まるよ！<br>
表示されたアルファベットをキーボードで打ってね。<br>
正解したら1点！最後に評価が出るよ。
</div>
<button id="startBtn">スタート</button>
<div id="question">？</div>
<div id="result">ここに結果が出るよ</div>
<div id="score"></div>

<script>
const questionEl = document.getElementById('question');
const resultEl = document.getElementById('result');
const scoreEl = document.getElementById('score');
const startBtn = document.getElementById('startBtn');

let correctCount = 0;
let totalCount = 0;
let currentLetter = '';
let playing = false;

function getRandomLetter() {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return letters[Math.floor(Math.random() * letters.length)];
}

function nextQuestion() {
currentLetter = getRandomLetter();
questionEl.textContent = currentLetter;
}

function showEvaluation(score) {
let message = '';
if (score === 20) {
message = 'すごい！パーフェクト！🌟';
} else if (score >= 15) {
message = 'とてもよくできました！👍';
} else if (score >= 10) {
message = 'がんばったね！😊';
} else {
message = 'またチャレンジしてね！💪';
}
scoreEl.innerHTML = `あなたの得点は <strong>${score}点</strong> です！<br>${message}`;
}

document.addEventListener('keydown', function(e) {
if (!playing) return;

const key = e.key.toUpperCase();
if (key === currentLetter) {
correctCount++;
resultEl.textContent = '正解！🎉';
} else {
resultEl.textContent = `まちがい…「${currentLetter}」だったよ`;
}

totalCount++;
if (totalCount >= 20) {
playing = false;
questionEl.textContent = 'おしまい';
showEvaluation(correctCount);
} else {
setTimeout(() => {
resultEl.textContent = '';
nextQuestion();
}, 800);
}
});

startBtn.addEventListener('click', function() {
correctCount = 0;
totalCount = 0;
playing = true;
scoreEl.textContent = '';
resultEl.textContent = 'がんばってね！';
nextQuestion();
});
</script>
</body>
</html>

🎉 おまけ：こんなふうにあそべるよ！

  • スタートボタンを押すと、ランダムにアルファベットが出るよ

  • 正しいキーを押すと「正解！」

  • まちがえたら「まちがい…」

  • 20問おわると点数と評価が出るよ！

✏️ 最後に

このゲームは、キーボード練習にもなるし、プログラミングの第一歩としても楽しいよ！
「ひらがなタイピング」や「ことばをつくるゲーム」も作ってみたいなと思ったら、またChatGPTに聞いてみてね♪

コメント

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