Commentaire: Dans l'article précédent, j'ai présenté comment utiliser HTML5 pour implémenter un petit réservoir mobile. Dans cet article, je vous mènerai dans la guerre des réservoirs. Les amis qui aiment le HTML5 ne devraient pas le manquer.
<pre> tank.html </pre> <pre> <! doctype html>
<html>
<adal>
<meta charset = "utf-8" />
</ head>
<body onkeydown = "getCommand ();">
<H1> HMTL5-CLASSIC TANK WAR </H1>
<! - Le champ de bataille de Tank War ->
<lebvas> </ canvas>
<span> Données </span>
<! - Présentez Tankgames.js à cette page ->
<script type = "text / javascript" src = "tank.js"> </ script>
<script type = "text / javascript">
// Obtenez la toile
var canvas1 = document.getElementById ("tankmap");
// Obtenez le contexte de dessin (vous pouvez le comprendre comme un pinceau)
var cxt = canvas1.getContext ("2d");
// mon héros de réservoir
//direction
Var Hero = New Hero (140 140,0, Herocolor);
// définir une balle vide
var herrobullet = null;
// Définissez le réservoir ennemi (combien de réservoirs ennemis y a-t-il? Est-ce une seule définition ou mis dans un tableau?)
var EnemyTanks = new Array ();
// Die d'abord puis vivre, régler 3, puis nous ferons des variables pour le nombre de chars ennemis.
// 0-> supérieur, 1-> à droite, 2-> vers le bas 3-> gauche
pour (var i = 0; i <3; i ++) {
// Créer un réservoir
var ennemytank = new EnemyTank ((i + 1) * 50,0,2, enmeyColor);
// Mettez ce réservoir dans un tableau
EnemyTanks [i] = EnemyTank;
}
// l'appelle une fois
flashTankMap ();
// Écriture d'une fonction spéciale pour rafraîchir régulièrement notre zone de combat et inclure des éléments pour apparaître dans la zone de combat (propres réservoirs, réservoirs ennemis, balles, bombes,
//obstructions...)->
fonction flashtankmap () {
// nettoyer la toile
cxt.ClearRect (0,0,400,300);
// mon réservoir
Drawtank (héros);
// dessine votre propre balle
// Comment apparaît l'effet de vol de balle? [Réponse: tout d'abord, nous devons actualiser la zone de combat à chaque fois (setInterval). Si les coordonnées de la balle changent lorsqu'ils sont rafraîchissants, les coordonnées de la balle donnent aux gens le sentiment que la balle vole!]
DrawHerobullet ();
// Tank ennemi
// dessiner tous les réservoirs ennemis
pour (var i = 0; i <3; i ++) {
Drawtank (ennemies [i]);
}
}
// c'est une fonction qui accepte les touches utilisateur
fonction getCommand () {
// comment puis-je savoir quelle touche le joueur appuie
// Instructions: objet d'événement -------> Fonction du gestionnaire d'événements ()
var code = event.KeyCode; // Code ASCII pour les lettres correspondantes-> Regardons la table de code
commutateur (code) {
cas 87: // sur
Hero.Moveup ();
casser;
Cas 68:
Hero.Moveright ();
casser;
Cas 83:
Hero.Movedown ();
casser;
Cas 65:
Hero.Moveleft ();
casser;
Cas 74:
Hero.ShoTenemy ();
casser;
}
// déclenche cette fonction flashtankmap ();
flashTankMap ();
// Repaindre tous les réservoirs ennemis. Vous pouvez écrire du code ici (pensez, ayons simplement une fonction dédiée pour rafraîchir notre toile régulièrement [zone de guerre])
}
// actualiser la zone de combat toutes les 100 millisecondes
window.setInterval ("flashtankmap ()", 100);
</cript>
</docy>
</html> </ pre>
tank.js
<pre> </pre>
<pre> <pan
var herocolor = nouveau array ("# ba9658", "# fef26e");
var enmeyColor = new Array ("# 00A2B5", "# 00FEFE");
// L'expansion des autres réservoirs ennemis ici est assez bon.
// des balles
Fonction Bullet (x, y, direct, vitesse) {
this.x = x;
this.y = y;
this.Direct = Direct;
this.Speed = Speed;
this.timer = null;
this.islive = true;
this.run = fonction run () {
// Lorsque les coordonnées de cette balle sont présentées, nous déterminons d'abord si la balle a atteint la limite
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// Les balles doivent s'arrêter.
window.ClearInterval (this.timer);
// La balle est morte
this.islive = false;
}autre{
// Cela peut être utilisé pour modifier les coordonnées
commutateur (this.direct) {
Cas 0:
this.y- = this.speed;
casser;
Cas 1:
this.x + = this.speed;
casser;
Cas 2:
this.y + = this.speed;
casser;
Cas 3:
this.x- = this.speed;
casser;
}
}
document.getElementById ("aa"). innerText = "Bullet x =" + this.x + "Bullet y =" + this.y;
}
}
// c'est une classe de chars
Tank de fonction (x, y, direct, couleur) {
this.x = x;
this.y = y;
this.speed = 1;
this.Direct = Direct;
// Un réservoir nécessite deux couleurs.
this.color = couleur;
// monte
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
}
//À droite
this.moveright = function () {
this.x + = this.speed;
this.direct = 1;
}
//Descendre
this.Movedown = function () {
this.y + = this.speed;
this.direct = 2;
}
//Gauche
this.moveleft = function () {
this.x- = this.speed;
this.direct = 3;
}
}
// définir une classe de héros
// x représente la coordonnée horizontale du réservoir, Y représente la coordonnée verticale, direction directe
Function Hero (x, y, direct, couleur) {
// Le but des deux phrases suivantes est d'atteindre l'effet de l'héritage par une usurpation d'identité des objets
this.tank = tank;
this.tank (x, y, direct, couleur);
// Ajouter une fonction pour tirer sur des réservoirs ennemis.
this.shotenemy = function () {
// Créez une balle, la position de la balle doit être liée au héros et à la direction du héros ... !!!
//this.x est la coordonnée horizontale du héros actuel. Ici, nous allons simplement traiter (affiner)
commutateur (this.direct) {
Cas 0:
Herobullet = nouvelle balle (this.x + 9, this.y, this.direct, 1);
casser;
Cas 1:
Herobullet = nouvelle balle (this.x + 30, this.y + 9, this.direct, 1);
casser;
Cas 2:
Herobullet = nouvelle balle (this.x + 9, this.y + 30, this.direct, 1);
casser;
Cas 3: // à droite
Herobullet = nouvelle balle (this.x, this.y + 9, this.direct, 1);
casser;
}
// Appelant notre balle, 50 est une conclusion obtenue par les tests multiples de l'enseignant.
var timer = window.setinterval ("Herobullet.run ()", 50);
// Attribuez cette minuterie à cette balle (l'objet JS est une passe de référence!)
Herobullet.timer = temporisateur;
}
}
// définir une classe ennemie
fonction EnemyTank (x, y, direct, couleur) {
// hériter du réservoir en usurpant l'identité d'un objet
this.tank = tank;
this.tank (x, y, direct, couleur);
}
// dessinez votre propre balle et dites une chose de plus, vous pouvez également encapsuler la fonction dans la classe de héros
fonction drawherobullet () {
// Ici, nous avons ajouté une phrase, mais vous devez savoir que l'ajout ici vous oblige à être sûr de l'ensemble du programme
if (Herobullet! = null && Herobullet.islive) {
cxt.fillStyle = "# fef26e";
cxt.fillrect (Herobullet.x, Herobullet.y, 2,2);
}
}
// dessine le réservoir
fonction DrawTank (réservoir) {
// Considérez la direction
commutateur (tank.direct) {
cas 0: // sur
Cas 2: //
// dessinez votre propre réservoir et utilisez la technique de dessin précédente
// définit la couleur
cxt.fillStyle = tank.color [0];
// professeur Han utilise la mort d'abord ---> puis vivre (il est préférable pour les débutants)
// dessine le rectangle à gauche en premier
cxt.fillrect (tank.x, tank.y, 5,30);
// dessinez le rectangle à droite (veuillez y penser à ce moment -> assurez-vous d'avoir un point de référence)
cxt.fillrect (tank.x + 15, tank.y, 5,30);
// dessine le rectangle moyen
cxt.fillrect (tank.x + 6, tank.y + 5,8,20);
// dessine le couvercle du réservoir
cxt.fillStyle = tank.color [1];
cxt.arc (tank.x + 10, tank.y + 15,4,0,360, vrai);
cxt.fill ();
// dessine le canon (ligne droite)
cxt.strokestyle = tank.color [1];
// définir la largeur de la ligne
cxt.linewidth = 1,5;
cxt.beginPath ();
cxt.moveto (tank.x + 10, tank.y + 15);
if (tank.direct == 0) {
cxt.lineto (tank.x + 10, tank.y);
} else if (tank.direct == 2) {
cxt.lineto (tank.x + 10, tank.y + 30);
}
cxt.closePath ();
cxt.stroke ();
casser;
cas 1: // droit et gauche
Cas 3:
// dessinez votre propre réservoir et utilisez la technique de dessin précédente
// définit la couleur
cxt.fillStyle = tank.color [0];
// professeur Han utilise la mort d'abord ---> puis vivre (il est préférable pour les débutants)
// dessine le rectangle à gauche en premier
cxt.fillrect (tank.x, tank.y, 30,5);
// dessinez le rectangle à droite (veuillez y penser à ce moment -> assurez-vous d'avoir un point de référence)
cxt.fillrect (tank.x, tank.y + 15,30,5);
// dessine le rectangle moyen
cxt.fillrect (tank.x + 5, tank.y + 6,20,8);
// dessine le couvercle du réservoir
cxt.fillStyle = tank.color [1];
cxt.arc (tank.x + 15, tank.y + 10,4,0,360, true);
cxt.fill ();
// dessine le canon (ligne droite)
cxt.strokestyle = tank.color [1];
// définir la largeur de la ligne
cxt.linewidth = 1,5;
cxt.beginPath ();
cxt.moveto (tank.x + 15, tank.y + 10);
//À droite
if (tank.direct == 1) {
cxt.lineto (tank.x + 30, tank.y + 10);
} else if (tank.direct == 3) {// à gauche
cxt.lineto (tank.x, tank.y + 10);
}
cxt.closePath ();
cxt.stroke ();
casser;
}
}
</pre>
<pre> </pre>
</pre>