JS微信打飞机游戏(二)

这个版本实现飞机发射子弹, 但是子弹飞机界面外没有移走.

/**
 * put script at the bottom of body document.
 * or you should add code as
 * <code>
 *	window.addEventListener("load",function(){
 *	 //todo put your code
 *	});
 *
 *</code>
 */
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");	

var canWidth=mycanvas.width;
var canHeight=mycanvas.height;

//bullets collection
var bulletList = new Array();


/*
 * We will only have one instance player,so create a player object directly.
 *
 */
var player={
	width:20,
	height:20,
	step:5,//when press key,the player will move.
	//here just use Rectangle as Plane,if you have Plane image...
	// then maybe color properties can be removed.
	color:"red",
	position:{
		x:0,
		y:0
	}
};

/*
 * The player display method, and it will show at (x,y).
 */
player.display=function(x,y){
	this.position.x=x;
	this.position.y=y;
	//save the Context status. then restore it,as "ctx.restore" shows
	ctx.save();
	ctx.fillStyle=this.color;
	//here just use Rectangle as Plane,if you have Plane image...
	ctx.fillRect(x,y,this.width,this.height);
	ctx.restore();
}
//The player move method.
player.move=function(dir){
	//Firstly remove it.Then show the new one.
	this.miss();
	switch(dir){
		case "up":
			this.position.y-=this.step;
		break;
		case "down":
			this.position.y+=this.step;
		break;
		case "left":
			this.position.x-=this.step;
		break;
		case "right":
			this.position.x+=this.step;
		break;
		
		
	}
	this.display(this.position.x,this.position.y);
}
//The player remove
player.miss=function(){
	ctx.clearRect(this.position.x,this.position.y,this.width,this.height);
}

//Bullet Class
function Bullet(ctx){
	this.r=2;
	this.color="yellow";
	this.ctx= ctx;
	//a bullet will have it own position
	this.x=0;
	this.y=0;
	//should be set as Bullet Class variable
	this.step=15;
}
/*
 *Every bullet instance will have it own property.
 *But share the prototype function and property. 
 */

//show the Bullet
Bullet.prototype.display = function(x,y){

	this.x=x;
	this.y=y;
	
	this.ctx.save();
	this.ctx.fillStyle=this.color;
	this.ctx.beginPath();
	this.ctx.arc(x,y,this.r,0,2*Math.PI);
	this.ctx.fill();
	this.ctx.closePath();
	this.ctx.restore();
}

//remove the Bullet
Bullet.prototype.miss=function(){
	
	this.ctx.clearRect(this.x-this.r,this.y-this.r,2*this.r,2*this.r);
}
Bullet.prototype.move=function(){
	//firstly remove it
	this.miss();
	this.display(this.x,this.y-this.step);
}


player.fire=function(){
	var b = new Bullet(ctx);
	//let the new bullet will the center of player
	b.display(this.position.x+this.width/2-b.r/2,this.position.y-b.r);
	bulletList.push(b);
}


	
	//display player
	player.display((canWidth-player.width)/2,canHeight-player.height);

	//add window keypress event listener
	//keypress event will trigger the function every 33 millisecond.
	//I do not know, whether it is 33 millisecond in other browser and Java Swing.
	window.addEventListener("keypress",function(e){
		var keyCode=e.keyCode;
		if(keyCode===119){
			//w
			dir="up";
		}else if(keyCode===100){
			//d
			dir="right";
		}else if(keyCode===115){
			//s
			dir="down";
		}else if(keyCode===97){
			//a
			dir="left";

		}
		//pass the dir to move the player.
		player.move(dir);
	});

	
	 
	//player will always fire, and have enough bullet the same as WeChat
	 window.setInterval(function(){
		 //player fire
		 player.fire();
		 //bullets move
		 for(var i=0;i<bulletList.length;i++){
			bulletList[i].move();
		}
		 
	 },100);