[JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する（3パターンで実装）

アクションゲームになくてはならない要素、それはジャンプモーション！
今回はゲーム内に重力を加え、自然なジャンプモーションを実装する。

方法としては3通りあるので、それぞれ解説していく。

• 三角関数（sin）を使う
• 月面でジャンプしているようなふんわりしたモーション
• 速度に加速度を足しこむ
• 簡単で自然なジャンプモーション
• 鉛直投げ上げの公式（y = v0t - 0.5gt^2）を使う
• より自然界に近いジャンプモーション

オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン（描画領域外）Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。

利用シーン

たとえば15個の要素からなる背景があったとする。（下図参照）
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。