射的ゲーム 準備編 (前節までの復習とクリックイベント)

射的ゲームを作ってみよう！

今回からは、これまで学んだHTML、CSS、JavaScriptの知識を使って、本格的な射的ゲームを作っていきます！お祭りの射的のように、動く的をクリックしてスコアを競うゲームです¹。

JavaScriptは現在、Webページ制作に欠かせないプログラミング言語として世界中で広く使われています²。最終的には制限時間やスコア表示がある本格的なゲームになりますが、まずはしっかりと基礎を固めることから始めましょう。

射的ゲーム！お祭りの射的みたいで楽しそう！でも、最初は簡単なところから始めるのが大切だよね。

今回の目標

この回では、射的ゲームの土台となる部分を作ります：

1. 前準備（前の勉強会の復習） - HTMLに要素を追加してCSSで装飾
2. クリックイベントの捕捉 - JavaScriptでクリックを検知
3. 要素の範囲を拡大する - 画面全体をクリック範囲に
4. 的の見た目を整える - 赤い丸い的を画面中央に配置

あれ？いきなりゲームを作るの？ でも、心配しないで！一つ一つ丁寧に進めていくから、きっとできるよ。プログラミングは積み重ねが大切なんだ。

1. 前準備（前の勉強会の復習）

まずは、これまで学んだHTMLとCSSの基礎を使って、簡単な要素を作ってみましょう。

HTML に要素を追加する

HTMLファイルに div 要素を追加します。div は「division（分割）」の略で、特に意味を持たない汎用的な箱のような要素です：

a

HTMLのポイント：

• <div class="rect"></div> で箱を作成
• class="rect" でCSSから指定できるように名前を付ける
• <link rel="stylesheet" href="style.css"> でCSSファイルを読み込み

CSS で色と大きさを付ける

次に、CSSを使って .rect クラスに色と大きさを設定しましょう：

a

おお！赤い四角ができた！これが的の最初の形なんだね。

CSSのポイント：

• width: 100px で横幅を100ピクセルに設定
• height: 100px で高さを100ピクセルに設定
• background-color: red で背景色を赤に設定

実践: 自分で要素を作ってみよう

以下のコメントを参考に、青い長方形を作ってみてください：

a

解答例を見る

<div class="blue-rect"></div>

.blue-rect {
  width: 150px;
  height: 80px;
  background-color: blue;
}

復習のポイント：

• HTMLで要素を作り、CSSで見た目を整える基本の流れ
• クラス名は意味がわかりやすいものを選ぶ
• 横幅と高さを変えることで、様々な形の要素が作れる

2. クリックイベントの捕捉

次に、JavaScriptを使って、要素がクリックされたときに反応するようにしましょう。

JavaScript ファイルを HTML に読み込む

まず、HTMLファイルにJavaScriptファイルを読み込みます：

a

重要なポイント：

• <script src="script.js"></script> は </body> の直前に配置
• これにより、HTMLが完全に読み込まれてからJavaScriptが実行される

要素を取得してクリックイベントを設定

JavaScriptで要素を取得し、クリックイベントを設定します：

a

おお！赤い四角をクリックしたら、 のところに「クリックしました！」って表示されるよ！

JavaScript の重要な概念：

1. 要素の取得: document.querySelector(".rect") で HTML の要素を JavaScript で操作できるようにする³
2. イベントリスナー: addEventListener("click", ...) でクリックを「聞き耳を立てて」待つ⁴
3. コンソール出力: console.log() で開発者ツールに情報を表示して動作確認⁵

実践: クリックイベントを自分で書いてみよう

以下のコメントを参考に、クリックイベントを設定してみてください：

a

解答例を見る

// .my-button 要素を取得
const buttonElement = document.querySelector(".my-button");

// クリックイベントを設定
buttonElement.addEventListener("click", () => {
  console.log("ボタンがクリックされました！");
});

クリックイベントの流れ：

1. document.querySelector() で要素を取得
2. addEventListener() でクリックを待機
3. クリックされたら指定した処理を実行
4. console.log() で動作確認

3. 要素の範囲を拡大する

射的ゲームでは、画面のどこをクリックしても反応するようにしたいので、要素の範囲を画面全体に広げてみましょう。

画面全体に要素を広げる

CSSの vw（viewport width）と vh（viewport height）という単位を使います：

a

わあ！画面全体が濃い青になって、どこをクリックしても反応するようになったよ！

viewport単位の便利さ：

• 100vw = 画面の横幅の100%（画面いっぱいの幅）
• 100vh = 画面の高さの100%（画面いっぱいの高さ）
• 画面サイズが変わっても自動的に調整される
• レスポンシブなデザインに重要

実践: 画面サイズに合わせた要素を作ってみよう

viewport単位を使って、画面の半分のサイズの要素を作ってみてください：

a

解答例を見る

style.css

.half-screen {
  width: 50vw;
  height: 50vh;
  background-color: purple;
  color: white;

  /* 最新のCSS Gridを使った中央寄せ */
  display: grid;
  place-content: center;
}

viewport単位の活用例：

• 25vw = 画面幅の25%（4分の1）
• 75vh = 画面高さの75%（4分の3）
• 100vmin = 画面の縦横のうち小さい方の100%
• 100vmax = 画面の縦横のうち大きい方の100%

4. 的の見た目を整える

いよいよ射的の「的」を作ります！赤い丸い的を画面の中央に配置しましょう。

HTMLに的の要素を追加

まず、ゲームエリア（.rect）の中に的の要素（.target）を追加します：

a

的を丸い形にする

CSSを使って、的を赤い丸にしましょう：

a

おお！赤い丸ができた！でも、画面の左上の角にあるね。これを真ん中に持っていきたいな。

丸い形を作るテクニック：

