使画布视图移动和放大(slither.io)

Question

我正在学习如何使用画布，我觉得制作一个类似于slither.io风格的简单游戏会很有趣(不是在线游戏，而是地图的移动方式，角色停留在中间)。

我制作了一个画布并在中间画了一个盒子

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

但是，我无法思考如何创建类似于slither.io的风格，因为画布的视图只是整个地图的一部分。

我是否首先设置一个大背景图像，然后将我的“球员”放在中间？

我已经能够创造一个球员，我可以移动'WASD‘的钥匙，但然后呢？

有人有什么建议吗？

Answer 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();

<canvas id="canvas" width="600" height="400"></canvas>

​