Création d'un enregistrement complet des batailles de chars avec les compétences javascript (1)

Création d'un enregistrement complet des batailles de chars avec les compétences javascript (1)_javascript

WBOY

Libérer： 2016-05-16 16:30:05

original

1656 Les gens l'ont consulté

PS : Cette bataille de chars a été réécrite par moi-même après avoir téléchargé un morceau de code source en ligne. Il n'y a rien de trop difficile en soi. Ce cas utilise mieux l'orienté objet js et peut être utilisé comme tutoriel d'introduction à l'orienté objet js.

1. Créez des objets de base pour réaliser des mouvements simples de chars

1.1 Comment dessiner une toile dans la carte ?

Compte tenu de la question de compatibilité des navigateurs, nous utilisons la méthode d'exploitation dom pour réaliser le dessin et le rafraîchissement des objets de jeu. Comment stockons-nous notre carte? Nous devrions enregistrer la carte dans un tableau à deux dimensions. Il n'y a pas de tableau à deux dimensions dans js, mais cela peut être réalisé en stockant le tableau dans un tableau à une dimension.

1.2 Implémentation du code

Nous concevons le canevas comme un tableau bidimensionnel de 13 * 13. La longueur et la largeur correspondantes de chaque élément de la carte sont toutes deux de 40 pixels. La carte entière peut être considérée comme une cellule composée de 40 pixels x 40 pixels. tableau, alors la taille de notre toile entière est de 520px * 520px
;
Avant de charger le code, laissez-moi vous donner un diagramme de relation objet :

1.2.1 Créer des objets de niveau supérieur

Code HTML :

Copier le code Le code est le suivant :

Bataille de chars

<script><br>
            window.onload = function () {<br>
                                                                                   // Appeler l'objet de chargement du jeu <br>
            var loader = new GameLoader();<br>
Loader.Begin();<br>
         }<br>
</script>

Fichier TankObject.js :

Copier le code Le code est le suivant :

// Objet de niveau supérieur

