javascript - 2D横向滚动HTML5游戏

Question

我正在尝试用 html5 制作横向滚动游戏。我想知道我怎么能说一个 500 像素 x 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