【初心者歓迎】JavaScriptで作る超シンプルゲーム - 1時間で完成する3つの実例付き
•
JavaScript
こんにちは、とまだです。
「JavaScriptでゲーム作りたいけど、難しそう...」って思っていませんか？
実は私も最初はそう思っていました。でも、実際にやってみると、たった1時間でシンプルなゲームが作れちゃうんです。
今回は、プログラミング完全初心者でも作れる、一画面完結の超シンプルなゲームを3つご紹介します。コピペで動くコードも用意したので、まずは動かしてみてくださいね。
なぜJavaScript学習にゲーム作りが最適なのか
ゲーム開発で身につく実践的なプログラミングスキル
ゲームを作るって、実はプログラミングの基礎が全部詰まってるんです。
例えば、じゃんけんゲームを作るだけでも：
- 変数（スコアの管理）
- 条件分岐（勝敗の判定）
- 関数（ゲームのリセット）
- イベント処理（クリックの検知）
これらすべてを実践的に学べます。
教科書的な例題より、「自分が作ったゲームが動く」という体験は、学習のモチベーションを格段に上げてくれます。
私がプログラミングスクールで教えていた時も、ゲーム作りの課題になると、みんなの目がキラキラしていました。「こんな簡単に作れるんだ！」って驚く受講生の顔を見るのが、講師としての喜びでしたね。
初心者が挫折しない「小さな成功体験」の積み重ね
プログラミング学習で一番大切なのは、小さな成功体験です。
いきなりRPGを作ろうとしても挫折するだけ。でも、「ボタンを押したら数字が増える」という簡単なものから始めれば、確実に前に進めます。
ゲーム作りの良いところは：
- すぐに結果が見える（視覚的なフィードバック）
- 友達に見せられる（承認欲求を満たせる）
- 改造が楽しい（自分だけのオリジナル要素）
実際、私の受講生でも「カウンターゲームを改造して、クッキークリッカー風にしました！」なんて人もいました。基本を理解すれば、アイデア次第でどんどん発展させられるんです。
1時間で作れる！JavaScriptゲーム3選
【超初級】数当てゲーム - 変数と条件分岐をマスター
まずは一番シンプルな「数当てゲーム」から始めましょう。
コンピュータが1〜10の数字を選んで、プレイヤーが当てるゲームです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>数当てゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
.game-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 400px;
margin: 0 auto;
}
input {
padding: 10px;
font-size: 16px;
margin: 10px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#message {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="game-container">
<h1>🎯 数当てゲーム</h1>
<p>1〜10の数字を当ててみよう！</p>
<input type="number" id="guessInput" min="1" max="10" placeholder="数字を入力">
<button onclick="checkGuess()">答える！</button>
<div id="message"></div>
<button onclick="resetGame()" style="display:none; margin-top:20px; background-color:#2196F3;" id="resetBtn">もう一度遊ぶ</button>
</div>
<script>
// コンピュータが選ぶ数字（1〜10のランダム）
let secretNumber = Math.floor(Math.random() * 10) + 1;
let attempts = 0;
function checkGuess() {
// 入力された数字を取得
const userGuess = parseInt(document.getElementById('guessInput').value);
const messageDiv = document.getElementById('message');
// 試行回数を増やす
attempts++;
// 数字が正しいかチェック
if (userGuess === secretNumber) {
messageDiv.innerHTML = ``;
document.getElementById('resetBtn').style.display = 'inline-block';
} else if (userGuess < secretNumber) {
messageDiv.innerHTML = '<span style="color: blue;">もっと大きい数字です ⬆️</span>';
} else {
messageDiv.innerHTML = '<span style="color: blue;">もっと小さい数字です ⬇️</span>';
}
}
function resetGame() {
// ゲームをリセット
secretNumber = Math.floor(Math.random() * 10) + 1;
attempts = 0;
document.getElementById('guessInput').value = '';
document.getElementById('message').innerHTML = '';
document.getElementById('resetBtn').style.display = 'none';
}
</script>
</body>
</html>
このゲームで学べること：
- 変数の使い方（secretNumber、attempts）
- 条件分岐（if、else if、else）
- DOM操作（画面の更新）
- イベント処理（ボタンクリック）
ポイントは、エラーを恐れないこと。数字以外を入力してもエラーにならないよう、parseIntで変換しています。
【初級】じゃんけんゲーム - 関数とイベント処理を理解
次は定番の「じゃんけんゲーム」です。
画像の代わりに絵文字を使うので、画像ファイルの準備も不要です！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>じゃんけんゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 30px;
background-color: #e8f4f8;
}
.game-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
max-width: 500px;
margin: 0 auto;
}
.choices {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.choice-btn {
font-size: 50px;
padding: 20px;
border: 3px solid #ddd;
border-radius: 15px;
background: white;
cursor: pointer;
transition: all 0.3s;
}
.choice-btn:hover {
transform: scale(1.1);
border-color: #4CAF50;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.result {
font-size: 24px;
margin: 20px 0;
min-height: 30px;
}
.score {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 30px;
font-size: 18px;
}
.win { color: #4CAF50; }
.lose { color: #f44336; }
.draw { color: #ff9800; }
</style>
</head>
<body>
<div class="game-container">
<h1>✊✌️✋ じゃんけんゲーム</h1>
<p>好きな手を選んでね！</p>
<div class="choices">
<button class="choice-btn" onclick="play('グー')">✊</button>
<button class="choice-btn" onclick="play('チョキ')">✌️</button>
<button class="choice-btn" onclick="play('パー')">✋</button>
</div>
<div class="result" id="result"></div>
<div class="score">
<div>勝ち: <span id="wins">0</span></div>
<div>負け: <span id="losses">0</span></div>
<div>引き分け: <span id="draws">0</span></div>
</div>
</div>
<script>
// スコアを記録する変数
let wins = 0;
let losses = 0;
let draws = 0;
function play(playerChoice) {
// コンピュータの手をランダムに決める
const choices = ['グー', 'チョキ', 'パー'];
const computerChoice = choices[Math.floor(Math.random() * 3)];
// 勝敗を判定
let result = '';
if (playerChoice === computerChoice) {
result = 'draw';
draws++;
} else if (
(playerChoice === 'グー' && computerChoice === 'チョキ') ||
(playerChoice === 'チョキ' && computerChoice === 'パー') ||
(playerChoice === 'パー' && computerChoice === 'グー')
) {
result = 'win';
wins++;
} else {
result = 'lose';
losses++;
}
// 結果を表示
showResult(playerChoice, computerChoice, result);
updateScore();
}
function showResult(player, computer, result) {
const resultDiv = document.getElementById('result');
const emoji = {
'グー': '✊',
'チョキ': '✌️',
'パー': '✋'
};
let message = `あなた: ${emoji[player]} vs コンピュータ: ${emoji[computer]}<br>`;
if (result === 'win') {
message += '<span class="win">勝ち！</span>';
} else if (result === 'lose') {
message += '<span class="lose">負け...</span>';
} else {
message += '<span class="draw">引き分け</span>';
}
resultDiv.innerHTML = message;
}
function updateScore() {
document.getElementById('wins').textContent = wins;
document.getElementById('losses').textContent = losses;
document.getElementById('draws').textContent = draws;
}
</script>
</body>
</html>
このゲームの工夫ポイント：
- 配列の活用（choices配列でコンピュータの手を管理）
- 複雑な条件分岐（勝敗判定のロジック）
- 関数の分割（play、showResult、updateScore）
- アニメーション効果（ホバー時の拡大）
【中級】反射神経ゲーム - タイマーと非同期処理入門
最後は少しレベルアップして「反射神経ゲーム」です。
ランダムなタイミングで色が変わるので、素早くクリックするゲームです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>反射神経ゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 30px;
background-color: #f5f5f5;
}
.game-container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
max-width: 600px;
margin: 0 auto;
}
#gameArea {
width: 300px;
height: 300px;
margin: 30px auto;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: white;
}
.waiting {
background-color: #9e9e9e;
}
.ready {
background-color: #f44336;
}
.go {
background-color: #4CAF50;
}
.too-early {
background-color: #ff9800;
}
button {
background-color: #2196F3;
color: white;
padding: 12px 30px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #1976D2;
}
.best-score {
margin-top: 20px;
font-size: 20px;
color: #4CAF50;
}
</style>
</head>
<body>
<div class="game-container">
<h1>⚡ 反射神経ゲーム</h1>
<p>緑色になったら素早くクリック！</p>
<div id="gameArea" class="waiting" onclick="handleClick()">
クリックしてスタート
</div>
<div id="result"></div>
<div class="best-score">
ベストタイム: <span id="bestTime">-</span>
</div>
<button onclick="startGame()">もう一度チャレンジ</button>
</div>
<script>
let gameState = 'waiting'; // waiting, ready, go, too-early
let startTime = 0;
let timeoutId = null;
let bestTime = localStorage.getItem('bestTime') || null;
// ベストタイムを表示
if (bestTime) {
document.getElementById('bestTime').textContent = bestTime + 'ミリ秒';
}
function startGame() {
// ゲームをリセット
clearTimeout(timeoutId);
gameState = 'ready';
const gameArea = document.getElementById('gameArea');
gameArea.className = 'ready';
gameArea.textContent = '待って...';
document.getElementById('result').textContent = '';
// ランダムな時間後に緑色に変える（2〜5秒）
const randomDelay = Math.random() * 3000 + 2000;
timeoutId = setTimeout(() => {
gameState = 'go';
gameArea.className = 'go';
gameArea.textContent = 'クリック！';
startTime = Date.now();
}, randomDelay);
}
function handleClick() {
const gameArea = document.getElementById('gameArea');
const resultDiv = document.getElementById('result');
if (gameState === 'waiting') {
startGame();
} else if (gameState === 'ready') {
// 早すぎるクリック
clearTimeout(timeoutId);
gameState = 'too-early';
gameArea.className = 'too-early';
gameArea.textContent = '早すぎ！';
resultDiv.innerHTML = '<span style="color: #ff9800;">フライングです！</span>';
} else if (gameState === 'go') {
// 反応時間を計算
const reactionTime = Date.now() - startTime;
gameState = 'waiting';
gameArea.className = 'waiting';
gameArea.textContent = 'クリックしてスタート';
resultDiv.innerHTML = ``;
// ベストタイムを更新
if (!bestTime || reactionTime < parseInt(bestTime)) {
bestTime = reactionTime;
localStorage.setItem('bestTime', bestTime);
document.getElementById('bestTime').textContent = bestTime + 'ミリ秒';
resultDiv.innerHTML += '<br><span style="color: #f44336;">新記録！🎉</span>';
}
}
}
</script>
</body>
</html>
このゲームで学べる高度な概念：
- タイマー処理（setTimeout、clearTimeout）
- 非同期処理の基礎（ランダムな遅延）
- 状態管理（gameStateによる制御）
- ローカルストレージ（ベストタイムの保存）
面白いのは、フライング判定も実装していること。これで「待つ」という緊張感が生まれます。
作ったゲームを改造してオリジナル作品に
難易度調整でゲームバランスを考える
ゲーム作りで大切なのはゲームバランスです。
例えば数当てゲームなら：
- 範囲を1〜100に広げる
- ヒントを3回までに制限する
- タイムリミットを追加する
// 難易度設定の例
const difficulty = {
easy: { range: 10, hints: 999 },
normal: { range: 50, hints: 5 },
hard: { range: 100, hints: 3 }
};
プレイヤーが「もう一回！」と思えるような、絶妙な難しさを見つけるのがゲームデザインの醍醐味です。
ビジュアル強化でより魅力的なゲームに
見た目を良くするだけで、ゲームの印象は劇的に変わります。
簡単にできる改善：
- 背景にグラデーションを追加
- アニメーションを増やす
- 効果音を実装する
/* グラデーション背景の例 */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* ボタンのアニメーション */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.button:hover {
animation: pulse 0.5s infinite;
}
スコア機能やランキングでやり込み要素を追加
ゲームにやり込み要素を追加すると、何度も遊びたくなります。
実装アイデア：
- 連勝記録
- タイムアタックモード
- 実績システム
// 実績システムの例
const achievements = {
firstWin: { name: "初勝利", unlocked: false },
tenWins: { name: "10連勝", unlocked: false },
speedDemon: { name: "0.2秒以内", unlocked: false }
};
function checkAchievements() {
if (wins === 1 && !achievements.firstWin.unlocked) {
achievements.firstWin.unlocked = true;
showAchievement("初勝利達成！");
}
}
JavaScript学習を加速させる次のステップ
ゲーム作りから本格的なWeb開発へ
ゲーム作りで基礎が身についたら、次は実用的なWebアプリに挑戦しましょう。
おすすめの次のプロジェクト：
- ToDoリスト（データの保存・削除）
- 電卓アプリ（複雑な計算ロジック）
- タイマーアプリ（時間の管理）
これらのアプリは、実際の仕事でも使えるスキルが身につきます。
もっと体系的に学びたい方は、JavaScript学習完全ガイドも参考にしてみてください。基礎から応用まで、順序立てて解説しています。
フレームワーク学習でさらなる高みへ
JavaScriptの基礎ができたら、フレームワークの世界が待っています。
- React：Facebookが開発、最も人気
- Vue.js：学習しやすく初心者向け
- Next.js：最新のWeb開発手法
私が運営するLearning Next Schoolでは、JavaScriptからReactまで、実践的なカリキュラムを用意しています。
練習問題も1,300問以上あるので、ゲーム感覚で楽しく学習を続けられますよ。
まとめ：今すぐゲーム作りを始めよう！
JavaScriptでゲームを作るのは、思っているよりずっと簡単です。
今回紹介した3つのゲームは、どれも1時間以内で作れます。まずはコピペして動かしてみて、そこから少しずつ改造していけばOKです。
プログラミング学習で大切なのは、楽しみながら続けること。
ゲーム作りは、その最高の方法だと私は信じています。
さあ、今すぐエディタを開いて、あなただけのゲームを作ってみませんか？
きっと「プログラミングって楽しい！」と感じられるはずです。
共有:
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →カテゴリ:JavaScript
← 記事一覧に戻る