はじめに｜プログラミングでゲームって作れるの？
こんにちは、「ぷろぐらの森」です🌱
これまでの記事では、HTMLとCSSを使って自己紹介ページを作ったり、ページに動きをつけたりしてきました。
今回はその続きとして、HTMLとCSSとほんの少しのJavaScriptで作れる「とっても簡単なゲーム」に挑戦してみましょう！
え？ゲームってJavaScriptとかむずかしいのでは？と思った方もご安心ください。
今回は、初学者でも取り組めるように簡単なタッチゲーム風の作品を作っていきます！
こんなゲームを作ります！
👆 マウスを使って「タッチしてね」ボックスを探してクリック！
- ページ上にたくさんのボックスが表示されます
- そのうち1つだけが「当たり」
- マウスをのせると色が変わる＝ヒント！
- クリックすると「おめでとう！」と表示される
ゲーム性はとてもシンプル。でも、HTMLとCSSとほんの少しのJavaScriptでこれが実現できちゃうんです！
使用する技術（難しい言葉はなし！）
今回使うのは、以下の要素だけ：
- HTMLの
<div>（ボックス） - CSSの
hover（マウスをのせる） - CSSの
display,visibility,position - JavaScriptの
click(クリック)
ステップ1｜HTMLの土台を作る
まずは、HTMLでゲーム画面の「ボックス」を並べてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タッチゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タッチして当ててみよう！</h1>
<div class="game">
<div class="box"></div>
<div class="box"></div>
<div class="box hit"></div> <!-- 当たりのボックス -->
<div class="box"></div>
<div class="box"></div>
</div>
<p class="message">おめでとう！</p>
</body>
</html>ポイント：
.box… ゲーム内のボックス.hit… 当たりのボックス（CSSで特別に指定します）.message… 正解したときに表示するメッセージ（初めは非表示）
ステップ2｜CSSでゲームデザインとロジック
次に、CSSを使ってボックスの見た目と動きを作ります。
body {
font-family: sans-serif;
text-align: center;
margin-top: 50px;
}
.game {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.box {
width: 80px;
height: 80px;
background-color: lightgray;
cursor: pointer;
transition: background-color 0.3s;
}
.box:hover {
background-color: lightskyblue;
}
/* メッセージは最初は非表示 */
.message {
visibility: hidden;
color: red;
font-size: 24px;
font-weight: bold;
}ステップ３｜JavaScriptでクリックの判定をつける
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>タッチゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タッチして当ててみよう！</h1>
<div class="game">
<div class="box"></div>
<div class="box"></div>
<div class="box hit"></div> <!-- 当たりのボックス -->
<div class="box"></div>
<div class="box"></div>
</div>
<p class="message">おめでとう！</p>
/* ステップ３：当たりのボックスをクリックしたときの動き */
<script>
document.querySelector('.hit').addEventListener('click', function () {
document.querySelector('.message').style.visibility = 'visible';
});
</script>
</body>
</html>解説｜ゲームっぽく見せる工夫
.box:hoverで色が変わる → 「ここかも？」と探すヒントに
🔹 ステップ1：HTMLの土台を作る — 見た目のパーツを用意しよう！
HTMLでは、Webページの「中身」や「構造」を作る役割を持ちます。
ゲームの場合は、画面に表示するボタンや四角いボックスをHTMLで準備します。
以下のコードでは、5つのボックスを並べています。
<div class="game">
<div class="box"></div>
<div class="box"></div>
<div class="box hit"></div> <!-- 当たりのボックス -->
<div class="box"></div>
<div class="box"></div>
</div><div class="box">… 1つ1つの「マス（ボックス）」を作っています。class="box"は「これは box という種類だよ」と CSS に伝えるための目印です。class="box hit"のように複数のクラス名を書くことで、特別な見た目（今回は当たり）を指定できます。
🔹 ステップ2：CSSでデザインと「当たり」の動きをつける
CSSは、Webページに色や動きなどの装飾をする役目があります。
今回は、次のような見た目と「動き」を加えています：
✅ 基本のスタイル設定
.box {
width: 80px;
height: 80px;
background-color: lightgray;
cursor: pointer;
}widthとheightでボックスの大きさを指定。background-colorで背景色を設定。cursor: pointer;でマウスを当てると「指マーク」が出て、クリックできることがわかります。
✅ ホバーで色を変える（当たり判定のヒント）
.box:hover {
background-color: lightskyblue;
}:hoverは「マウスをのせたとき」の動作。- ホバーで色を変えることで、「あ、ここ何かあるかも」と気づけます。
✅ メッセージは最初は見えないようにしておく
.message {
visibility: hidden;
}- 最初は
.messageを「見えない（hidden）」にしておきます。 hitにマウスを乗せた時だけ表示されるので、「当たり」を引き当てた演出ができます。
🔸 ステップ３：JavaScriptで「クリックで表示」の動きをつける
<script>
document.querySelector('.hit').addEventListener('click', function () {
document.querySelector('.message').style.visibility = 'visible';
});
</script>このスクリプトは、「当たりのマスをクリックしたら“おめでとう！”と表示されるようにしたい」
という仕組みをJavaScriptで作っています。
✅ document.querySelector('.hit')
簡単に言うと…
画面（document）の中から、「.hit」というクラスを持つ要素を1つ探してくる
documentは「今表示されているページ全体」を意味します。querySelector()は、HTMLの中から特定の場所を探す命令。.hitは「class=”box hit”の”hit”」のこと。ドット（.）をつけることで「クラス名」として指定しています。
➡️ 「当たりのボックス（.hit）を探す」という意味。
✅ .addEventListener(‘click’, function () { … });
簡単に言うと…
「クリックされたら、{ }の中を実行してね！」と命令をつける
addEventListenerは、「イベント（クリックやキー入力など）」を待ち受ける命令です。'click'は、「クリックされたとき」というイベントの種類。function () { ... }は、「クリックされたときに実行する内容（処理）」を中に書く。
➡️ 「ボックスがクリックされたら、何かの処理を行う」という設定です。
✅ document.querySelector(‘.message’).style.visibility = ‘visible’;
簡単に言うと…
「.message（メッセージ部分）を表示させてね」
- さっきと同じように、
.messageというクラスを持ったHTML要素を探します。 .style.visibilityは「見えるかどうかの設定」。= 'visible'にすることで「見えるようにする」という意味になります。
➡️ つまり、「隠れていたメッセージを表示させる」命令です。
もっと遊びたい！応用編
✅ ランダム性を加えるには？
HTMLとCSSだけでは「ランダム表示」は難しいので、これ以上を目指す場合はJavaScriptを本格的に導入します。
でも、最初は「静的なゲーム」からスタートするのが正解！
まとめ｜HTMLとCSSでもゲームは作れる！
今回は「HTMLとCSSだけでできる簡単なゲーム」を紹介しました。
本格的なゲーム開発はJavaScriptやゲームエンジンが必要ですが、
最初の一歩として、遊びながら“仕組み”を理解するにはぴったりです。
コメント