Question

我正在尝试使用画布在JavaScript / HTML中创建图块地图。我将两个55 x 55像素的.png图像文件用于草地和水的纹理。

在“ for循环”数组期间，此游戏的图块未加载到画布中。这两个图像文件都与.html页面位于同一文件夹级别。

任何帮助将不胜感激。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mapArray = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
  [0, 0, 0, 1, 1, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var grass = new Image();
var water = new Image();

grass.src = 'grass_tile.png';
water.src = 'water_tile.png';

var posX = 0;
var PosY = 0;

for (var i = 0; i < mapArray.length; i++) {
  for (var j = 0; j < mapArray[i].length; j++) {
    if (mapArray[i][j] == 0) {
      context.drawImage(grass, posX, PosY, 55, 55);
    }
    if (mapArray[i][j] == 1) {
      context.drawImage(water, posX, PosY, 55, 55);
    }
    posX += 55;
  }
  posX = 0;
  posY += 55;
}

<style>#canvas {
  border: 1px solid black;
}

</style>

<!doctype <!document html>
<html>

<head>
  <meta charset="utf-8">
  <title>GAME</title>
</head>

<body>
  <canvas id="canvas" height="520px" width="520px"></canvas>
</body>

</html>

Answer 1

这里有几点：

您忘记在多维数组中放置逗号。
在某些地方您拥有变量PosY，在其他地方您拥有posY。
您应该等待图像加载才能绘制它们。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mapArray = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var grass = new Image();
var water = new Image();

grass.src = 'https://fyldegrass.co.uk/wordpress/wp-content/uploads/2016/04/Lytham-Ebay-Top2-128x128.jpg';
water.src = 'data:image/jpeg;base64,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';


var posX = 0;
var posY = 0;

grass.onload = function () { draw(); };


function draw() {
  for (var i = 0; i < mapArray.length; i++) {
    for (var j = 0; j < mapArray[i].length; j++) {
      if (mapArray[i][j] == 0) {
        context.drawImage(grass, posX, posY, 55, 55);
      }
      if (mapArray[i][j] == 1) {
        context.drawImage(water, posX, posY, 55, 55);
      }
      posX += 55;
    }
    posX = 0;
    posY += 55;
  }
}

<style>#canvas {
  border: 1px solid black;
}

</style>

<!doctype <!document html>
<html>

<head>
  <meta charset="utf-8">
  <title>GAME</title>
</head>

<body>
  <canvas id="canvas" height="520px" width="520px"></canvas>
</body>

</html>

JS中未使用context.drawImage（）将图像加载到画布上-基于图块的游戏

1 个答案: