Question

我正在搞乱JavaScript游戏开发，我遇到了从数组中加载sprite的问题。它可以单独更新这个“mob”类，但是当我使用for循环更新它们时，sprite跟踪并重复自身。 enter image description here

这是与精灵加载器相关的代码，也是精灵本身的代码。

MobLoader

function mobloader(){
    var self = this;
    for (c = 0; c < 3; c++){
        var t = new enemy(rInt(10, 400), rInt(10,400));
        enemies.push(t);
    }
    self.updatemobs = function(){
        for (l = 0; l < enemies.length; l++){
            enemies[l].updatemob();
        }
    }
}

敌人类（杂草）

function enemy(x, y){
    var self = this;
    self.x = x;
    self.y = y;
    self.name = "Jake";
    self.enemyspr = new sprite("grasstest.png", self.x, self.y, 40, 40, 1, 1, 0, false);
    self.updatemob = function(){
        for (s = 0; s < spells.length; s++){
            if (spells[s].cy >= self.enemyspr.y && spells[s].cy <= self.enemyspr.y + self.enemyspr.h && spells[s].cx <= self.enemyspr.x + self.enemyspr.w && spells[s].cx >= self.enemyspr.x && self.enemyspr.active == true ){
                self.enemyspr.active = false;
                spells[s].spellspr.active = false;
            }
        }
        self.enemyspr.update();
    }
}

基本精灵类

function sprite(src, x, y, w, h, f, l, a, loaded){
    var self = this;
    self.src = src;
    self.x = x;
    self.y = y;
    self.w = w;
    self.h = h;
    self.cf = 0;
    self.f = f;
    self.cl = 0;
    self.l = l;
    self.active = true;
    self.a = a;
    self.cfps = 0;
    self.fps = 10;
    self.loaded = loaded;
    self.spr = new Image();
    self.spr.onload = function(){self.loaded = true;}
    self.spr.src = self.src;    
    self.update = function(){
        if (self.active == true){
            self.cfps += 1;
            if (self.cfps > self.fps && self.a == 1){
                self.cfps = 0;
                self.cf += 1;
                if (self.cf >= self.f){
                    self.cf = 0;
                }
            }
            if (self.a == 3){
                if (self.f > 9){
                    self.cl = Math.floor(self.f / 10);
                    self.cf = self.f - (Math.floor(self.f / 10) * 10);
                }
                if (self.f <=9){
                    self.cf = self.f;
                    self.cl = self.l;
                }
            }
            ctx.drawImage(self.spr, self.w * self.cf, self.h * self.cl, self.w, self.h, self.x, self.y, self.w, self.h);
        }
    }
}

每次刷新清除画布的基类

function gameupdate(){
    ctx.fillStyle = bgcolor;
    ctx.fillRect(0, 0, c.width, c.height);
    updategame();
}
setInterval(gameupdate, 16);

Answer 1

您需要在重绘框架之前清除画布。

Answer 2

我同意上面的答案。检查一下console.log以查看它是否正常运行，如果不能正常运行，请用＆＃34; rgb＆＃34; 255,255,0＆＃34;替换bgcolor。只是为了测试，因为那里的某些东西可能是错的。唯一可能的是，每次他走/更新时你都会产生一个实体。我非常怀疑，尽管如此。

使用For循环更新数组中的Sprite

2 个答案: