javascript - 2D 横向卷轴 HTML5 游戏

<分区>

我正在尝试用 html5 制作横向卷轴游戏。我想知道我怎么可以让 500px x 500px 观看，但背景大约是 500px 高 x 2000px 宽。当查看区域滚动时，会出现更多背景，但 Angular 色会停留在中间，类似于口袋妖怪游戏。

最佳答案

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);

进一步阅读

关于javascript - 2D 横向卷轴 HTML5 游戏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15149955/