代码改变世界

HTML5 Canvas 会射子弹的"飞机"

2011-12-08 15:39 by LoujaDy, ... 阅读, ... 评论, 收藏, 编辑
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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。