Quintus получает первый спрайт - очень просто

Question

Я написал код на основе Quintus, который, как я считаю, должен отображать мяч на холсте ... но это не так!

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

код ниже, но только несколько вещей:

• запрос на ball.png успешно завершается с 200;
• Консоль JavaScript показывает никаких ошибок
• холст видна, но ball.png не

Так вот код:

window.addEventListener("load",function() { // Wait for the window to finish loading 

var Q = window.Q = Quintus()    // Create a new engine instance 
    .include("Sprites, Scenes, Input, 2D, Anim, Touch, UI") // Load any needed modules 
    .setup("myGame")      // Bind Quintus to the canvas with ID "myGame" 
    .controls()        // Add in default controls (keyboard, buttons) 
    .touch();        // Add in touch support (for the UI) 

    /* 
    ... Actual game code goes here ... 
    */ 
    Q.Sprite.extend("Ball",{ 
     init:function(p) { 
     this._super(p,{ 
      asset: "ball.png", 
      x: 0, 
      y: 300, 
      vx: 50, 
      vy: -400 
     }); 
     }, 

     step: function(dt) { 
     this.p.vy += dt * 9.8; 

     this.p.x += this.p.vx * dt; 
     this.p.y += this.p.vy * dt; 
     } 
    }); 

    Q.load(["ball.png"],function() { 
     var ball = new Q.Ball(); 
     Q.gameLoop(function(dt) { 
     ball.update(dt); 
     Q.clear(); 
     ball.render(Q.ctx); 
     }); 
    }); 

}); 

Answer 1

Когда я попробовал ваш код, он дал мне нет ошибок, потому что по какой-то причине событие загрузки окна не запускалось. Не уверен, почему с этой стороны, но мне удалось это исправить, не дожидаясь загрузки окна (удалите первую строку и последнюю строку в вашем коде).

После этого я столкнулся с некоторыми ошибками в консоли, а именно, что есть функция в quintus_sprites, пытающаяся получить доступ к свойству неопределенного. Свойство, которое quintus_sprites пыталось получить, было obj.p.points.length в функции Q._generateCollisionPoints, но obj.p.points не определено (вы никогда не определяли его в своей функции инициализации Ball, и вы никогда не добавляли спрайт в этап - в этот момент только Quintus поможет создать точки, основанные на активе спрайта). Мне удалось исправить это, установив произвольный массив точек в функции init спрайта.

Вот код, который работает для меня после того, как сделать вышеуказанные исправления:

var Q = window.Q = Quintus()    // Create a new engine instance 
.include("Sprites, Scenes, Input, 2D, Anim, Touch, UI") // Load any needed modules 
.setup("myGame")      // Bind Quintus to the canvas with ID "myGame" 
.controls()        // Add in default controls (keyboard, buttons) 
.touch();        // Add in touch support (for the UI) 

/* 
... Actual game code goes here ... 
*/ 
Q.Sprite.extend("Ball",{ 
    init:function(p) { 
     this._super(p,{ 
      asset: "ball.png", 
      points: [[0, 0], [1, 0], [1, 1], [0, 1]], 
      x: 0, 
      y: 300, 
      vx: 50, 
      vy: -400 
     }); 
    }, 

    step: function(dt) { 
     this.p.vy += dt * 9.8; 

     this.p.x += this.p.vx * dt; 
     this.p.y += this.p.vy * dt; 
    } 
}); 

Q.load("ball.png",function() { 
    console.log("Loaded"); 
    var ball = new Q.Ball(); 
    Q.gameLoop(function(dt) { 
     ball.update(dt); 
     Q.clear(); 
     ball.render(Q.ctx); 
    }); 
});