перемещение и увеличение окна просмотра холста (slither.io) - PullRequest
Новая
       21

перемещение и увеличение окна просмотра холста (slither.io)

0 голосов
/ 13 декабря 2018

Я учусь использовать canvas, и я подумал, что было бы интересно сделать простую игру, похожую по стилю на slither.io (не онлайн, но как карта движется и персонаж остается в центре).

Я создал холст и нарисовал в центре прямоугольник 

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

, но я не могу обернуть свой ум вокруг того, как бы я создал подобный стиль, который будет скользить.Окно просмотра холста - это только часть всей карты.

Должен ли я установить большое фоновое изображение, а затем поставить своего «игрока» в центре?

Я смог создать игрока, который мог бы двигаться с помощью клавиши «WASD», но что потом?

У кого-нибудь есть предложения?

1 Ответ

0 голосов
/ 13 декабря 2018

Вы можете использовать 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>
...