使 canvas 视口移动并放大 (slither.io)

Question

我正在学习如何使用 canvas，我认为制作一个风格类似于 slither.io 的简单游戏会很有趣（不是在线游戏，而是地图的移动方式和角色留在中间）。

我创建了一个 canvas 并在中间画了一个框

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

但我想不出如何创建与 slither.io 相似的样式，其中 canvas 的视口只是整个地图的一部分。

我是否先设置一个大背景图片，然后将我的 'player' 放在中间？

我已经能够创建一个可以使用 'WASD' 键移动的播放器，但是然后呢？

有人有什么建议吗？

Answer 1

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

此答案使用 WASD 键移动。但不是移动玩家，而是整个 canvas 都被移动了。为了让玩家出现在中心，我们跟踪与 canvas.

的位移相反的 X 和 Y 变量

您也可以使用 transform 缩放整个 canvas。

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>

使 canvas 视口移动并放大 (slither.io)

making the canvas viewport move and enlarge (slither.io)

html

javascript

canvas

viewport