• border-radius: 50% で角を丸くして円形に
• 正方形（縦横同じサイズ）に border-radius: 50% を適用すると完全な円になる

的を画面中央に配置する

CSS Gridを使って、最もシンプルな方法で的を中央に配置してみましょう：

a

わあ！たった2行で中央寄せができちゃった！ CSS Gridの place-content: center ってすごくシンプルだね！

解説

• display: grid でGridレイアウトを有効化
• place-content: center で水平・垂直の両方向を一度に中央寄せ

Flexboxを使った方法も知っておこう

Flexboxも現在よく使われる中央配置の方法です：

a

モダンCSS Flexboxの特徴：

• display: flex でFlexboxレイアウトを有効化
• align-items: center で子要素を垂直方向に中央寄せ
• justify-content: center で子要素を水平方向に中央寄せ
• 幅広くサポートされており、信頼性が高い

従来の方法（position + transform）も知っておこう

一方で、従来の position と transform を使った中央配置も重要なテクニックです：

a

すごい！赤い丸が画面のど真ん中に来た！この中央配置のテクニック、覚えておくと便利そうだね。

どの方法を使うべき？

• CSS Grid（最推奨）: 最もシンプルで分かりやすく、最新の手法
• Flexbox（推奨）: 安定しており、幅広くサポートされている
• position + transform: より細かい位置制御が必要な場合や、複数の要素を重ねる場合に有効

実践: 的のクリックイベントを設定してみよう

今度は的自体にクリックイベントを設定してみましょう：

a

解答例を見る

script.js

// .target 要素を取得
const targetElement = document.querySelector(".target");

// 的がクリックされたときのイベントを設定
targetElement.addEventListener("click", () => {
  console.log("的に命中しました！");
});

ユーザビリティの改善：

• cursor: pointer でマウスを乗せたときに指のカーソルになる
• クリックできることがユーザーに伝わりやすくなる
• ゲームの操作性が向上する

総合演習: 射的ゲームの基礎を完成させよう

これまで学んだ知識を使って、射的ゲームの基礎部分を完成させてみましょう。 以下の要件を満たすように、コメントを参考にして完成させてください。

要件：

• ゲームエリアは画面全体に広がり、濃い青色の背景
• 的は赤い丸で、画面中央に配置
• 的をクリックすると「命中！」とコンソールに表示
• ゲームエリア（的以外）をクリックすると「外れ」とコンソールに表示
• マウスを的に乗せるとカーソルが指の形になる

a

解答例を見る

index.html

<div class="rect">
  <div class="target"></div>
</div>

style.css

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ゲームエリアのスタイル */
.rect {
  width: 100vw;
  height: 100vh;
  background-color: darkblue;

  /* 最新のCSS Gridで中央配置 */
  display: grid;
  place-content: center;
}

/* 的のスタイル */
.target {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  cursor: pointer;
}

script.js

// ゲームエリア要素を取得
const rectElement = document.querySelector(".rect");

// 的要素を取得
const targetElement = document.querySelector(".target");

// ゲームエリアのクリックイベント（外れの処理）
rectElement.addEventListener("click", () => {
  console.log("外れ");
});

// 的のクリックイベント（命中の処理）
targetElement.addEventListener("click", (event) => {
  console.log("命中！");
  // 親要素（ゲームエリア）のクリックイベントが発火しないように止める
  event.stopPropagation();
});

重要なテクニック：

• CSS Grid中央配置: display: grid + place-content: center（最もシンプル）
• event.stopPropagation(): 親要素へのイベント伝播を止める⁶
• 的をクリックしたときに「外れ」が表示されないようにする
• イベントバブリング（親要素への伝播）を制御する高度なテクニック⁷

まとめ

今回は射的ゲームの基礎となる部分を学びました：

今回学んだこと:

• ✅ HTMLとCSSの基礎復習（要素の作成と装飾）
• ✅ JavaScriptによるクリックイベントの捕捉
• ✅ viewport単位を使った画面全体への要素拡大
• ✅ 最新CSS Grid（place-content: center）を使った中央配置
• ✅ Flexboxやposition + transformによる中央配置の選択肢
• ✅ 的の見た目作り（丸い形と配置）
• ✅ イベントバブリングの制御

基礎がしっかりできた！次回はこの的を動かしたり、スコアをつけたりして、本格的なゲームにしていくんだね。楽しみ！

次回は、この土台を使って的をランダムに動かしたり、スコアをカウントしたりして、本格的な射的ゲームに発展させていきます。

しっかりと基礎を理解して、次のステップに進みましょう！

JavaScript イベント処理 MDNで詳しく学ぶ

CSS Positioning MDNで詳しく学ぶ

CSS Grid Layout MDNで詳しく学ぶ

チェックポイント！

• HTMLに要素を追加し、CSSで装飾できる
• JavaScriptでクリックイベントを設定できる
• viewport単位（vw、vh）を理解して使える
• CSS Grid（place-content: center）で中央配置ができる
• Flexbox や position + transform の中央配置手法を理解している
• border-radius で丸い要素を作れる
• event.stopPropagation() でイベント伝播を制御できる
• コンソールでJavaScriptの動作確認ができる

Footnotes

1. 射的ゲーム実装仕様 ↗ - esa#1049 ↩

2. JavaScriptとは ↗ - esa#1049 ↩

3. JavaScriptでHTMLとCSSを操作する ↗ - esa#1049 ↩

4. HTMLのイベント ↗ - esa#1049 ↩

5. JavaScriptデバッギング ↗ - esa#1049 ↩

6. イベントとJavaScriptを関連付ける方法 ↗ - esa#1049 ↩

7. イベントとJavaScriptを関連付ける方法 ↗ - esa#1049 ↩