Question

我真的不知道如何准确地描述我的问题，但问题是，当我玩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;
        }
    }

}

调用函数

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();
    }

Answer 1

如果我正确读取你的敌人，你的敌人实际上是正确加载的，但是直到他们的精灵被加载（self.loaded == true时）才会被渲染。由于你的射弹都共享相同的精灵（我假设），它们都会同时开始渲染，这正是加载精灵的时候。

所以没有错，但你可以做的是为你的self == loaded添加一个其他的支票来绘制一个占位符（一个想法是一个矩形的对象大小的边界盒子）在他们的精灵准备好之前为你的敌人提供视觉表现。另一个想法是让游戏等待所有精灵在首次调用游戏循环之前加载所需的精灵。

Javascript游戏精灵加载

1 个答案: