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