0

因此，当我射击敌人时，他们会从屏幕上消失，这很有效。

但是我想要发生的是我想基本上在敌人所在的地方放置一个爆炸（一个接一个 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();
     }

   }
}

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

4

1 回答 1

1

在画布中播放精灵表

使用 requestAnimationFrame 制作动画已成为最佳实践。它做了一些不错的事件分组和性能增强。这是关于 requestAnimationFrame 的一篇好文章： http ://creativejs.com/resources/requestanimationframe/

这是您可以使用 requestAnimationFrame 播放 spritesheet 的方法：

在这种情况下，它是一个 4x4 的 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;

接下来，在 Exploder() 中，设置爆炸发生的位置并将精灵索引 (bulletExplosionStart) 重置为 0

可能的错误： 检查您的 Exploder 函数：您提供 srcX,srcY 但随后执行 whereX=this.srcX, whereY=this.srcY。我假设您打算使用作为 Exploder() 的参数提供的 srcX,srcY 而不是 this.srcX,this.srcY。

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

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

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-05T18:02:39.317 回答