HTML5 и Canvas: перемещение фона с движением игрока - PullRequest
Новая
       11

HTML5 и Canvas: перемещение фона с движением игрока

0 голосов
/ 20 февраля 2012

Я пытаюсь сделать HTML5-игру с использованием Canvas. У меня есть кусок кода, который должен двигаться BG: 

function drawScene() { // main drawScene function
clear(); // clear canvas
// draw background
context = document.getElementById("gameCanvas").getContext('2d');
bgShiftX -= 3;
if (bgShiftX <= -100) {
   bgShiftX = 0;
}
  context.drawImage(floor, 0 + bgShiftX, 410);
  context.drawImage(city, 0 + bgShiftX, 175);
}

Но я не могу понять, как заставить его двигаться плавно и не прыгать, когда он достигает -100px на X, поэтому мне нужно, чтобы он двигался непрерывно. А также я хочу, чтобы он двигался, когда игрок нажимает кнопку MoveKey и достигает середины экрана.

1 Ответ

0 голосов
/ 21 февраля 2012

Вам нужно будет добавить keydown() прослушиватель событий для вашего moveKey. Например, если бы это была стрелка вверх, вы бы написали так: 

window.addEventListener('keydown', function(e){ moveMe(e), false);
function moveMe(e) {
  if (e.keyCode === '38') {
    // shift up
  }
}

Если вы не хотите возвращаться к своему минимальному значению, когда оно достигает -100px на X, вам нужно начать увеличивать bgShiftX. 

if (bgShiftX <= -100) {
  incrementX();
}
function incrementX() {
  bgShiftX += 3;
}

Надеюсь, это поможет прояснить некоторые вещи.

...