使画布视口移动和放大（slither.io）答案

【问题标题】：making the canvas viewport move and enlarge (slither.io)使画布视口移动和放大（slither.io）
【发布时间】：2018-12-12 23:46:22
【问题描述】：

我正在学习如何使用画布，并且我认为制作一个与slither.io 风格相似的简单游戏会很有趣（不是在线游戏，而是地图如何移动以及角色如何保持在中心）。

我已经创建了一个画布并在中心绘制了一个框

function init () {
    e = document.getElementById ("mycanv");
    var canvas = document.getElementById('mycanv');
    var context = canvas.getContext('2d');
    drawCircle(canvas); 
}

但我无法思考如何创建与slither.io 类似的样式，其中画布的视口只是整个地图的一部分。

我是否先设置一个大的背景图像，然后将我的“播放器”放置在中心？

我已经能够创建一个可以使用“WASD”键移动的播放器，但是接下来呢？

有人有什么建议吗？

【问题讨论】：

标签： javascript html canvas viewport

【解决方案1】：

您可以使用translate 将整个画布移动多个像素。画布上的所有元素都会随之移动。

此答案使用 WASD 键移动。但不是移动玩家，而是整个画布被移位。为了让玩家出现在中心，我们跟踪与画布位移相反的 X 和 Y 变量。

您也可以使用transform 来缩放整个画布。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let playerX = 130;
let playerY = 90;

// by using translate we move the entire world
function moveWorld(key){
  switch (key) {
    case "a" : 
      ctx.translate(10, 0);
      playerX -= 10;
      break;
    case "d" : 
      ctx.translate(-10, 0);
      playerX += 10;
      break;
    case "w" : 
      ctx.translate(0, 10);
      playerY -= 10;
      break;
    case "s" : 
      ctx.translate(0, -10);
      playerY += 10;
      break;
  }
  drawWorld();
}

// the world elements have fixed positions
function drawWorld(){
  ctx.clearRect(0, 0, 600, 400);
  // world
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 50);
  ctx.fillRect(110, 30, 50, 50);
  // player
  ctx.fillStyle = 'green';
  ctx.fillRect(playerX, playerY, 20, 20);
}

document.addEventListener('keydown', (event) => {
  moveWorld(event.key);
});

drawWorld();

&lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;

【讨论】：