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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。