javascript - 在 Canvas 上绘制超过 1 个是行不通的吗？

Question

我正在尝试将敌舰绘制到 Canvas 上，它们将从右侧以随机 x 为 Canvas 高度，随机 y 超过右侧 + 1000。

这工作正常但是我试图让它自动化并且代码运行运行它只是在屏幕上不起作用，只绘制了 1？如果您需要任何更多信息，请直接询问，我的大脑真的很烦，我一行一行地检查了大约 3 个小时，但看不出任何问题。

在我添加此代码并手动调用一个之前:http://www.taffatech.com/DarkOrbit.html

在我为自动添加此代码后:(它看起来有点重叠) http://www.taffatech.com/test.html

全局变量:

var spawnInterval;
var totalEnemies = 0; //leave as is
var enemies = [];  //array of enemy objects
var spawnRate = 2000; //every 2 seconds
var spawnAmount = 3; //amount of enemies spawned

然后我的 init() 调用一个 startLoop:

function startLoop()
{

isPlaying = true;
Loop();
startSpawningEnemies();

}

function stopLoop()
{
isPlaying = false;
stopSpawningEnemies();
}

function Loop()
{
if (isPlaying == true)
{
Player1.draw();
requestAnimFrame(Loop);
 drawAllEnemies();

}

然后他们使用这些函数:

function spawnEnemy(n) //total enemies starts at 0 and every-time you add to array
{
  for (var x = 0; x < n; x++)
   {

     enemies[totalEnemies] = new Enemy();
     totalEnemies++; 
   }

}

function drawAllEnemies()
{

  ClearEnemyCanvas();
  for(var i = 0; i < enemies.length; i++)
   {
      enemies[1].draw();

   }
}

function startSpawningEnemies()
{
  stopSpawningEnemies();

  spawnInterval = setInterval(function() {spawnEnemy(spawnAmount);}, spawnRate); //this calls spawnEnemy every spawnRate
  /////////spawn 'spawnAmount' enemies every 2 seconds




}


function stopSpawningEnemies()
{

clearInterval(

spawnInterval);
}

依次调用 Enemy 类:

function Enemy()  //Object
{

//////Your ships values
this.EnemyHullMax = 1000;
this.EnemyHull = 1000;
this.EnemyShieldMax = 1000;
this.EnemyShield = 347;
this.SpaceCrystalReward = 2684;
this.EnemySpeed = 2; //should be around 6 pixels every-time draw is called by interval, directly linked to the fps global variable
////////////



////Pick Ship
this.type = "Hover";
this.srcX = EnemySrcXPicker(this.type);
this.srcY = EnemySrcYPicker(this.type);

this.enemyWidth = EnemyWidthPicker(this.type);
this.enemyHeight = EnemyHeightPicker(this.type);

this.drawX = EnemydrawXPicker(this.type);
this.drawY = EnemydrawYPicker(this.type);
////


}

Enemy.prototype.draw = function()
{

this.drawX -= this.EnemySpeed;
ctxEnemy.globalAlpha=1;
ctxEnemy.drawImage(spriteImage,this.srcX,this.srcY,this.enemyWidth,this.enemyHeight,this.drawX,this.drawY,this.enemyWidth,this.enemyHeight);

}



function EnemySrcXPicker(type)
{
if (type == "Hover")

    {

        return 906;
      }
}

function EnemySrcYPicker(type)
{
if (type == "Hover")

   {
        return 616;
     }
}

function EnemydrawXPicker(type)
{
if (type == "Hover")

     {
        return Math.floor(Math.random() *  1000) + canvasWidthEnemy;
     }
}

function EnemydrawYPicker(type)
{
if (type== "Hover")

     {
        return Math.floor(Math.random() * (canvasHeightEnemy - 72));
     }
}


function EnemyWidthPicker(type)
{
if (type == "Hover")

     {
        return 90;
     }
}

function EnemyHeightPicker(type)
{
if (type == "Hover")

     {

        return 72;
     }
}

Answer 1

for(var i = 0; i < enemies.length; i++)
{
   enemies[1].draw();
}

应该是

for(var i = 0; i < enemies.length; i++)
{
   enemies[i].draw();
}

...否则你会一遍又一遍地画同一个敌人。