PS: Cette bataille de chars a été une réécriture après un morceau de code source en ligne et hors ligne. Il n'y a rien de trop difficile en soi. Ce cas utilise des objets JS, qui peuvent être utilisés comme tutoriel d'introduction pour les objets JS.
1. Créez des objets de base pour réaliser un mouvement simple des réservoirs
1.1 Comment dessiner une toile sur une carte ?
Compte tenu du problème de la compatibilité du navigateur, nous utilisons le DOM pour dessiner et actualiser les objets de jeu. Comment stockons-nous nos cartes? Nous devons enregistrer la carte en tant que tableau bidimensionnel. Il n'y a pas de réseau bidimensionnel dans JS, mais il peut être réalisé en stockant le tableau dans un réseau unidimensionnel.
1.2 Implémentation du code
Nous concevons la canevas comme un tableau bidimensionnel de 13 * 13. Chaque élément a une longueur et une largeur correspondantes dans la carte. Nous pouvons considérer la carte entière comme un tableau composé de cellules de 40px * 40px, de sorte que la taille de notre toile entière est de 520px * 520px;
Avant d'entrer dans le code, je vous donnerai un diagramme de relation d'objet:
1.2.1 Création d'un objet de niveau supérieur
Code html:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd html 4.0 transitional // en">
<html>
<adal>
<Title> Tank War </Title>
<link rel = stylesheet href = "css / main.css" />
<script src = "js / commun.js"> </ script>
<script src = "js / tankObject.js"> </ script>
<script src = "js / mover.js"> </ script>
<script src = "js / tank.js"> </ script>
<script src = "js / frame.js"> </ script>
<cript>
window.onload = function () {
// appelle l'objet de chargement de jeu
var loder = new GameLoader ();
lourder.begin ();
}
</cript>
</ head>
<body>
<! - Conteneur de carte ->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</docy>
</html>
TankObject.js Fichier:
La copie de code est la suivante:
// objet de niveau supérieur
TankObject = function () {
this.xposition = 0; // la position de l'objet en x dans la carte (13 * 13)
this.yposition = 0;
this.ui = null; // élément DOM
}
// modifie la méthode statique de l'interface utilisateur
TankObject.prototype.updateUi = fonction (Battlfiled) {}
// définit la position, les paramètres sont les suivants: 1 * 40, 6 * 40
TankObject.prototype.SetPosition = fonction (position gauche, toppos) {
// Round dans la carte MATH.Round
this.xposition = math.round (LeftPosition / 40);
this.yposition = math.round (toppositif / 40);
// définit la position sur le formulaire
if (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 et y pour représenter la position de l'objet sur la carte. Plus tard, nous mettrons chaque objet dans la carte dans un tableau bidimensionnel, et pour le moment, nous pouvons obtenir l'objet correspondant via les coordonnées x et y.
Ensuite, utilisez la gauche et le haut dans CSS pour contrôler la position de notre objet sous la forme. (Objets typables: réservoirs, balles)
1.2.2 Création d'un objet public
Nous devons également créer un objet public pour écrire certaines de nos méthodes couramment utilisées.
Common.js:
La copie de code est la suivante:
// quatre directions du mouvement du réservoir
var énumdirection = {
Up: "0",
À droite: "1",
Vers le bas: "2",
À gauche: "3"
};
// Objet de méthode générale
var utilityClass = {
// Créer un élément DOM dans ParentNode, spécifiez ID et ClassName
CreateEe: function (type, id, classname, parentNode) {
var j = document.CreateElement (type);
if (id) {j.id = id};
if (className) {j.className = className};
return parentNode.appendChild (j);
}, // supprimer les éléments
Supprimer: fonction (obj, parentNode) {
parentNode.removechild (OBJ);
},
GetFunctionName: fonction (contexte, argumentCallee) {
pour (var i en contexte) {
if (context [i] == argumentCallee) {return i};
}
retour "";
}, // lier l'événement, renvoyer la méthode FUNC, c'est l'OBJ passé
BindFunction: function (obj, func) {
return function () {
func.Apply (OBJ, arguments);
};
}
};
1.2.3 Création d'un objet en mouvement
Mover.js
La copie de code est la suivante:
// déplace l'objet, hériter de l'objet de niveau supérieur
Mover = function () {
this.direction = enumDirection.up;
this.speed = 1;
}
Mover.prototype = new TankObject ();
Mover.prototype.move = function () {
if (this.lock) {
retour; / * désactivé ou est toujours en cours, l'opération est invalide * /
}
// Définit l'image d'arrière-plan du réservoir en fonction de la direction
this.ui.style.backgroundPosition = "0 -" + this.direction * 40 + "px";
// Si la direction est de haut en bas, VP est en haut; Si la direction est en hausse et à gauche, Val est -1
var vp = ["top", "gauche"] [((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; / * lock * /
// Enregistrez l'objet actuel à cela
var this = this;
// Enregistrer la position de démarrage du mouvement des objets
var startMovep = paSeInt (this.ui.style [vp]);
var xp = this.xposition, yp = this.yposition;
var subsove = setInterval (function () {
// commence à bouger, 5px à chaque fois
This.ui.style [vp] = parseInt (this.ui.style [vp]) + 5 * val + "px";
// 40px par cellule
if (math.abs ((parseInt (this.ui.style [vp]) - startMovep))> = 40) {
ClearInterval (sous-solde);
This.lock = false; / * déverrouiller, permettant à nouveau de marcher * /
// Enregistrez la position de l'objet dans le tableau après son déplacement
This.xposition = math.round (this.ui.offsetleft / 40);
This.yposition = math.round (this.ui.offsettop / 40);
}
}, 80 - this.speed * 10);
}
L'objet en mouvement hérite ici de notre objet de niveau supérieur, et cela représente l'objet qui appelle la méthode Move.
La fonction de l'objet Move se déplace en fonction de la direction et de la vitesse de l'objet. Chaque fois que vous vous déplacez 5px, déplacez un total de 40 pix à une cellule. L'objet sera étendu plus tard et la détection de collision et d'autres fonctions seront ajoutées.
1.2.4 Création d'un objet Tank
Fichier Tank.js:
La copie de code est la suivante:
// L'objet de réservoir hérite de Mover
Tank = function () {}
Tank.prototype = new Mover ();
// Créer un réservoir de joueur, hériter d'un objet de réservoir
Selftank = function () {
this.ui = utilityClass.createe ("div", "", "itank", document.getElementById ("divmap"));
this.movingState = false;
this.speed = 4;
}
Selftank.prototype = new tank ();
// Réglez la position du réservoir
Selftank.prototype.updateui = fonction () {
this.ui.classname = "itank";
// Méthode d'objet supérieur, définissez la position du réservoir
this.setPosition (this.xposition * 40, this.yposition * 40);
}
Maintenant, seuls des réservoirs de joueurs ont été créés, et nous leur ajouterons des réservoirs ennemis plus tard.
1.2.5 Créer un objet de chargement de jeu (Core)
La copie de code est la suivante:
// Le jeu charge l'objet de l'objet de base du jeu entier
GameLoader = function () {
this.mapContainer = document.getElementById ("divmap"); // la div qui stocke la carte du jeu
this._selftank = null; // Tank des joueurs
this._gameListener = null; // L'ID de minuterie de boucle principale du jeu
}
Gameloder.prototype = {
Begin: function () {
// Initialiser le réservoir du joueur
var selft = new selftank ();
selft.xposition = 4;
selft.yposition = 12;
selft.updateui ();
this._selftank = selft;
// Ajouter un événement clé
var warpper = utilityClass.bindFunction (this, this.onkeydown);
window.onkeydown = document.body.onkeydown = warpper;
warpper = utilityClass.bindFunction (this, this.onkeyup);
window.onkeyup = document.body.onkeyup = warpper;
// la boucle principale du jeu
warpper = utilityClass.bindFunction (this, this.run);
/ * Clé de contrôle de surveillance de la minuterie longue * /
this._gameListener = setInterval (Warpper, 20);
}
// Appuyez sur le réservoir du joueur sur le clavier pour commencer à bouger
, Onkeydown: fonction (e) {
switch ((window.event || e) .KeyCode) {
Cas 37:
this._selftank.direction = enumDirection.left;
this._selftank.movingState = true;
casser; //gauche
Cas 38:
this._selftank.direction = enumDirection.up;
this._selftank.movingState = true;
casser; //Sur
Cas 39:
this._selftank.direction = enumDirection.Right;
this._selftank.movingState = true;
casser; //Droite
Cas 40:
this._selftank.direction = enumDirection.down;
this._selftank.movingState = true;
casser; //Suivant
}
}
// Les boutons apparaissent et arrêtent de bouger
, Onkeyup: fonction (e) {
switch ((window.event || e) .KeyCode) {
Cas 37:
Cas 38:
Cas 39:
Cas 40:
this._selftank.movingState = false;
casser;
}
}
/ * La fonction de course de boucle principale du jeu, le cœur du jeu, le hub * /
, Run: function () {
if (this._selftank.movingstate) {
this._selftank.move ();
}
}
};
Le code d'objet de chargement du jeu semble beaucoup, mais en fait, il ne fait que deux choses:
1. Créez un objet Tank Player.
2. Ajoutez un événement de surveillance clé. Lorsque le joueur appuie sur la touche mobile, appelez la méthode de déplacement du réservoir pour déplacer le réservoir.
Résumé: À ce stade, notre réservoir peut se déplacer librement en appuyant sur les boutons. La prochaine étape, nous devons améliorer la détection de la carte et des collisions.