Изображения не отображаются в первый раз в этой объектной программе в JS - PullRequest
Новая
       23

Изображения не отображаются в первый раз в этой объектной программе в JS

0 голосов
/ 02 июля 2018

Я играю в линкор с полярными координатами. После того, как пользователь выберет две точки, в середине должен быть нарисован линкор. Мой конструктор линкора выглядит так: 

function Battleship(size, location, source){
        this.size = size;
        //initializing the image
        this.image = new Image();
        this.image.src = source;
        this.getMiddlePoint = function(){
           //get midpoint of ship
           ...
        }
        this.distanceBetween = function(t1, t2){
           //dist between two points
        }
        this.display = function(){
          var point = [this.radius];
          point.push(this.getMiddlePoint());
          point = polarToReal(point[0], point[1] * Math.PI / 12);
          //now point has canvas coordinates of midpoint
          var width = this.distanceBetween(this.info[0][0], this.info[this.info.length-1][0]);
          var ratio = this.image.width / width;
          ctx.drawImage(this.image, point[0] - width/2, point[1] - this.image.height / ratio / 2, width, this.image.height / ratio);
          //draws the image
        }
      }

Метод display каждого корабля вызывается в определенный момент (после того, как пользователь выбрал местоположение). По какой-то причине изображения не показывают первый раз, когда я делаю это, но когда я запускаю этот код в самом конце: 

for(var i = 0; i<playerMap.ships.length; i++){
    playerMap.ships[i].display();
}

Все корабли отображаются правильно (плохо выровнены, но отображаются). Я думаю, что есть проблема с загрузкой изображений. Я не уверен, как это исправить. Я пытался использовать image.onload, но так и не заработал. Я тоже попробовал что-то вроде этого: 

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}

но та же проблема продолжала происходить. Пожалуйста, помогите мне решить эту проблему. Здесь - игра в ее текущем состоянии. Если вы размещаете корабли, ничего не происходит, но после размещения 5 (или 10) кораблей они внезапно загружаются.

EDIT:

Я решил проблему путем глобального определения изображений. Это все еще очень плохая практика, так как я хотел, чтобы это было на объекте линкора. Это мое (временное) решение: 

 var sub = [];
 for(var i = 1; i<5; i++){
     sub[i] = new Image();
     sub[i].src = "/img/ships/battleship_"+i+".png";
 }
...