Question

我目前正在使用javascript中的sprite进行游戏，我想添加一个事件监听器，用于在开始游戏之前检查精灵图像是否已加载。我正在使用面向对象的编程，我遇到了一些问题......我将展示一个我想到的例子：

fval4

无论哪种方式，以及我尝试过的任何方式，它都不会显示任何错误。它只是没有显示精灵。有谁知道发生了什么？

Answer 1

使用var self = this;显式捕获语义。通过在名为this的变量中引用self，您就可以在Sprite的图像加载函数中调用self.draw。

问题可能是您在onload中尝试this.draw，但在这种情况下this是指匿名函数而不是Sprite。见下面的例子。

除此之外，我认为评论者的建议是你在加载图片时出错。这是一个使用来自堆栈溢出使用的cdn之一的映像的示例：

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function Sprite() {

    var self = this;
    self.img = new Image();

    self.draw = function() {
        context.drawImage(self.img, 0, 0);
    }

    self.move = function() {
        // code that makes the sprites move
    }

    // or this:
    self.img.addEventListener("load", function() {
        self.draw();
    });

    self.img.src = "https://cdn.sstatic.net/img/share-sprite-new.svg?v=78be252218f3g";
}

var s = new Sprite();

＆＃13;

<canvas id="canvas" width="300" height="300"></canvas>

＆＃13;

如何将加载事件侦听器添加到对象javascript

1 个答案: