代码-也可在这里获得:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000" ;
ctx.fillRect(0,0,600,600);
ctx.fillStyle ="#ffffff";
var entities = [];
var x;
var y;
function ship(x, y) {
entities.push(entities.length-1);
this.name = entities.length-1;
this.draw = function(){
ctx.fillRect(x,y,30,30);
};
this.update = function(){
x+=10;
this.draw();
};
}
var bob = new ship(0,0);
bob.draw();
var intervalID = setInterval(bob.update(), 1000);
setTimeout(function() {
clearInterval(intervalID);
}, 18000);
基本上,我在左上角画了一个正方形。然后我尝试使用一种方法来实时移动它。当我使用for循环时,我可以看到正方形移动了,但显然它移动得太快了,甚至没有注意到。
你需要传递一个绑定引用给bob.update
var intervalID = setInterval(bob.update.bind(bob), 1000);
将index.html第48行改为
var intervalID = setInterval(function(){bob.update()}, 1000);
你应该很好
我没有运行代码,但这看起来是你的问题
setInterval(bob.update(), 1000)
setInterval
的第一个参数需要是一个函数对象——在本例中是船舶对象的update
函数。
在上面的声明中,你实际上是调用 update
函数,所以传递给setInterval
的不是update
函数本身,而是调用它的返回值-这是未定义 -所以你的setInterval
做…没有,每一秒。
你需要将更新函数"绑定"到bob对象,这样this
的值在每次实际调用时都是bob对象的this
。
将其更改为这样,即传递绑定到bob对象的update
函数,并尝试再次运行
setInterval(bob.update.bind(bob), 1000)