Javascript游戏精灵加载

我真的不知道如何准确地描述我的问题，但问题是，当我玩我的javscript游戏时，我通过将敌人添加到阵列中来召唤敌人繁殖，他们会逐个加载和更新，而不是一起加载和更新。这意味着游戏一次只在屏幕上加载一个敌人，而游戏屏幕上的敌人数量与阵列中的敌人数量相同。奇怪的是，另一个使用同一个系统的函数（称为“投射”）加载多个项目并在屏幕上更新它们

功能本身

function projectile(x, y, dx, dy, loaded) {
    var self = this;
    self.x = x;
    self.y = y;
    self.oldx = x;
    self.oldy = y;
    self.loaded = loaded;
    self.sprite = new Image();
    self.alive = true;
    self.sprite.onload = function () {
        self.loaded = true;
    }
    self.sprite.src = "/images/rock.png";
    self.dx = dx;
    self.dy = dy;
    self.project = function () {
        if (self.alive) {
            self.oldx = self.x;
            self.oldy = self.y;
            self.x += self.dx * 10;
            self.y += self.dy * 10;
            if (self.loaded) {
                gs.drawImage(self.sprite, self.x, self.y);
            }
        }
    }
}

function enemy(x, y, width, height, frames, levels, loaded, speed, health, damage) {
    var self = this;
    self.sprite = new Image();
    self.sprite.onload = function () {
        self.loaded = true;
    }
    self.sprite.src = "/images/sDog.png";
    self.x = x;
    self.y = y;
    self.dx = 0;
    self.dy = 0;
    self.w = width;
    self.h = height;
    self.f = frames - 1;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.fps = 0;
    self.speed = speed;
    self.moving = false;
    self.health = health;
    self.damage = damage;

    self.update = function () {
        if (self.health > 0) {
            self.fps += 1;
            if (self.fps >= g_fps) {
                self.changeframe();
                self.fps = 0;
            }
            if (dog.health > 0) {
                if (dog.x + (dog.w / 2) > self.x + (self.w / 2)) {
                    self.dx = 1;
                }
                if (dog.x + (dog.w / 2) < self.x + (self.w / 2)) {
                    self.dx = -1;
                }
                if (dog.y + (dog.h / 2) > self.y + (self.h / 2)) {
                    self.dy = 1;
                }
                if (dog.y + (dog.h / 2) < self.y + (self.h / 2)) {
                    self.dy = -1;
                }
                for (i = 0; i < projectiles.length; i++) {
                    if (projectiles[i].x > self.x && projectiles[i].x < self.x + self.w && projectiles[i].y > self.y && projectiles[i].y < self.y + self.h && projectiles[i].alive) {
                        projectiles[i].alive = false;
                        self.health -= dog.damage;
                        self.x += projectiles[i].dx * dog.damage;
                        self.y += projectiles[i].dy * dog.damage;
                    }
                }
                if (dog.x > self.x && dog.x < self.x + self.w && dog.y > self.y && dog.y < self.y + self.h) {
                    dog.health -= self.damage;
                    dog.x += self.dx * self.damage;
                    dog.y += self.dy * self.damage;
                }
                self.x += self.dx * self.speed;
                self.y += self.dy * self.speed;
            }
        }
        if (self.loaded && self.health > 0) {
            gs.drawImage(self.sprite, self.cf * self.w, self.cl * self.h, self.w, self.h, self.x, self.y, self.w, self.h);
        }
    }
    self.changeframe = function () {
        if (self.health > 0) {
            if (self.cf > self.f - 1) {
                self.cf = 0;
            }
            else {
                self.cf += 1;
            }
        }
        else {
            self.cf = 0;
        }
    }

}

功能射弹（x，y，dx，dy，加载）{
var self=这个；
self.x=x；
self.y=y；
self.oldx=x；
self.oldy=y；
自加载=加载；
self.sprite=新图像（）；
自我活着=真实；
self.sprite.onload=函数（）{
self.loaded=true；
}
self.sprite.src=“/images/rock.png”；
self.dx=dx；
self.dy=dy；
self.project=函数（）{
如果（自我活着）{
self.oldx=self.x；
self.oldy=self.y；
self.x+=self.dx*10；
self.y+=self.dy*10；
如果（自加载）{
绘制图像（self.sprite，self.x，self.y）；
}
}
}
}
功能敌人（x、y、宽度、高度、帧、级别、负载、速度、生命值、伤害）{
var self=这个；
self.sprite=新图像（）；
self.sprite.onload=函数（）{
self.loaded=true；
}
self.sprite.src=“/images/sDog.png”；
self.x=x；
self.y=y；
self.dx=0；
self.dy=0；
self.w=宽度；
self.h=高度；
self.f=帧-1；
self.l=水平；
self.cf=0；
self.cl=0；
self.loaded=false；
self.fps=0；
self.speed=速度；
自我移动=错误；
自我健康=健康；
自我伤害=伤害；
self.update=函数（）{
如果（自我健康>0）{
self.fps+=1；
如果（self.fps>=g_fps）{
self.changeframe（）；
self.fps=0；
}
如果（dog.health>0）{
if（dog.x+（dog.w/2）>self.x+（self.w/2））{
self.dx=1；
}
if（dog.x+（dog.w/2）self.y+（self.h/2））{
self.dy=1；
}
if（dog.y+（dog.h/2）self.x&&projectles[i].xself.y&&projectles[i].yself.x&&dog.xself.y&&dog.y0）{
gs.drawImage（self.sprite，self.cf*self.w，self.cl*self.h，self.w，self.h，self.x，self.y，self.w，self.h）；
}
}
self.changeframe=函数（）{
如果（自我健康>0）{
if（self.cf>self.f-1）{
self.cf=0；
}
否则{
self.cf+=1；
}
}
否则{
self.cf=0；
}
}
}

函数的调用

for (i = 0; i < projectiles.length; i++) {
        projectiles[i].project();
        if (projectiles[i].x < -50 || projectiles[i].x > c.width + 50 || projectiles[i].y < -50 || projectiles[i].y > c.width + 50) {
            projectiles[i].alive = false;
        }
    }
    for (i = 0; i < enemies.length; i++) {
        enemies[i].update();
    }

for（i=0；ic.width+50 | |射弹[i].y<-50 | |射弹[i].y>c.width+50）{
射弹[i].alive=false；
}
}
对于（i=0；i<0.length；i++）{
敌人[i].update（）；
}

如果我读对了，你的敌人实际上被正确加载，但是直到他们的精灵被加载（当

self.load==true

时）他们才被渲染。由于您的投射物都共享同一个精灵（我假设），因此它们都在同一时间开始渲染，这正是加载该精灵的时间

---

所以没有什么错，但是你可以做的是在检查

self==loaded

时添加一个else，它会绘制一种占位符（一个想法是对象边界框大小的矩形），在敌人的精灵准备好之前为他们提供一个可视的表示。另一个想法是让游戏等待所有需要加载的精灵，然后再调用gameloop。

我尝试了这个方法，但不幸的是，我仍然看不到其他敌人在游戏中的位置map@user1994100

if（self.health>0）{if（self.loaded）{/*当前操作*/}其他{/*绘制占位符*/}

不相关，但此代码看起来可以轻松地将许多函数移动到

敌方.prototype

和

射弹.prototype

，这将提高性能，并可能大大清理内存占用（我假设您正在使用

新建

创建它们）。