こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回はちょっと趣向を変えて、昔懐かしのファミコン風マリオゲームを、HTML＋CSS＋JavaScriptだけで作る方法を解説します。
「え、ライブラリなしでスクロールアクションって作れるの？」
と思われるかもしれませんが、キャンバス（<canvas>）＋JavaScriptだけでも、意外と本格的な横スクロールゲームが作れちゃうんです。
しかも、今回紹介するコードには「ジャンプ」「敵の踏みつけ」「コイン回収」「ライフ管理」「スコア表示」「ゲームオーバー」など、基本要素がしっかり実装されています。
童心に帰ってプログラミングを楽しんでみてください！
完成イメージ：できることは？
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- プレイヤーが左右に移動・ジャンプ可能
- スクロール対応でマップが横に広がる
- 敵に当たるとライフが減少（踏めば倒せる）
- コインを取るとスコアとカウントがアップ
- ゴールにたどり着くとクリア画面が表示
- Rキーでリスタート可能
見た目はシンプルでも、ゲームの基本要素がギュッと詰まったコード構成になっているのがポイントです。
基本構成：HTML＋CSS＋JavaScript
HTML：キャンバス＋UI表示
ゲームは <canvas> 要素で描画され、スコアやライフ、リスタート案内などが div 要素で表示されます。
<canvas id="gameCanvas" width="800" height="400"></canvas>
<div class="ui">スコア: <span id="score">0</span> ...</div>
<div id="gameOver">ゲームオーバー表示</div>CSS：ドット風デザインで雰囲気アップ
昔のゲームを意識して、背景は空と地面のグラデーション、フォントは等幅（monospace）で設定されています。
ドット絵風に仕上がるよう、レトロなテイストも加味されています。
JavaScript：ゲームロジックの中身
JavaScriptで行っている処理は以下の通りです！
- プレイヤーキャラの物理演算（移動、ジャンプ、重力）
- プラットフォームとの接地判定
- 敵の移動ロジック（左右移動と反転）
- 当たり判定でのライフ減少やスコア加算
- UI表示更新、ゲーム状態管理（gameOver, gameWon）
横スクロール処理のしくみ
ゲームの要である横スクロールは、「カメラ」という概念を導入して実現しています。
gameState.camera.x = player.x - canvas.width / 3;プレイヤーの位置を基準に、画面全体が移動しているように見せているんですね。
プラットフォームや敵、コインの描画位置にもこの camera.x を差し引いて「動いてるように描画」しています。
ゲーム性を高める演出
以下のような細かい演出も用意されていて、ミニゲームとして完成度が高いです。
- 敵に踏まれたら倒されるが、横からぶつかるとダメージ
- ダメージ後は2秒間の無敵時間あり
- コインを集めるとスコアが上がる
- 「ゲームオーバー」や「クリア」画面が表示され、Rキーで再スタート
応用アイデア・改造のヒント
このゲームは拡張性が高い構成なので、ちょっとした工夫でどんどん面白くできます。
- キャラクターのスプライト画像を追加して見た目を強化
- 敵や地形の種類を増やす
- パワーアップアイテムの実装
- スコア保存やランキング機能の追加
- スマホ対応（タップボタンなど）の追加
まとめ
JavaScriptだけでここまで作れるんだ…！と驚いた方も多いかもしれません。
キャンバス描画・当たり判定・UI更新など、ゲーム開発の基礎がぎゅっと詰まったこのコードは、「ゲームを作ってみたい！」という人にぴったりの学習教材になります。
もちろん、Web制作者としても、遊び心あるページ演出や学習コンテンツとして活用できます。
まずはこのマリオ風ゲームをベースに、あなたらしいアレンジを加えてみてはいかがでしょうか？
satokotadesignキャンペーン実施中！
