Блог

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

 var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src,x, y, width, height, frames, levels) {
    this.sprite = Image();
    this.sprite.src = src;
    this.x = x;
    this.y = y;
    this.w = width;
    this.h = height;
    this.f = frames;
    this.l = levels;
    this.cf = 0;
    this.cl = 0;
    this.loaded = false;
    this.src = src;
}
sprite.prototype.draw = function () {
    if (this.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(this.src, this.x, this.y);
    }
}

dog = new sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1);
dog.sprite.onload = function () {
    alex.loaded = true;
}
setInterval(alex.draw, 30);
  

Я бы предложил поместить событие onload перед событием set для вашего объекта изображения dog sprite. Я вижу, что вы задаете все в конструкторе, но я бы посоветовал отказаться от этого.

В вашем текущем коде ваш объект загружается перед строкой, которая инициализирует событие onload.

Я часто видел это при загрузке изображений, я бы сделал что-то вроде этого.

 function sprite(src,x, y, width, height, frames, levels) {
  var self = this;
  self.sprite = new Image();
  self.init = function(){
    self.sprite.src = src;
    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;
  }
}

dog = new sprite();
dog.sprite.onload = function () {
  alex.loaded = true;
}
dog.init("/images/sDog.png", 10, 10, 10, 10, 1, 1);
setInterval(alex.draw, 30);
  

или, чтобы немного пофантазировать

 function sprite(src,x, y, width, height, frames, levels, onLoad) {
  var self = this;
  self.sprite = new Image();
  self.sprite.onload = function(){
     onLoad();
  }
  self.sprite.src = src;
  self.x = x;
  self.y = y;
  self.w = width;
  self.h = height;
  self.f = frames;
  self.l = levels;
  self.cf = 0;
  self.cl = 0;
  self.loaded = false;
  self.src = src;
}

dog = new Sprite("/images/sDog.png", 10, 10, 10, 10, 1, 1, function(){
   alex.loaded = true;
});
setInterval(alex.draw, 30);
  

после просмотра вашей скрипки

 var c = document.getElementById("gamearea");
var gs = c.getContext("2d");
var one_x = 0;
//Sprite Loading//
function sprite(src, x, y, width, height, frames, levels, loaded) {
var self = this;
self.sprite = new Image();
self.sprite.onload = function(){
    self.loaded = true;
}   
    self.sprite.src = src;

    self.x = x;
    self.y = y;
    self.w = width;
    self.h = height;
    self.f = frames;
    self.l = levels;
    self.cf = 0;
    self.cl = 0;
    self.loaded = false;
    self.src = src;

self.update = function () {
    one_x  = 1;
    gs.fillStyle = "white";
    gs.fillRect(0, 0, 1000, 10000);
    gs.fillStyle = "black";
    gs.fillRect(one_x, 20, 10, 10);
}
self.draw = function (){
    if (self.loaded) {
        document.getElementById("ass").innerHTML = "Ass";
        gs.drawImage(self.sprite, self.x, self.y);
    }
}

}
dog = new sprite("http://www.bit-101.com/blog/wp-content/uploads/2009/05/ball.png", 10,     10, 10, 10, 1, 1);
setInterval(dog.draw, 30);
  

Здесь вы что-то упускаете new :

 this.sprite = Image();
  

Попробуйте:

 this.sprite = new Image();
  

Также убедитесь, что файл изображения действительно существует в указанном местоположении.