javascript - requestanimationで方向移動を制御し、方向キーを押すかどうかをキーで制御するh5キャンバスゲームを作ったのですが、ちょっと引っかかるのですが最適化する方法を教えてください。

Question

特定のコードを入力できません。貴重なアドバイスを提供できる専門家はいますか?

Answer 1

1. フレーム単位のアニメーションを時間単位のアニメーションに変更します

2. 背景など、頻繁に変更する必要のない画像については、オフスクリーンキャンバスを使用してください

3. Canvas.width などの一部の詳細については、 width = Canvas.width を使用して値を保存する必要があります

4. 機能制限を使用する

5. イベントトリガーのアクションは、バインドされた関数に基づいてはいけません。トリガーパラメーターはプログラムに渡され、ゲームループを通じて実装される必要があります。たとえば、右矢印をクリックしたときに、右への移動がトリガーされたことをゲーム本体に伝えるだけで、プログラムが移動方法を決定します。

6. ループを最適化します。一般的に、プログラムの実行が遅い主な原因は、内部ロジックが多すぎて、データの生成などの処理を行う時間がないことです。乱数などを実装するには Worker を使用します。頻繁に使用する必要のない一部の関数については、特定の状況がトリガーされてパラメーター値が変更された後にのみ呼び出すようにしてください。 たとえば、if(go) dosomething(); は go が true の場合にのみ動作するため、時間を大幅に節約できます。

もちろん、具体的な最適化の詳細はコードに従って決定する必要があります。実際、私はこれらの一般的なことについてしか話すことができません。実際、ほとんどの最適化のアイデアは同じです。

Answer 2

イベントの登録に問題がある可能性があります。イベントの委任から開始し、DOM終了後にイベントをキャンセルすることができます。

Chrome devtool を使用してプロファイルを開き、CPU とメモリをチェックして、関数にリークやその他の問題がないかどうかを確認できます。

Answer 3

キャンバスを移動するたびに画面全体を更新するのではなく、キャンバスの部分的な更新を使用します

Answer 4

DOM を使用してゲームを書きましたか?またはキャンバスを使用してください