javascript - 2D 横スクロール HTML5 ゲーム

Question

HTML5で横スクロールゲームを作ろうとしています。どうすれば 500px x 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);

参考文献

• Webプラットフォームの描画イメージ