Question

我检查并找到了一个很好的模板来设置通过数组的瓷砖地图（至少对那些仍然在学习的人来说很好）虽然想知道你是否可以帮助我想出相机的想法。我知道它必须是一个每次玩家移动时更新它的坐标的对象，但是在我检查的所有教程中总会有一些我遗漏的东西。

这是我到目前为止用于tile-map的脚本（模板）：

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, 1, 1, 1, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 0, 0, 0, 0, 1],
  [0, 1, 0, 0, 1, 1, 1, 0, 0, 0],
  [0, 1, 1, 0, 1, 0, 0, 0, 0, 0],
  [0, 1, 1, 0, 1, 1, 1, 0, 0, 0],
  [0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  [0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 0, 0, 0],
  [0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 1, 1, 0, 0, 0, 0]
];

var grass = new Image();
var stone = new Image();

grass.src = 'grass.jpeg';
stone.src = 'sand.jpeg';

var posX = 0;
var posY = 0;

grass.onload = function() {
  stone.onload = function() {
    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, 32, 32);
        }
        if (mapArray[i][j] == 1) {
          context.drawImage(stone, posX, posY, 32, 32);
        }
        posX += 32;
      }
      posY += 32;
      posX = 0;
    }
  }
}

#canvas {
  border: 1px solid black;
}

<canvas id="canvas" height="400px" width="500px"></canvas>

抱歉混合html，css和javascript，虽然它应该很简单。我还没有使用资产，我想留下这个资产。设置播放器的阵列可能会和css稍后改变它的移动外观。

你能帮忙设置一个简单的相机来使玩家居中并跟随它（如果可能的话只渲染地图的可见部分）吗？

Javascript相机跟随玩家（居中）在瓷砖地图上

0 个答案: