9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

素のJavaScriptでアクションゲームを作ってみた

Posted at

はじめに

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

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

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

どんなゲームか

概要

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

操作説明(クリックでもタップでも同じです)

・基本

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

・壁張り付き時

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

画面.png

実装について

描画処理

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

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

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

地形について

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

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

終わりに

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

9
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?