はじめに｜HTML・CSS・JavaScriptでゲーム制作ってできるの？
こんにちは、ぷろぐらの森です🌱
今回は、初めてでも楽しく作れる「ランニングゲーム」の作り方をご紹介します。
プログラミングが初めての方でも、HTML・CSS・JavaScriptを使えば、ブラウザ上で動くゲームを自分で作れます。
「どうやってキャラクターが走るの？」「どうやって障害物を避けるの？」
そんな疑問も、この記事を読み進めればスッキリ！
目次
1. ゲームの完成イメージ
今回作るのは、下記のようなシンプルなゲームです。
- 主人公（四角）が右に向かって走り続ける
- ジャンプで障害物をよける
- 障害物にぶつかったらゲームオーバー！
※スマホ対応はしていませんが、PCのブラウザで動作します。
2. ゲーム制作に必要なもの
- パソコン（Windows / Mac どちらでもOK）
- インターネットブラウザ（Google Chrome推奨）
- コードを書くエディタ（Visual Studio Code など）
- ファイル保存のための任意のフォルダ
3. HTML：ゲームの土台を作ろう
まずは、index.html ファイルを作成し、以下のように書いてみましょう：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ランゲーム</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="game">
<div id="character"></div>
<div id="obstacle"></div>
</div>
<p id="message">ジャンプでよけてね！</p>
<script src="script.js"></script>
</body>
</html>✔ ポイント解説：
#gameの中にキャラと障害物を入れています。#messageはゲーム中のメッセージ表示用です。- <link rel=”stylesheet” href=”style.css” />
この1行があることで、HTMLとCSSがつながり、ページのデザインが反映されるようになります✨
4. CSS：見た目を整えよう
次に、style.css を作成して以下のコードを入れましょう。
#game {
position: relative;
width: 100%;
height: 300px;
background: #a7ffeb;
overflow: hidden;
}
/* ページ全体の設定 */
body {
background-color: #e0f7fa; /* 背景を水色に */
font-family: "Arial", sans-serif; /* 文字の種類 */
text-align: center; /* 中央寄せ */
}
/* キャラクターの見た目 */
#character {
width: 50px; /* 幅50ピクセル */
height: 50px; /* 高さ50ピクセル */
background: #ff8a65; /* キャラの色（オレンジ） */
position: absolute; /* 位置を自由に設定 */
bottom: 0; /* 下にくっつける */
left: 100px; /* 左から100pxの位置に */
}
/* 障害物の見た目 */
#obstacle {
width: 40px;
height: 40px;
background: #d50000; /* 赤色のブロック */
position: absolute;
bottom: 0;
right: -60px; /* 最初は画面の外から登場 */
}
/* メッセージ部分 */
#message {
font-size: 20px;
margin-top: 20px;
color: #333;
}
@keyframes moveObstacle {
0% {
right: -60px;
}
100% {
right: 100%;
}
}
#obstacle {
animation: moveObstacle 2s linear infinite;
}✔ 補足：
- キャラや障害物の色やサイズは自由に変更OK。
position: absoluteで画面内の位置を指定しています。
5. JavaScript：キャラクターを動かそう
次は、script.js を作成して以下のコードを追加します。
const character = document.getElementById("character");
const obstacle = document.getElementById("obstacle");
let jumping = false;
document.addEventListener("mousedown", function () {
if (!jumping) {
jumping = true;
character.style.bottom = "150px";
setTimeout(() => {
character.style.bottom = "0";
jumping = false;
}, 500);
}
});
setInterval(() => {
const charRect = character.getBoundingClientRect();
const obsRect = obstacle.getBoundingClientRect();
if (
obsRect.left < charRect.right &&
obsRect.right > charRect.left &&
obsRect.top < charRect.bottom &&
obsRect.bottom > charRect.top
) {
alert("ゲームオーバー！");
location.reload();
}
}, 10);✔ ポイント：
- マウスクリックでジャンプ！（mousedownイベント）
- 一定時間ごとにキャラと障害物の位置をチェック
- 当たり判定でゲームオーバーにします
6. 発展編：スコア機能をつけてみよう（任意）
以下のようなコードを追加すればスコア機能も実装可能です：
<p id="score">スコア: 0</p>
let score = 0;
setInterval(() => {
score++;
document.getElementById("score").textContent = "スコア: " + score;
}, 1000);- 時間が経つごとにスコアが増えるだけの簡単な仕組みです。
- もちろん「障害物をよけた数」などで計算してもOK！
最終ゲーム画面イメージ
🔍 よくある質問（初心者あるある）
Q1：色は英語じゃないとダメ？
→ いいえ！
英語（redやblue）でも、16進数（#ff0000）でもOKです。
初心者には # から始まる色コードがオススメです。
Q2：位置ってどう決めてるの？
→ position: absolute を使うと、親要素の中で自由に配置できます。
たとえば left: 100px は「左から100pxの位置に置く」という意味です。
Q3：文字の大きさはどう変える？
→ font-size を使います。
例：font-size: 20px; → 文字の大きさが20ピクセルになります！
🎨 自由にアレンジしてみよう！
CSSを変えるだけで、ゲームの印象が大きく変わります！
たとえば：
- 背景色を変える →
background-color: #fce4ec;（ピンク系） - キャラを丸くする →
border-radius: 50%; - フチをつける →
border: 2px solid black;
7. まとめ｜自分だけのゲームを作ってみよう！
今回はHTML・CSS・JavaScriptを使って、ランニングゲームを作ってみました。
これができれば、少しずつ改造してオリジナルのゲームを作ることも可能です！
たとえば：
- キャラクターの画像を追加
- 障害物をランダムに出す
- スマホ操作に対応
- BGMや効果音を追加
など、発展の幅は無限大です！
コメント