HTML5 Canvas 会射子弹的"飞机"

A：发射 左右键移动

 水平移动，并且会射子弹的假飞机

A键：发射

左右键：水平移动 

//获取到Canvas

var canvas = document.getElementById("stage"); 

//2d绘图版

var context = canvas.getContext("2d"); 

//子弹运行的速度

var ballSpeed=3;

//飞机对象

var plane=function(x,y,width,height,rotate,color)

{

//位置

this.x=x;

this.y=y;

//旋转的角度

this.rotate=rotate;

//飞机的颜色

this.color=color;

//飞机的宽高

this.width=width;

this.height=height;

//绘制飞机

this.draw=function()

{

context.beginPath();

context.lineWidth=1;

context.strokeStyle=this.color; 

context.fillStyle = this.color; 

context.moveTo(this.x,this.y);

context.lineTo(this.x-this.width/4,this.y);

context.lineTo(this.x-this.width/4,this.y-this.height/2);

context.lineTo(this.x-this.width/2,this.y-this.height/2);

context.lineTo(this.x,this.y-this.height);

context.lineTo(this.x+this.width/2,this.y-this.height/2);

context.lineTo(this.x+this.width/4,this.y-this.height/2);

context.lineTo(this.x+this.width/4,this.y);

context.lineTo(this.x,this.y);

context.fill();

context.stroke();

context.closePath();

}

     //发射字弹

     this.launch=function()

     {

var b=new ball(this.x,canvas.height-this.height-20,10,"ccc");

b.draw();

balls.push(b);

     }

}

//字弹对象

var ball=function(x,y,radius,color)

{

this.x=x;

this.y=y;

this.radius=radius;

this.color=color;

//绘制字弹

this.draw=function()

{

context.beginPath();

context.strokeStyle = this.color;

context.fillStyle = this.color; 

context.lineWidth = 5; 

context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 

context.fill(); 

context.stroke();

context.closePath();

}

}

//所有子弹的

var balls=[];

//中心点位置

var centerX=canvas.width/2;

var centerY=canvas.height/2;

//飞机的高度，宽度

var planeWidth=40;

var planeHeight=40;

//创建一只飞机

var myPlan=new plane(centerX,canvas.height-20,planeWidth,planeHeight,90,"#ff0000");

//绘制飞机

myPlan.draw();

//添加按键事件

window.addEventListener("keydown",onKeyDown,false);

function onKeyDown(evt)

{

//alert(evt.keyCode);

switch(parseInt(evt.keyCode))

{

//空格

case 38:

//发射

myPlan.launch();

break;

     case 39:

     //飞机右移

     myPlan.x+=5;

     break;

case 37:

     //飞机左移

     myPlan.x-=5;

     break;

}

}

//动画处理

var drawAsync = eval(Jscex.compile("async", function () {

while(true)

{

     //清空画板

context.clearRect(0, 0, canvas.width, canvas.height);

//绘制飞机

myPlan.draw();

//待清空的子弹

var delBall=[];

//绘制子弹

for(var i=0;i<balls.length;i++)

{

balls[i].draw();

//计算角速度

  var rad=myPlan.rotate*Math.PI/180;

  balls[i].x+=Math.cos(rad)*ballSpeed;

  balls[i].y-=Math.sin(rad)*ballSpeed;

//如果求出界了，则要清理

if(balls[i].x>canvas.width || balls[i].x<0 || balls[i].y<0)

{

delBall.push(i);

}

}

//清除出边界的子弹

for(var i=0;i<delBall.length;i++)

{

delBall.splice(i,1);

}

$await(Jscex.Async.sleep(1000/60));

}

}));

drawAsync().start();

 

作者：Louja
出处：http://loujady.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。