JavaScriptで闇鍋ゲームを作ってみた（HTML＋CSS付き）

プログラミング

「ゲームを作ってみたいけれど、何から始めたらいいかわからない」
そんな初心者の方にぴったりなのが、「闇鍋ゲーム」です。
本記事では、HTML＋CSS＋JavaScriptだけで作れるシンプルだけど楽しいミニゲームを一緒に作成していきます。

完成形のコード付きで、初心者でも安心。JavaScriptの使い方やHTMLの基本的な構造、CSSでのスタイル指定まで、一通りの流れを解説します。

JavaScriptとは？初心者にもやさしい言語

結論：まずJavaScriptでゲーム作りを始めましょう

JavaScriptは、ブラウザ上で動く言語です。
インストールも不要で、HTMLファイルに書くだけで使えるため、初心者にぴったりです。

理由：すぐに画面上で動かせるから

  • ブラウザだけで完結
  • 視覚的に結果が見える
  • 開発環境が簡単に用意できる（例：VSCodeやブラウザのデベロッパーツール）

具体例：HTML内にscriptタグで記述する

1
2
3
<script>
  alert("こんにちは、世界！");
</script>

まとめ：プログラミングの楽しさを体感するならJavaScriptが最適

闇鍋ゲームとは？ゲームの概要を知る

結論：中身が分からない鍋からランダムに食材を選ぶゲームです

ルールと目的

  • ユーザーがボタンを押すと「鍋の中」からランダムに食材が出る
  • 食材には「当たり」も「ハズレ」も含まれる
  • 表示は画像またはテキストで行う

こんな人におすすめ

  • JavaScriptのMath.random()やイベント処理を学びたい方
  • HTMLの基本を復習したい方
  • CSSでレイアウトやアニメーションを学びたい方

HTMLでゲームの土台を作る

結論：HTMLでボタンと表示エリアを用意します

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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で見た目を整える

結論：画面の中心に要素を置き、色や余白を整える

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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でランダム処理と表示を実装

結論：配列＋乱数で食材を選び、表示します

1
2
3
4
5
6
7
8
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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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）

1
2
3
4
5
6
7
8
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

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