碰撞检测后显示精灵

所以当我拍摄敌人时，它们会从屏幕上消失，这是有效的。碰撞检测后显示精灵

但是我想要发生的是我想发生爆炸（4个PNG一个接一个）基本上是敌人在哪里。爆炸的代码可以自行工作，但我试图将其与我的代码集成在一起。

这里是爆炸类，你可以看到我有一些间歇的麻烦，因为我没有经验。我认为错误或错误的逻辑在于这个对象。

而且由于某种原因，湿巾等帆布层：/ 这里试试：http://www.taffatech.com/DarkOrbit.html

function Explosion() 
{ 
this.srcX = 0; 
this.srcY = 1250; 
this.drawX = 0; 
this.drawY = 0; 
this.width = 70; 
this.height = 70; 
this.currentFrame =0; 
this.totalFrames =5; 
this.hasHit = false; 
} 

Explosion.prototype.draw = function() //makes it last 10 frames using total frames 
{ 

if(this.currentFrame <= this.totalFrames) 
{ 

    this.currentFrame++; 
    Exploder(this.drawX,this.drawY); 
} 

else 
{ 
    this.hasHit = false; 
    currentFrame =0; 

} 

} 


function Exploder(srcX,srcY) 
{ 
    whereX = this.srcX; 
    whereY = this.srcY; 
intervalT = setInterval(BulletExplosionAnimate, 80); 
} 

var bulletExplosionStart = 0; 
var whereX =0; 
var whereY =0; 

function BulletExplosionAnimate(intervalT) 
{ 


var wide = 70; 
var high = 70; 

if (bulletExplosionStart > 308) 
{ 
    bulletExplosionStart = 0; 
clearInterval(intervalT); 
} 
else 
{ 
ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight) 
ctxExplosion.drawImage(spriteImage,bulletExplosionStart,1250,wide,high,whereX,whereY,wide,high); 
bulletExplosionStart += 77; 
} 


}

我的子弹对象：

function Bullet() //space weapon uses this 
{ 
this.srcX = 0; 
this.srcY = 1240; 
this.drawX = -20; 
this.drawY = 0; 
this.width = 11; 
this.height = 4; 
this.bulletSpeed = 10; 
this.bulletReset = -20; 

this.explosion = new Explosion(); 
} 

Bullet.prototype.draw = function() 
{ 

this.drawX += this.bulletSpeed; 
ctxPlayer.drawImage(spriteImage,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height); 
this.checkHitEnemy(); 

if (this.drawX > canvasWidth) 
    { 
    this.recycle(); 

    } 

} 

Bullet.prototype.fire = function(startX, startY) 
{ 

    this.drawX = startX; 
    this.drawY = startY; 

} 

Bullet.prototype.checkHitEnemy = function() 
{ 

    for(var i = 0; i < enemies.length; i++) 
    { 
     if(this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].enemyWidth && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].enemyHeight) 
     { 

     this.explosion.drawX = enemies[i].drawX - (this.explosion.width/2); 
     this.explosion.drawY = enemies[i].drawY; 

     this.explosion.hasHit = true; 
     this.recycle(); //bullet resets after hit enemy 
     enemies[i].recycleEnemy(); //change this soon to have if loop if health is down 
     } 


    } 

} 


Bullet.prototype.recycle = function() 
{ 

    this.drawX = this.bulletReset; 

}

在我的播放器对象我有一个功能检查如果它已经击中敌人，它的作品：

Player.prototype.drawAllBullets = function() 
{ 

    for(var i = 0; i < this.bullets.length; i++) 
    { 
    if(this.bullets[i].drawX >= 0) 
    { 

     this.bullets[i].draw(); 

    } 

    if(this.bullets[i].explosion.hasHit) 
    { 
    this.bullets[i].explosion.draw(); 
    } 

    } 
}

当我射击敌人时他们消失但不会爆炸发生，我知道我的间隔编码不是很好，所以我需要一些帮助，谢谢！

来源

2013-06-05 Barney

打在画布spritesheet

这已经成为最佳实践使用requestAnimationFrame做你的动画。它做了一些不错的事件分组和提升性能。这里有一个关于requestAnimationFrame好的帖子：http://creativejs.com/resources/requestanimationframe/

这是你如何使用requestAnimationFrame发挥spritesheet：

在这种情况下，这是一个4×4 spritesheet将超过1秒播放：

