这个版本实现飞机发射子弹, 但是子弹飞机界面外没有移走.
/**
* 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);