第21回【シューティング制作.1】


まずは動画を見てくださいね!
JavaScriptでシューティング制作です!
まずは、完成品は[コチラ]です!
何気に楽しいので(?)一度遊んでみてください!
これを改めて皆様と一緒に1から作り直していきます!!

改めてHTMLから書きます

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<canvas id="can"></canvas>
<script src="main.js"></script>
</body>
</html>
今回はこのHTMLの中に書かずに別ファイルのmain.jsにプログラムを書いていきます。


main.jsにプログラムを書いていきます

今回はまずは背景・・・星を描く所から始めます。
//画面サイズ
const SCREEN_W = 180;
const SCREEN_H = 320;

//キャンバスサイズ
const CANVAS_W = SCREEN_W *2;
const CANVAS_H = SCREEN_H *2;

//フィールドサイズ
const FIELD_W = SCREEN_W *2;
const FIELD_H = SCREEN_H *2;

画面サイズ、フィールドサイズ、キャンバスサイズの大きさを定義しました。
フィールド・・・サッカー場
スクリーン・・・カメラがとらえてる所
キャンバス・・・みなさまのテレビ画面
と考えてください。
縦スクロールシューティングなのでフィールドが縦に長いと考えがちですけど、実は上に向かって動いてるわけではないんですよ。
ただ、フィールドを上から下に流れてるので、縦長と感じるだけで、実際はスクロールの関係上フィールドはちょっと横長にしたりします。


キャンバスを作ります。
//キャンバス
let can = document.getElementById("can");
let con = can.getContext("2d");
can.width  = CANVAS_W;
can.height = CANVAS_H;
キャンバスのエレメントを取ってそこからコンテキストを取得。
さらにキャンバスのサイズを設定しています。
テトリスの時のおさらいです!

星のクラスを作ります

今回はクラスをたくさん使って組んでいきます。
同時に乱数作成関数を作っています。
//整数の乱数を取得
function rand(min,max)
{
	return Math.floor( Math.random()*(max-min+1) )+min;
}

//星クラス
class Star
{
	constructor()
	{
		this.x  = rand(0,FIELD_W)<<8;
		this.y  = rand(0,FIELD_H)<<8;
		this.vx = 0;
		this.vy = rand(30,500);
		this.sz = rand(1,2);
	}
	
	draw()
	{
		let x=this.x>>8;
		let y=this.y>>8;
		
		vcon.fillStyle=(rand(0,2)!=0)?"#66f":"#8af";
		vcon.fillRect(x,y,this.sz,this.sz);
	}
	
	update()
	{
		this.x += this.vx;
		this.y += this.vy;
		if( this.y>FIELD_H<<8 )
		{
			this.y=0;
			this.x=rand(0,FIELD_W)<<8;
		}
	}
	
}
星には座標(x,y)、ベクトル(vx,vy)、サイズの合計5個のプロパティと、描画(draw)と更新(update)の2個のメソッドを持たせました。

シフト演算の話ですが・・・「<<8」で256倍して、「>>8」で1/256にしています。
少数を使ったり、掛け算割り算を使うより高速なのでよく使います(もしかしたら最近はやらないかもしれません)

drawメソッドで、自身をコンテキストに描画します。
updateメソッドで、自身の座標に自身の移動量を加算し、画面外に出た時は改めて一番上に座標を変えています。

//星の数
const STAR_MAX =300;
...
//星の実体
let star=[];
for(let i=0;i<STAR_MAX;i++)star[i]= new Star();
これで星を実体化します。
次に、描画します。
vcon.fillStyle="black";
vcon.fillRect(0,0,SCREEN_W,SCREEN_H);

for(let i=0;i<STAR_MAX;i++)star[i].draw();
黒でスクリーンをクリアしてから、星の数だけdrawメソッドを呼び出します。
これで星が描画できました。

続きます...





akichon/あきちょん
Youtubeでプログラミング講座やってるゲーム好きの(元?)プログラマ...
>>open profile...
■Twitter始めました
https://twitter.com/ak1chon
■Youtubeチャンネルはこちら
akichon(Youtube)