var fps = 16; 
function explode() { 

    // are we done? ... if so, we're outta here 
    if(spriteIndex>15){return;} 

    // It's good practice to use requestAnimation frame 
    // We wrap it in setTimeout because we want timed frames 
    setTimeout(function() { 

     // queue up the next frame 
     requestAnimFrame(explode); 

     // Draw the current frame 
     var x=spriteIndex%(cols-1)*width; 
     var y=parseInt(spriteIndex/(rows-1))*height; 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(sheet,x,y,width,height,0,0,width,height); 

     // increment the sprite counter 
     spriteIndex++; 
    }, 1000/fps); 

}

这里是代码和小提琴：http://jsfiddle.net/m1erickson/nSGyx/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

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

     // This is Paul Irish's great cross browser shim for requestAnimationFrame 
     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
      function(callback) { 
      window.setTimeout(callback, 1000/60); 
      }; 
     })(); 

     // define the spritesheet 
     var spriteIndex=0; 
     var width=64; 
     var height=64; 
     var rows=4; 
     var cols=4; 

     // load the sheet image 
     var sheet=document.createElement("img"); 
     sheet.onload=function(){ 
      canvas.width=width; 
      canvas.height=height; 
      // call the animation 
      explode(); 
     } 
     sheet.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/explodeSprite.png"; 


     var fps = 16; 
     function explode() { 

      // are we done? ... if so, we're outta here 
      if(spriteIndex>15){return;} 

      // It's good practice to use requestAnimation frame 
      // We wrap it in setTimeout because we want timed frames 
      setTimeout(function() { 

       // queue up the next frame 
       requestAnimFrame(explode); 

       // Draw the current frame 
       var x=spriteIndex%(cols-1)*width; 
       var y=parseInt(spriteIndex/(rows-1))*height; 
       ctx.clearRect(0,0,canvas.width,canvas.height); 
       ctx.drawImage(sheet,x,y,width,height,0,0,width,height); 

       // increment the sprite counter 
       spriteIndex++; 
      }, 1000/fps); 

     } 

     $("#explode").click(function(){ spriteIndex=0; explode(); }); 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=64 height=64></canvas><br> 
    <button id="explode">Explode</button> 
</body> 
</html>

。。。

[编辑以显示动画如何融入你的代码详情]

这是你的爆炸功能的重新编码。

功能外声明的爆炸有关的变量：

var bulletExplosionStart; 
var whereX =0; 
var whereY =0; 
var wide = 70; 
var high = 70;

接下来，在爆（），设置在爆炸发生和精灵指数（bulletExplosionStart）重置为0

可能出现的错误：检查你的Exploder函数：你提供srcX，srcY，然后做whereX = this.srcX，whereY = this.srcY。我假设你打算使用srcX，srcY作为参数提供给Exploder（）而不是this.srcX，this.srcY。

function Exploder(srcX,srcY) 
{ 
    whereX = srcX; 
    whereY = srcY; 
    bulletExplosionStart=0; 
    BulletExplosionAnimate(); 
}

这是重新编码的bulletExplosionAnimate函数，它播放spritesheet的4个帧。

4帧后，此动画自动停止。

var fps = 2; 
function bulletExplosionAnimate() { 

    // are we done? ... if so, we're outta here 
    if(bulletExplosionStart>308){return;} 

    // It's good practice to use requestAnimation frame 
    // We wrap it in setTimeout because we want timed frames 
    setTimeout(function() { 

     // queue up the next frame 
     requestAnimFrame(bulletExplosionAnimate); 

     // Draw the current frame 
     ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight) 
     ctxExplosion.drawImage(spriteImage, 
      bulletExplosionStart,1250,wide,high, 
      whereX,whereY,wide,high); 

     // increment the sprite position 
     bulletExplosionStart += 77; 
    }, 1000/fps); 

}

来源

2013-06-05 18:02:39 markE

...只要你的船身/盾牌消失，试着将你的canvasXY的z-index设置得更高。 – markE

谢谢你的帮助，我试过你说的，但我得到这个错误：Uncaught TypeError：Object [object Window] has no method'draw you can try it it at：http://www.taffatech.com/DarkOrbit.html 它甚至不会绘制动画的第一帧，我知道我还没有通过将x srcX值更改为每帧+77，但它不会显示任何东西来绘制其他图片 – Barney

请参阅我的答案的补充，其中显示了requestAnimationFrame适合你的代码。 – markE

碰撞检测后显示精灵

回答

相关问题