Code du jeu de combat de chars JavaScript réécrit à l'aide des connaissances TypeScript_Basic

Téléchargement du code source

J'ai téléchargé le code source sur CSDN. Aucune allocation de ressources n'est requise. L'adresse de téléchargement est : http://download.csdn.net/detail/zgynhqf/8565873.

Le code source est développé à l'aide de VS 2013 TypeScript 1.4. Après ouverture, l'image suivante s'affiche :

JsTankGame 1.0 : Un vieux jeu de tank écrit en JS.

JsTankGame 2.0 : Un nouveau jeu directement traduit en utilisant TS.

JsTankGame : Basé sur 2.0, un nouveau jeu avec un type reconstruit.

Étapes de reconstruction

Parce que les anciens jeux JS sont construits à l'aide de la bibliothèque client MS Ajax et conçus à l'aide de la méthode OOD, et TypeScript est compatible avec tous les codes JS. Le travail de portage à l'aide de TypeScript est donc relativement simple, remplaçant principalement le code de conception de caractères : classes, héritage, interfaces, etc.

Après avoir terminé le travail ci-dessus, vous disposerez de la version 2.0 écrite en TS. Dans le processus, j'ai découvert de nombreux avantages des langages fortement typés. Bien sûr, il y a aussi quelques imperfections dans TS (qui seront discutées plus tard).

Après avoir obtenu la version 2.0 fortement typée, ce n’est pas encore fini. Afin de bénéficier des avantages du typage fort pour la refactorisation, j'ai décidé de refactoriser la structure du code sur la base de cette version.

Avec du code fortement typé, je peux facilement analyser chaque type, chaque méthode et où il est utilisé. De cette façon, je peux connaître rapidement les dépendances entre les types. Vous ne le saurez pas si vous ne le regardez pas, mais vous serez choqué en le regardant. Le code que j'ai écrit petit à petit auparavant, je pensais que les types étaient bien conçus et que le couplage entre eux ne devait pas être très élevé. Mais après avoir terminé le dessin, j'ai trouvé que c'était loin de ce que j'imaginais. C'est le résultat de l'écriture de code directement sans dessiner. Voir les deux images ci-dessous :

.

On peut voir que la relation entre les différents types d'elfes est assez chaotique et que des dépendances bidirectionnelles peuvent être observées partout. (En fait, comme le SpriteManager est dessiné dans une autre image, la relation la plus compliquée et la plus désordonnée n'est pas affichée sur l'image.)

En fonction de cela, j'ai dessiné un nouveau diagramme de relation, puis j'ai refactorisé tout le code en fonction de cette relation. Cela vous donne la dernière version 3.0.

Le diagramme de relation de type de la nouvelle version est le suivant :

Superposition :

Elfe :

Gérant :

Au niveau du code, il transplante principalement les codes de couplage entre elfes au manager de niveau supérieur. Parallèlement, des événements sont définis pour les lutins afin de découpler les lutins directement du manager.

Avantages et inconvénients de la première expérience de TS

Avantages : Lambda résout très bien le problème de ce pointeur. Chrome et IE peuvent déboguer TypeScript directement ! Au cours du processus, des erreurs qui ne peuvent pas être trouvées par les types faibles ont également été découvertes. En raison du changement de nom, le code original n'a pas été modifié. (SpriteManager.js ligne 98)

Inconvénients : Environnement de développement - il n'y a pas de fonction de commentaire de code intégrée et vous ne pouvez le copier que manuellement. Environnement de développement : les extraits de code ne sont actuellement pas pris en charge. Environnement de développement - La génération de code de mots-clés n'est pas prise en charge : if, while, switch, bracket matching, etc. Environnement de développement : ne prend pas en charge la définition de régions de code (Région). Syntaxe : la définition des événements n'est pas prise en charge. Syntaxe - La définition de méthodes surchargées pour les classes n'est pas encore prise en charge. Voir la méthode SpriteBase.IsCollided.

Autres :

Le code JS compilé présente une certaine redondance. L'espace de commandement est particulièrement évident. Remplacez les méthodes de la classe de base sans invite. Les getters/setters de propriétés de classe de base ne peuvent pas être remplacés. Il n'existe aucun moyen de savoir quelles méthodes sont virtuelles. Les propriétés en lecture seule ne peuvent pas être définies dans les interfaces. Il y a encore des BUG. (SpriteManager.ts ligne 93). Si vous définissez simplement un champ numérique, la valeur par défaut n'est pas 0, mais NaN.

Résumé

De manière générale, après essai, j'estime que TS jusqu'à la version 1.4 actuelle peut être utilisée pour le développement formel de projets JS à grande échelle. Mais il reste encore de nombreux points à améliorer !

Vous trouverez ci-joint des captures d'écran TS de débogage Chrome et IE :

以上所述就是本文的全部內容了，希望能夠對大家熟練typescript有所幫助。