2D侧滚动HTML5游戏

Question

我想在html5中进行侧滚动游戏。我想知道我怎么可以说一个500px乘500px的观看，但是背景是2000px宽的500px高。当查看区域滚动出现更多背景时，但角色停留在中间，类似于小精灵游戏。

Answer 1

context.drawImage函数有一大堆你可以给它的参数。你想玩源（图片）x, y, width, height和目的地（屏幕）x, y, width, height。这里是drawImage的参数列表。

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

所以下面将绘制图像从左边的左边900px开始400px。

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

进一步阅读

• WebPlatform drawImage