2D侧滚动HTML5游戏

Question

我想在html5中制作一个侧滚动游戏。我想知道我怎么能说让500px乘500px观看，但背景大约是500px高，2000px宽。当观看区域滚动时，会出现更多背景，但角色保持在中间，类似于口袋妖怪游戏。

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