我是javascript的新手(第三天!)但我很长一段时间都是程序员。使用javascript的setInterval函数时出现以下问题:
<script>
var canvasObj, canvasContext;
var tetrisObj;
main();
function main() {
log("call init");
init();
tetrisObj.startGame(canvasContext)
log("finished");
}
function init() {
canvasObj = document.getElementById("Tetris");
canvasContext = canvasObj.getContext("2d");
tetrisObj = new tetris(canvasObj.width, canvasObj.height);
}
function log(string) {
var p = document.createElement("p");
var text = document.createTextNode(string);
p.appendChild(text);
document.getElementById("logs").appendChild(p);
}
function tetris(width, height) {
this.width = width;
this.height = height;
this.b_width = width * 0.1;
this.b_height = width * 0.1;
this.block_container = new Array();
this.tetris_context;
this.startGame = function(canvasContext) {
this.tetris_context = canvasContext;
this.addBlock();
this.gameLoop();
setInterval(this.gameLoop, 500);
}
this.gameLoop = function() {
this.updateBlocks();
this.drawBlocks();
}
this.updateBlocks = function() {
var i = 0;
log(this.block_container.length);
for (i = 0; i < this.block_container.length; i++) {
if (this.block_container[i].y >= 20 * this.b_height) {
continue;
} else {
this.block_container[i].y += this.b_height;
log(this.block_container[i].y);
}
}
}
this.addBlock = function() {
var new_block = new s_block(0, 0, "black", this.b_width, this.b_height);
this.block_container.push(new_block);
}
this.drawBlocks = function() {
var i = 0;
for (i = 0; i < this.block_container.length; i++) {
this.block_container[i].drawBlock(this.tetris_context);
}
}
}
function s_block(x, y, color, width, height) {
this.x = x;
this.y = y;
this.color = color;
this.width = width;
this.height = height;
this.drawBlock = function(context) {
context.save();
context.fillStyle = color;
context.fillRect(this.x, this.y, this.width, this.height);
context.restore();
}
}
</script>
我遇到的问题是,当运行上面代码片段的“startGame()”函数时,会找到对this.gameLoop的直接调用,但是通过setInterval对this.gameLoop的间接调用失败。我认为这可能是因为它在全局上下文中执行,这与“this”对象混淆。但是我不太明白如何优雅地解决它!