Question

我正在学习如何使用画布，我认为制作一款风格类似于splither.io的简单游戏（这不是在线的，而是地图的移动和角色居中的方式）会很有趣。 / p>

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

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

但是我无法集中精力如何创建与splither.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>

使画布视口移动并放大（slither.io）

1 个答案: