Question

我用HTML / JavaScript制作游戏。游戏将像MineCraft，但2D。不起作用的代码用于渲染块。所有变量都已设置，但未在代码I中给出。这段代码工作正常，但现在不是

for(var key in blocks){
    context.drawImage(blocks[key].img, blocks[key].x, blocks[key].y, size, size);
    if(collision(blocks[key], player)) context.fillText("COLLISION", 200, 20);
}

TypeMismatchError位于context.drawImage(blocks[key].img, blocks[key].x, blocks[key].y, size, size);

Answer 1

当传递给context.drawImage方法的第一个参数不正确时，可能会出现此错误。只有Image对象，画布或视频元素可以作为第一个参数传递。

在使用drawImage将图像绘制到画布上之前，请确保已加载图像。在下面的示例中，请注意img.grass.onload方法。它可以确保您可以使用图像资源进行绘图：

var img = {};
img.grass = new Image();
img.grass.src = "grass.jpg";
img.grass.onload = function() {
  for (i = 0; i < 10; i++){
    for (j = 0; j < 10; j++){
      context.drawImage(img.grass, j*50, i*50, 50, 50);
    }
  }
}

JavaScript Game TypeMismatchError

1 个答案: