Javascript Canvas，无法绘制多个图像

Question

对于一个学校项目，我需要制作一种“Invader”游戏。

实际上，我在绘图方面遇到了一些问题。它适用于一张图片，但不适用于多张图片。另外，如果我尝试仅绘制矩形而不是图片，则它不起作用。

所以我猜我的代码有问题，但我不知道如何找到它。

由于我的代码有多个库，因此我将其上传到服务器: Link to the project

我的绘制敌人的脚本源代码(只绘制一个，而不是全部):

function moveEnemy(myEnemy, indexEnemy) {
    myEnemy.posY += 1;
    if( myEnemy.posY >= GAME_HEIGHT )
    {
        myEnemy.posX = _.random(0, 600 );
        myEnemy.posY = _.random(0, -1000);
        player.score -= 2;
    }

    // check collision with player
    if (myEnemy.posX < player.posX + player.size && myEnemy.posX + myEnemy.size > player.posX && myEnemy.posY < player.posY + player.size && myEnemy.size + myEnemy.posY > player.posY) {
        loadGame();
    }

    // check collision with bullet
    _.map(tabShot, function(myShot, index) {
        // check collision with shot
        if (myShot && myEnemy.posX < myShot.posX + myShot.sizeX && myEnemy.posX + myEnemy.size > myShot.posX && myEnemy.posY < myShot.posY + myShot.sizeY && myEnemy.size + myEnemy.posY > myShot.posY)
        {
            myEnemy.posX = _.random(0, GAME_WIDTH-myEnemy.size);
            myEnemy.posY = _.random(0, -1000);
            player.score += 3;
            _.pull(tabShot, myShot);
            return true;
        }
        return false;
    });
    // check collision with player
    if (myEnemy.posX < player.posX + player.size && myEnemy.posX + myEnemy.size > player.posX &&
        myEnemy.posY < player.posY + player.size && myEnemy.size + myEnemy.posY > player.posY) {
        loadGame();
    }
    images.enemy.draw(CONTEXT, enemy.posX, enemy.posY);
}

Answer 1

只看到 1 个敌人的原因是因为您对 x 和 y 坐标使用了错误的变量。您使用了用来创建敌人的变量enemy。

将 moveEnemy 函数中的最后一行更改为

images.enemy.draw(CONTEXT, enemy.posX, enemy.posY);

到

images.enemy.draw(CONTEXT, myEnemy.posX, myEnemy.posY);