자바 스크립트 게임 스프라이트 로딩

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). 당신의 projectiles 모두 같은 스프라이트를 공유하기 때문에 (그것들은 모두) 동시에 스프라이트가로드 될 때 동시에 렌더링되기 시작합니다.

아무 문제가 없지만 시각적 표현을 제공하기 위해 일종의 자리 표시 자 (아이디어는 객체의 경계 상자 크기의 사각형이 될 아이디어)를 그리는 수표에 else를 추가하는 것입니다. 당신의 원수들이 스프 라이트가 준비되기 전에. 또 다른 아이디어는 게임을 먼저 호출하기 전에로드해야하는 모든 스프라이트를 기다리는 것입니다.