2D Side Scrolling HTML5 Game

Question

Я пытаюсь сделать игру с боковой прокруткой в ​​html5. Мне интересно, как у меня, скажем, 500 на 500 пикселей, но фон имеет высоту около 500 на 2000 пикселей. Когда область просмотра прокручивается, появляется больше фона, но персонаж остается посередине, как в играх с покемонами.

Answer 1

context.drawImage Функция имеет целый ряд аргументов, которые вы можете привести. Вы хотите играть с источником (изображение) x, y, width, height и пункт назначения (экран) x, y, width, height, Вот список аргументов для drawImage,

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Таким образом, следующее нарисует изображение, начиная 400px слева 900px слева.

var w = 500;
var h = 500;
var scrollPos = 400;
drawImage(image, scrollPos, 0, w, h, 0, 0, w, h);

дальнейшее чтение

• WebPlatform drawImage