ゲーム製作でHTML5-Canvasを勉強するぞ!!の最近のブログ記事

シューティングといえばレーザー!!

12-1.png レーザーの表現は、昔は細い線一本でしたが、今では極太レーザーやホーミングでクネクネするものなど、いろいろあります。
どうせ作るなら一本線だとつまらないので、ホーミングレーザーを作ってみます。

そろそろ自機にもあたり判定を

自機がダメージを受けた場合の効果としては、爆発して機数が減ったり、体力が減ったりいろいろなパターンがあります。
今回は後者の体力が減るパターンにしたいと思います。

今回も演出関連です。

10.png ゲームを作るうえで重要なことは、プレーヤーの作業に対して見返りを与えるということだと思います。
別に金銭的な見返りというわけではありません。
RPGならモンスターを倒すという作業を行えば、経験値、アイテムなどがもらえますね、それが見返りです。
シューティングでもいろいろあると思いますが、最も初歩的なところ「敵を倒したぞ!!」という印象・達成感?を与えるために、爆発アニメーションを作ります。

9.png 背景をつけたのにキャラが三角のままというのバランスが悪いので絵に変えようと思います。

だいぶゲームらしくなってきましたが、何か忘れている気がします。
弾幕シューティングにしようと思っていたのに、敵の弾がない!!

7.png

いい加減、黒い背景に三角のキャラにも飽きてきました。
今回は背景をかっこよくしたいと思います。

シューティングゲームといえば宇宙!!(え?、宇宙といえば星!!(え?
ということで、背景はでっかい星にします。

6.png みなさん、極座標というのはご存知ですか。
点の位置はx座標とy座標であらわすことが多いと思いますが、これは直交座標です。
これに対し極座標と言うのは原点からの方向(角度)と距離で位置を表します。
ゲームでの使いどころとしては、シューティングゲームの弾の移動増分などですかね。
極座標であれば、移動速度(距離)を一定にしていろいろな方向(角度)に動かすことが簡単になります。

5.png 今回は、前回よりもさらにCanvasと関係ない、敵と自機弾との衝突判定を実装します。
衝突判定の方法はいろいろあると思います。

canvas004.png

今回はシューティングに必要不可欠な自機弾と敵を作ります。
自機弾はオート連射、敵は上から下に突進するという仕様で作りたいと思います。

今回はCanvasとは関係しない、ゲーム作りに関する部分を作ろうと思います。

まず、自機の操作方法ですが、すごく簡単なつくりにしようと思います。
決して手抜きではありません。!!
マウスボタンが押されていないとき自機は常に左方向に移動し続け、マウスボタンが押されると右方向に移動することにします。
canvas003.png

オリジナルゲーム

オンラインツール