<!DOCTYPE>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>坚持100秒</title>  
<!-- 要记得引用jquery-1.4.2.js --> 
<script type="text/javascript" src="jquery-1.4.2.js"></script>  
<script type="text/javascript" >  
    //全局变量   var ctx;
var screenWidth;
var screenHeight;
var backgroundImg = new Image();
var bulletImg  = new Image ();//子弹图片
var bullets = new Array ();//子弹数组
var bulletLazyFps = 0;//子弹延迟//子弹类
//图片对象
var Bullet = function(img){
//子弹的图片
this.img = img;
//X坐标
this.x = 0;
//Y坐标
this.y = 0;
//子弹要飞的x与y的速度
this.arc = {};
//移动的帧数
this.moveFps = 20;
//帧数延迟
this.moveFpsLazy = 0;
//初始化
this.init();
}//子弹的属性
Bullet.prototype = {
//方向数组
arrDir : ['left','right','up','down'],
//初始化
init : function  (){
//最小位置
var min = 0,
//最大位置
max = 780;
//随机位置
rnd = Math.floor(Math.random()*770+10),
//移动方向
dir = this.arrDir[Math.floor(Math.random()*4)];

//设置子弹的初始位置与将要飞的方向与速度
switch(dir){
case 'left':{
this.x = max;
this.y = rnd;
if(this.y>=240)this.arc = {x:-5,y:-2};
else this.arc={x:-5,y:2};
break;
}
case 'right':{
this.x = min;
this.y = rnd;
if(this.y>=240)this.arc = {x:5,y:-2};
else this.arc={x:5,y:2};
break;
}
case 'up':{
this.y = 480;
this.x = rnd;
if(this.x>=max/2)this.arc = {x:-3,y:-5};
else this.arc={x:3,y:-5};
break;
}
case 'down':{
this.y = min;
this.x = rnd;
if(this.x>=max/2)this.arc = {x:-3,y:5};
else this.arc={x:3,y:5};
break;
}
} },





//更新子弹数据
//gameInfo:游戏背景信息
 updata:  function (screenWidth,screenHeight) {
//延迟+10
this.moveFpsLazy += 10;
//判断延迟是否等于移动帧数
if(this.moveFpsLazy == this.moveFps){
//移动
this.x += this.arc.x;
this.y += this.arc.y;
//边界值检测
if(this.x <0 || this.x > screenWidth || this.y <0 || this.y > screenHeight){
this.callback();
return false;
}
//清0
this.moveFpsLazy = 0;
}
    },
//回调函数
callback : function(){}
}
//创建子弹
function CreatBullets (){
var This = this;
//判断延时是否200
if(this.bulletLazyFps == 200){
//创建子弹,添加到数组中
var bullet = new Bullet(this.bulletImg);
bullet.callback = function(){
This.removeBullet(this);
}

this.bullets.push(bullet);
this.bulletLazyFps = 0;
}
else{
this.bulletLazyFps += 10;
}
}









//移除子弹
 function  removeBullet(item){

for(var i=0,l=this.bullets.length;i<l;i++){

if(this.bullets[i] == item){
this.bullets.splice(i,1);
return true;
}
}
}





//绘画子弹
function DrawBullets(){

for(var i=0,l=This.bullets.length;i<l;i++){

var bullet = This.bullets[i];

if(!bullet)continue;
//更新子弹信息
bullet.updata(screenWidth,screenHeight);
//画子弹
ctx.drawImg(bullet.image,This.bullets[i].x,This.bullets[i].y);

}

}
//游戏循环
    function gameLoop(){

ctx.clearRect( 0,0,  screenWidth,  screenHeight);

ctx.save();

ctx.drawImage(backgroundImg,0,0);//绘画背景

DrawBullets();//绘画子弹

ctx.restore();
}//加载图片
     function loadImages(){
 
 backgroundImg.src = "sky.png";//背景图片
 bulletImg.src = "bullet.png";//子弹图片
}//初始化
     $(window).ready(function(){ 

loadImages();//加载图片

ctx = document.getElementById('canvas').getContext('2d');

screenWidth = parseInt($("#canvas").attr("width"));

screenHeight = parseInt($("#canvas").attr("height"));

    CreatBullets ();//创建子弹
this.bulletImg = bulletImg;
setInterval(gameLoop,10);
});
</script>
</head>
<body>
<div id="container" style="border:1px solid ;cusor:none;width:780px;height:480px;">
<canvas id = "canvas" width="780" height="480">
</canvas>
</div>
    <div   class="Copyrights">
     <br />   
     
     </body>
      </html> 在别人的程序的基础上加了点
想要有个在星空背景中随机产生子弹的效果,但是有背景,始终不出子弹,求指导~