JavaScriptでミサイルコマンダーもどきを作ってみました。

　JavaScriptで何か作りたいと思い、とりあえず、昔懐かしい、ミサイルコマンダーもどきを作ってみました。
　せっかくなので、Androidでも動くように、タッチイベントも実装してみました。
　PCはChrome13とIE9、Android（IS01）は標準ブラウザとOpera Mobileで動作確認を行いました。一応、Androidでも動くけれど、標準ブラウザだと重い。Opera Mobileだと、まあ、そこそこ動いてくれる。
　　→プログラムを実行
　また、久しぶりにJsdo.itにも投稿してみました。
　　→Jsdo.it：ミサイルコマンダーもどき

　
JavaScript部分のソースコードは、以下のとおり。

var ctx;
var width=400;
var height=400;
var miss=new Array();
var exp=new Array();
var tmp=new Array();
var radius=60;
var keyframe=10;
var cx;
var cy;
var damage=0;
var score=0;
var shot=0;
var maxDamage=1;
var init=function(){
	var canvas = document.getElementById('canvas');
	ctx=canvas.getContext('2d');
	$('#canvas').mousedown(function(e){
		if(damage < maxDamage){
			var m=new Missile(
				exp,
				width*0.5,height,
				e.pageX-cx,
				e.pageY-cy,1.2,true);
			tmp.push(m);
			shot++;
			$('#shot').text("shot="+shot);
		}
	});
	cx=$('#canvas').position().left;
	cy=$('#canvas').position().top;
	canvas.addEventListener("touchstart", touchDown, false);
	var timer = setInterval('update()', keyframe);
};
var touchDown=function(event){
	if(damage < maxDamage){
		var mx=event.touches[0].pageX-cx;
		var my=event.touches[0].pageY-cy;
		event.preventDefault();
		var m=new Missile(
			exp,
			width*0.5,height,
			mx,
			my,1.2,true);
		tmp.push(m);
		shot++;
		$('#shot').text("shot="+shot);
	}
}
var restart=function(){
	if(damage >= maxDamage){
		document.getElementById("restart").disabled =false;
		score=0;
		shot=0;
		$('#shot').text("shot="+shot);
		$('#score').text("score="+score);
		while(miss.length > 0)miss.pop();
		while(exp.length > 0)exp.pop();
		while(tmp.length > 0)tmp.pop();
		damage=0;
	}
}
var gameover=function(){
	ctx.fillStyle = "#aaaaff";
	ctx.font = "36px 'Courier'";
	ctx.fillText("Game Over", 100, 150);
}
var update=function(){
	if(damage >= maxDamage){
		gameover();
		return;
	}
	ctx.clearRect(0, 0, width,height);
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, width,height);
	if(Math.random() < 0.02){
		var m=new Missile(
			exp,
			Math.random()*width,0,
			Math.random()*width,height,
			0.4*Math.random()+0.2,false);
		miss.push(m);
	}
	var n0=miss.length;
	var n1=exp.length;
	for(var i=0;i < n0;i++){
		for(var j=0;j < n1;j++){
			if(miss[i].isDiff)continue;
			if(miss[i].dist(exp[j]) <= exp[j].r){
				miss[i].expl();
				break;
			}
		}
	}
	for(var i=0;i < n0;i++){
		var obj=miss.shift();
		obj.update(ctx);
		if(obj.alive)miss.push(obj);
	}
	for(var i=0;i < n1;i++){
		var obj=exp.shift();
		obj.update(ctx);
		if(obj.alive)exp.push(obj);
	}
	while(tmp.length > 0)miss.push(tmp.pop());
}
var Missile=function(p,x0,y0,x1,y1,sp,isDiff){
	this.len2=(x1-x0)*(x1-x0)+(y1-y0)*(y1-y0);
	this.parent=p;
	this.x0=x0;
	this.y0=y0;
	this.x=x0;
	this.y=y0;
	var len=Math.sqrt(this.len2);
	this.vx=(x1-x0)/len;
	this.vy=(y1-y0)/len;
	this.isDiff=isDiff;
	this.alive=true;
	this.dist=function(m){
		var xx=(this.x-m.x);
		var yy=(this.y-m.y);
		return Math.sqrt(xx*xx+yy*yy);
	};
	this.expl=function(){
		var expl=new Expl(this.x,this.y,radius);
		this.parent.push(expl);
		this.alive=false;
		if(!isDiff&&this.y < height){
				score++;
				$('#score').text("score="+score);
		}

	};
	this.update=function(c){
		this.x += this.vx * sp;
		this.y += this.vy * sp;
		c.strokeStyle='#ffff00';
		c.beginPath();
		c.moveTo(this.x0, this.y0);
		c.lineTo(this.x, this.y);
		c.closePath();
		c.stroke();
		var len=(this.x-this.x0)*(this.x-this.x0)+(this.y-this.y0)*(this.y-this.y0)
		if(len > this.len2){
			if(this.y >= height)damage++;
			this.expl();
		}
	};
};
var Expl=function(x,y,r){
	this.x=x;
	this.y=y;
	this.mr=r;
	this.r=1;
	this.dr=r/(1000/keyframe);
	this.alive=true;
	this.alpha=0.8;
	this.dist=function(m){
		var xx=(this.x-m.x);
		var yy=(this.y-m.y);
		return Math.sqrt(xx*xx+yy*yy);
	};
	this.update=function(c){
		ctx.globalAlpha=this.alpha;
		this.r =Math.min(this.mr,this.r+this.dr);
		c.fillStyle='#ffff88';
		c.beginPath();
		c.arc(this.x,this.y,this.r,0,2*Math.PI,false);
		c.closePath();
		c.fill();
		if(this.r >= this.mr){
			this.alpha -=0.01;
			if(this.alpha <=0 )this.alive=false;
		}
		ctx.globalAlpha=1.0;
	};
}
google.load('jquery','1.4');
google.setOnLoadCallback(init);

Related posts:

1. パーティクルを使った火山噴火 #js
2. HTML5Canvasで樹木を書いてみる
3. HTML5-Canvasでスカッシュ
4. JavaScriptのデモ。
5. HTML5-Canvasでグラフィクス2