#16 JavaScriptでアクションゲームを作る │ お助けアイテム「E缶」！

走れない代わりに、走るゲームを創るプロジェクト、第16回。

今回は、いよいよ

HPを全回復する「E缶」

の登場だ。

バックナンバー

過去のバックナンバー（改訂履歴）は以下のとおり。

• #1　横移動・ジャンプ動作
• #2　敵・ダメージ・スコア
• #3　ジャンプ動作・敵ランダム出現・ゲームオーバー表示
• #4　走る動作・地平線追加・タップして再開
• #5　タップdeスタート・登場シーン・スピードレベル追加
• #6　ダメージ動作
• #7　背景変更
• #8　地面画像変更
• #9　敵キャラ追加
• #10　効果音追加
• #11　背景の追加
• #12　中ボス登場！
• #13　体力ゲージ追加
• #14　3回までダメージOK・ダメージ音追加
• #15　Twitterシェアボタン

本日の成果物

　SOUND　 OFF ON

Tweet

中ボスであるスナイパー・ジョーをかわした後にお助けアイテムとして「E缶」が与えられる、というような設定である。

本日のドット絵

今回はみんな大好き、「E缶」だ。

E缶

点滅するように2パターンの画像を作った。

おそらく均等に点滅ではなく、"E"の文字が点灯している時間が長い気がしたので、「点灯10フレーム→消灯6フレーム」と微妙に点滅間隔を変えてみた。

手前味噌で恐縮だが、参考にしたのはちょうど5年前にクロスステッチにハマっていたときに自作した図案である。

今回、これをアップデートした。

本日のソースコード

※ブログの文字数制限に引っかかるので、一部のみ抜粋

// 当たり判定
	var diffX = characterPosX - enemyPosX;
	var diffY = characterPosY - enemyPosY;
	var distance = Math.sqrt(diffX * diffX + diffY * diffY);
	if (distance < characterR + enemyR) {
		hitFlg = 1;
		// アイテムの場合、回復
		if (enemyImage.src ==　"" || enemyImage.src == ImgArray.Item2_1 || enemyImage.src == ImgArray.Item2_2) {
			enemyImage.src =　"";
			audioItem.play(); // 効果音
			hitPoint = 3;
			gaugeImage.src = ImgArray.gauge3;
		}
		// アイテム以外の場合、ダメージ
		else {		
			hitPoint -= 1;					
			damageCount = 0;
			if (hitPoint == 0) {
				audioOver.play(); // 効果音
				gaugeImage.src = ImgArray.gauge0;
				enemySpeed = 0;
			}

E缶はアイテムではあるが、プログラム上は敵と見なしており、当たったらダメージを受ける代わりに回復するという作りにした。

そのほうがわざわざアイテム用のコードを書き足さなくて済むので、開発効率が良いのである。

全ソースを確認されたい場合は、PCで右クリックして「ページのソースを表示」でご確認ください

本日の参考Web

アイテムをGETしたときの効果音を追加したので、改めて

1. MP3ダウンロード
2. MP3→WAV変換
3. WAV→64bit文字列変換

のおさらいをしておきたい。

フリーMP3

まずは毎度お世話になっているOtoLogicさんから「NES Action01」をダウンロード。

オンラインDAW

次に「AdioMass」で波形編集とMP3→WAV変換する。

64bit文字列

最後に「Base64コマンド」を使ってWAVを文字列化する。

以前、メトロノームを作成したときの方法である。

今後の展望

ダメージを受けても回復できるようになったことでよりゲームっぽくなったんじゃないだろうか。

ただ、難易度が下がりすぎているのでその辺の調整もしていきたい。

走る、を創ろう。