TankObject = fonction () {

This.XPosition = 0; // La position X de l'objet dans la carte (13*13) 

This.YPosition = 0;

This.UI = null; // élément dom 

>

//Modifier la méthode statique de l'interface utilisateur

TankObject.prototype.UpdateUI = function (battlFiled) { }

//Définissez la position, les paramètres sont les suivants : 1*40,6*40

TankObject.prototype.SetPosition = fonction (leftPosition, topPosition) {

// Math.round à l'emplacement de la carte 

This.XPosition = Math.round(leftPosition / 40);

This.YPosition = Math.round(topPosition / 40);

//Définissez la position sur le formulaire

Si (this.UI != null && this.UI.style != null) {

This.UI.style.left = leftPosition "px";

This.UI.style.top = topPosition "px";

>

>

Ici, nous utilisons les coordonnées X, Y pour représenter l'emplacement de l'objet sur la carte. Plus tard, nous placerons chaque objet de la carte dans un tableau bidimensionnel. À ce stade, nous pouvons obtenir l'objet correspondant via les coordonnées X et Y.
Utilisez ensuite left et top en CSS pour contrôler la position de notre objet dans le formulaire. (objets mobiles : chars, balles)

1.2.2 Créer des objets publics

Nous devons également créer un objet public pour écrire certaines de nos méthodes couramment utilisées.

Common.js：

Copier le code Le code est le suivant :

//Quatre directions de mouvement du char

var EnumDirection = {

Haut : "0",

À droite : "1",

Bas : "2",

Gauche : "3"

};

//Objet méthode générale

var UtilityClass = {

//Créez un élément dom dans parentNode, vous pouvez spécifier id, className

CreateE : fonction (type, identifiant, className, parentNode) {

          var J = document.createElement(type);

Si (id) { J.id = id };

Si (nom de classe) { J.nom de classe = nom de classe };

          return parentNode.appendChild(J);

}, // Supprimer l'élément

​ RemoveE : fonction (obj, parentNode) {

         parentNode.removeChild(obj);

},

GetFunctionName : fonction (contexte, argumentCallee) {

pour (var i dans le contexte) {

If (context[i] == argumentCallee) { return i };

>

         return "";

}, // Lie l'événement et renvoie la méthode func, c'est l'obj entrant

BindFunction : fonction (obj,func) {

         fonction de retour () {

                func.apply(obj, arguments);

        };

>

};

1.2.3 Création d'objets en mouvement

Mover.js

Copier le code Le code est le suivant :

//Déplacer l'objet, hérité de l'objet de niveau supérieur

Déménageur = fonction () {

This.Direction = EnumDirection.Up;

This.Speed ​​​​= 1;

>

Mover.prototype = new TankObject();

Mover.prototype.Move = fonction () {

Si (this.lock) {

             return;/* Désactivée ou toujours en cours, l'opération n'est pas valide */

>

//Définissez l'image de fond du réservoir selon la direction 

This.UI.style.backgroundPosition = "0 -" this.Direction * 40 "px";

// Si la direction est vers le haut et vers le bas, vp est en haut ; si la direction est vers le haut et vers la gauche, val est -1

var vp = ["top", "left"][((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Down)) 0 : 1];
 ?
var val = ((this.Direction == EnumDirection.Up) || (this.Direction == EnumDirection.Left)) -1 : 1;
 ?
This.lock = true;/* Verrouiller */

//Enregistre l'objet actuel dans This

var Ceci = ceci;

//Enregistre la position de départ du mouvement de l'objet

var startmoveP = parseInt(This.UI.style[vp]);

var xp = This.XPosition, yp = This.YPosition;

var subMove = setInterval(function () {

                          // Commencez à bouger, 5 px à chaque fois 

This.UI.style[vp] = parseInt(This.UI.style[vp]) 5 * val "px";

                      // Déplacer une cellule à la fois 40 px

Si (Math.abs((parseInt(This.UI.style[vp]) - startmoveP)) >= 40) {

                 clearInterval(subMove);

This.lock = false;/* Déverrouiller, autoriser à nouveau l'étape */

// Enregistre la position de l'objet dans le tableau après le déplacement 

This.XPosition = Math.round(This.UI.offsetLeft / 40);

This.YPosition = Math.round(This.UI.offsetTop / 40);

         }

}, 80 - ceci.Vitesse ​​* 10);

>

L'objet move ici hérite de notre objet de niveau supérieur, et celui-ci représente ici l'objet qui appelle la méthode Move.
La fonction Déplacer l'objet se déplace en fonction de la direction et de la vitesse de l'objet. Chaque fois qu'il se déplace de 5 pixels, il déplace un total de 40 pixels par cellule. Cet objet sera développé ultérieurement et des fonctions telles que la détection de collision seront ajoutées.

1.2.4 Créer un objet réservoir

Fichier Tank.js :

Copier le code Le code est le suivant :

//objet tank hérité de Mover
Réservoir=fonction(){}
Tank.prototype = new Mover();

//Créer un tank joueur, hérité de l'objet tank
SelfTank = fonction () {
This.UI = UtilityClass.CreateE("div", "", "itank", document.getElementById("divMap"));
This.MovingState = false;
This.Speed = 4;
>
SelfTank.prototype = nouveau Tank();
//Définissez la position du réservoir
SelfTank.prototype.UpdateUI = function () {
This.UI.className = "itank";
// Méthode objet de niveau supérieur, définit la position du réservoir
This.SetPosition(this.XPosition * 40, this.YPosition * 40);
>

Désormais, seuls les chars des joueurs ont été créés, et nous leur ajouterons des chars ennemis plus tard.

1.2.5 Créer un objet de chargement de jeu (noyau)

Copier le code Le code est le suivant :

// Objet de chargement du jeu L'objet principal de tout le jeu 

GameLoader = fonction () {

This.mapContainer = document.getElementById("divMap"); // Le div
 qui stocke la carte du jeu
This._selfTank = null; // Réservoir du joueur

This._gameListener = null; // ID du minuteur de la boucle principale du jeu

>

GameLoader.prototype = {

Début : fonction () {

// Initialiser le tank du joueur

        var selfT = new SelfTank();

            selfT.XPosition = 4;

            selfT.YPosition = 12;

            selfT.UpdateUI();

This._selfTank = selfT;

                           // Ajouter un événement clé

          var wrapper = UtilityClass.BindFunction(this, this.OnKeyDown);

             window.onkeydown = document.body.onkeydown = warpper;

           warpper = UtilityClass.BindFunction(this, this.OnKeyUp);

            window.onkeyup = document.body.onkeyup = warpper;

                    // Boucle principale du jeu

           warpper = UtilityClass.BindFunction(this, this.Run);

/*Touche de contrôle de surveillance de minuterie longue*/

This._gameListener = setInterval(warpper, 20);

>

// Appuyez sur le clavier et le tank du joueur commence à bouger

, OnKeyDown : fonction (e) {

commutateur ((window.event || e).keyCode) {

cas 37 :

This._selfTank.Direction = EnumDirection.Left;

This._selfTank.MovingState = true;

                            casser;                                                                  
cas 38 :

This._selfTank.Direction = EnumDirection.Up;

This._selfTank.MovingState = true;

                       casser;                                                        
cas 39 :

This._selfTank.Direction = EnumDirection.Right;

This._selfTank.MovingState = true;

                              casser;                                                       
cas 40 :

This._selfTank.Direction = EnumDirection.Down;

This._selfTank.MovingState = true;

                          casser;
         }

>

// Le bouton apparaît pour arrêter de bouger

, OnKeyUp : fonction(e) {

commutateur ((window.event || e).keyCode) {

cas 37 :

cas 38 :

cas 39 :

cas 40 :
This._selfTank.MovingState = false;

                  pause ;

         }

>

/*Fonction d'exécution de la boucle principale du jeu, cœur et plaque tournante du jeu*/

, Exécutez : function () {

Si (this._selfTank.MovingState) {

This._selfTank.Move();

         }

>

};

Le code objet de chargement du jeu semble être important, mais il fait en réalité deux choses :
1. Créez un objet tank de joueur.
2. Ajoutez un événement d'écoute de clé Lorsque le joueur appuie sur la touche de mouvement, la méthode tank Move est appelée pour déplacer le tank.

Résumé : À ce stade, notre réservoir peut se déplacer librement en appuyant sur des boutons. Ensuite, nous devons améliorer la carte et la détection des collisions.