javascript - J'ai créé un jeu de canevas h5, en utilisant requestanimation pour contrôler le mouvement de direction et des touches pour contrôler s'il faut appuyer sur les touches de direction, mais il est un peu bloqué. Pourriez-vous s'il vous plaît me dire comment l'optimiser ?

Question

Je n'arrive pas à taper le code spécifique. Y a-t-il un expert qui peut fournir de précieux conseils

Answer 1

1. Changer l'animation en images en animation dans le temps

2. Pour les images qui n'ont pas besoin d'être modifiées fréquemment, comme les arrière-plans, etc., veuillez utiliser une toile hors écran

3. Pour certains détails, tels que canvas.width, etc., vous devez utiliser width = canvas.width pour enregistrer la valeur

4. Utiliser la limitation des fonctions

5. L'action déclenchée par un événement ne doit pas être basée sur la fonction liée. Les paramètres de déclenchement doivent être transmis au programme et implémentés via la boucle de jeu. Par exemple : lorsque vous cliquez sur la flèche droite, il vous suffit d'indiquer au corps du jeu que le déplacement vers la droite a été déclenché, et le programme détermine comment se déplacer.

6. Optimisez la boucle. De manière générale, la principale raison du lent fonctionnement du programme est la suivante. Il y a trop de logique interne et il n'y a pas de temps pour la traiter dans une boucle unitaire pour certaines choses de calcul de données, comme la génération. des nombres aléatoires, etc., vous pouvez transmettre Worker est utilisé pour l'implémenter. Pour certaines fonctions qui n'ont pas besoin d'être utilisées fréquemment, essayez d'éviter de les appeler uniquement après le déclenchement de certaines situations et le changement des valeurs des paramètres. . Par exemple, if(go) dosomething(); ne fonctionne que lorsque go est vrai, ce qui peut faire gagner beaucoup de temps.

Bien sûr, les détails spécifiques de l'optimisation doivent être déterminés en fonction de votre code. Je ne peux parler que de ces choses générales. En fait, la plupart des idées d'optimisation sont les mêmes

.

Answer 2

Cela peut être un problème avec l'inscription à l'événement. Vous pouvez commencer par la délégation de l'événement et annuler l'événement une fois le dom terminé.

Vous pouvez utiliser Chrome devtool pour ouvrir le profil et vérifier le processeur et la mémoire pour voir si des fonctions présentent des fuites ou d'autres problèmes.

Answer 3

Utilisez un rafraîchissement partiel du canevas au lieu de rafraîchir tout l'écran à chaque fois que vous le déplacez

Answer 4

Avez-vous écrit le jeu en utilisant DOM ? Ou utilisez CANVAS