「ゲームを作ってみたいけれど、何から始めたらいいかわからない」
そんな初心者の方にぴったりなのが、「闇鍋ゲーム」です。
本記事では、HTML＋CSS＋JavaScriptだけで作れるシンプルだけど楽しいミニゲームを一緒に作成していきます。
完成形のコード付きで、初心者でも安心。JavaScriptの使い方やHTMLの基本的な構造、CSSでのスタイル指定まで、一通りの流れを解説します。
JavaScriptとは？初心者にもやさしい言語
結論：まずJavaScriptでゲーム作りを始めましょう
JavaScriptは、ブラウザ上で動く言語です。
インストールも不要で、HTMLファイルに書くだけで使えるため、初心者にぴったりです。
理由：すぐに画面上で動かせるから
- ブラウザだけで完結
- 視覚的に結果が見える
- 開発環境が簡単に用意できる（例：VSCodeやブラウザのデベロッパーツール）
具体例：HTML内にscriptタグで記述する
<script>
alert("こんにちは、世界！");
</script>
まとめ：プログラミングの楽しさを体感するならJavaScriptが最適
闇鍋ゲームとは？ゲームの概要を知る
結論：中身が分からない鍋からランダムに食材を選ぶゲームです
ルールと目的
- ユーザーがボタンを押すと「鍋の中」からランダムに食材が出る
- 食材には「当たり」も「ハズレ」も含まれる
- 表示は画像またはテキストで行う
こんな人におすすめ
- JavaScriptの
Math.random()やイベント処理を学びたい方 - HTMLの基本を復習したい方
- CSSでレイアウトやアニメーションを学びたい方
HTMLでゲームの土台を作る
結論：HTMLでボタンと表示エリアを用意します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>闇鍋ゲーム</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>闇鍋ゲーム</h1>
<button id="startBtn">鍋からすくう</button>
<div id="resultArea"></div>
<script src="game.js"></script>
</body>
</html>
buttonタグでユーザーの操作を受けるdivタグで結果を表示
CSSで見た目を整える
結論：画面の中心に要素を置き、色や余白を整える
body {
text-align: center;
background-color: #fafafa;
font-family: sans-serif;
padding: 50px;
}
button {
padding: 15px 30px;
font-size: 20px;
cursor: pointer;
}
#resultArea {
margin-top: 30px;
font-size: 24px;
font-weight: bold;
}
ポイント
text-alignやpaddingで配置cursor: pointer;でボタンらしさを演出margin-topで要素間に余白をつける
JavaScriptでランダム処理と表示を実装
結論：配列＋乱数で食材を選び、表示します
const items = ["しいたけ", "チョコレート", "うなぎ", "カエル", "こんにゃく", "カレー"];
const btn = document.getElementById("startBtn");
const resultArea = document.getElementById("resultArea");
btn.addEventListener("click", () => {
const randomIndex = Math.floor(Math.random() * items.length);
const selectedItem = items[randomIndex];
resultArea.textContent = `あなたがすくったのは「${selectedItem}」です！`;
});
ポイント
Math.random()で0〜1未満の数を取得Math.floor()で整数化textContentで表示を変更
躓きやすいエラーと対処法
1. ボタンを押しても何も起きない
- JavaScriptファイルが読み込まれていない
→<script src="game.js">の位置を</body>直前にする
2. コンソールにエラーが出る
- スペルミスが原因なことが多い
→ 例：getElementByid→getElementById
完成形コードのまとめ
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>闇鍋ゲーム</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>闇鍋ゲーム</h1>
<button id="startBtn">鍋からすくう</button>
<div id="resultArea"></div>
<script src="game.js"></script>
</body>
</html>
CSS（style.css）
body {
text-align: center;
background-color: #fafafa;
font-family: sans-serif;
padding: 50px;
}
button {
padding: 15px 30px;
font-size: 20px;
cursor: pointer;
}
#resultArea {
margin-top: 30px;
font-size: 24px;
font-weight: bold;
}
JavaScript（game.js）
const items = ["しいたけ", "チョコレート", "うなぎ", "カエル", "こんにゃく", "カレー"];
const btn = document.getElementById("startBtn");
const resultArea = document.getElementById("resultArea");
btn.addEventListener("click", () => {
const randomIndex = Math.floor(Math.random() * items.length);
const selectedItem = items[randomIndex];
resultArea.textContent = `あなたがすくったのは「${selectedItem}」です！`;
});
まとめ：JSゲームで学ぶ第一歩にぴったり
闇鍋ゲームは、JavaScriptの基本構文やDOM操作を学ぶのにちょうどよい題材です。
楽しみながら作れるので、プログラミング初心者にもおすすめです。
まずはこの記事を真似して作ってみてください。
※本記事は以下の内容に準拠して作成されています：
文部科学省：プログラミング教育に関する資料
https://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1375607.htm
Japanese 
English