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 を使用してスプライトシートを再生する方法は次のとおりです。

この場合、1 秒以上再生される 4x4 のスプライトシートです。

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 関数を確認してください。this.srcX,this.srcY の代わりに、Exploder() の引数として提供された srcX,srcY を使用するつもりだったと思います。

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

これは、スプライトシートの 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 に答える