javascript - Quintus 显示第一个 Sprite - 非常简单

Question

我已经编写了一些基于 Quintus 的代码，我相信它应该在 Canvas 上显示一个球......但事实并非如此!

如果有人能指出问题，我将不胜感激。我已经从几个不同的来源改编了代码，这可能就是问题所在。

代码如下，但只有几件事:

• 对 ball.png 的请求成功完成，返回值 200；
• JavaScript 控制台没有显示错误
• Canvas 可见，但 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 试图访问的属性是 Q._generateCollisionPoints 函数中的 obj.p.points.length，但 obj.p.points 未定义(您从未在 Ball 初始化函数中定义过它，也从未将 Sprite 插入到阶段 - 只有在这一点上，Quintus 才会帮助根据 Sprite 的资源生成点)。我设法通过在 Sprite 的 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);
    });
});