はじめに

完全に素のJavaScriptで、アクションゲームを作ってみました。
（素というのは、jQuery等ライブラリを使用していないということです）
作ったのは去年なのですが、今更ながら紹介しようと思い立ち、記事にしました。

ゲーム本体
https://holothuria.github.io/js_game/src/

実装
https://github.com/holothuria/js_game/tree/master/src

どんなゲームか

概要

主人公をジャンプさせてゴールに辿り着く、という、ただそれだけのゲームです。
（縦スクロール）

操作説明（クリックでもタップでも同じです）

・基本

画面右半分をクリック：右側にジャンプ
画面左半分をクリック：左側にジャンプ
※空中では基本1回だけ空中ジャンプが可能

・壁張り付き時

壁側の画面半分をクリック長押し：壁登り
壁と逆側の画面半分をクリック：壁キック

実装について

描画処理

描画は、htmlのcanvas要素を利用し、JavaScript側で描画しています。
canvas要素を重ね合わせ、レイヤー上にすることで、地形の描画と主人公の描画を分けています。

基本的に、常に描画し直したりはせず、変化があったところのみ描画し直すようにしています。
ただ、主人公は動き続けるので、45ミリ秒間隔で周辺のcanvas要素をクリアし、現在地に描画し直しています。

地形は、主人公が進んだ際に、描画し直します。
現在のcanvas要素全体を画像として取得し、取得した地形画像を下にずらしてcanvas要素に貼りなおします。
その結果上に空いた余剰スペースに、新たに見えるようになった地形を描画するようにしています。
ちなみに、下にずらした一番下の行は、canvas要素からはみ出た場所に貼られることになるので、勝手に消えます。

地形について

地形は、2重配列で持っています。
何もなければ0、壁なら1、という感じです。

また、特殊な地形に触れた場合、特定のメソッドが呼ばれるようになっています。
それによって、棘に触れたらゲームオーバー的処理や、ブロックによっては大ジャンプ、みたいな処理を実現しています。

終わりに

大したことのないゲームなので、ルールも実装も説明するような点もあまりありません。
暇つぶしにすらならない気がしますが、あまりにも暇な人がいらっしゃれば、ぜひやってみてください。
ただ、なぜか壁抜けバグ等が発生することがあり、突然予測不能な動きをするかもしれません。ご了承ください。