Comentario: En el artículo anterior, presenté cómo usar HTML5 para implementar un tanque pequeño móvil. En este artículo, te guiaré a la guerra de tanques. Los amigos que les gusta HTML5 no deben perderse.
<pre> tank.html </pre> <pre> <! Doctype html>
<html>
<Evista>
<meta charset = "utf-8"/>
</ablo>
<Body OnKeydown = "getCommand ();">
<h1> HMTL5-Classic Tank War </h1>
<!-El campo de batalla de la guerra de tanques->
<Canvas> </Canvas>
<span> datos </span>
<!-Introduzca TankGames.js en esta página->
<script type = "text/javaScript" src = "tank.js"> </script>
<script type = "text/javaScript">
// Obtener el lienzo
var canvas1 = document.getElementById ("Tankmap");
// Obtén el contexto de dibujo (puede entenderlo como un pincel)
var cxt = Canvas1.getContext ("2d");
// mi héroe del tanque
//dirección
Var Hero = New Hero (140,140,0, Herocolor);
// Defina una bala vacía
var herobullet = nulo;
// Defina el tanque del enemigo (¿cuántos tanques enemigos hay? ¿Es una sola definición o se pone en una matriz?)
var enemyTanks = new Array ();
// morir primero y luego vivir, establecer 3, y luego haremos variables para el número de tanques enemigos.
// 0-> superior, 1-> derecha, 2-> hacia abajo 3-> izquierda
para (var i = 0; i <3; i ++) {
// crear un tanque
var enemyTank = new EnemyTank ((i+1)*50,0,2, enmeycolor);
// Pon este tanque en una matriz
enemyTanks [i] = enemyTank;
}
// Llámalo una vez
FlashTankMap ();
// escribir una función especial para actualizar nuestra zona de combate regularmente e incluir elementos para aparecer en la zona de combate (tanques propios, tanques enemigos, balas, bombas,
//obstructions...)-> pensamiento del juego
función flashTankMap () {
// limpiando el lienzo
cxt.ClearRect (0,0,400,300);
// mi tanque
DrawTank (héroe);
// Dibuja tu propia bala
// ¿Cómo aparece el efecto de vuelo de la bala? [Respuesta: En primer lugar, debemos actualizar la zona de combate cada vez (setInterval). Si las coordenadas de bala cambian cuando se actualizan, ¡las coordenadas de bala dan a las personas la sensación de que la bala está volando!]
DrawHeROBULLET ();
// tanque enemigo
// Dibuja todos los tanques enemigos
para (var i = 0; i <3; i ++) {
DrawTank (enemyTanks [i]);
}
}
// Esta es una función que acepta teclas de usuario
función getCommand () {
// ¿Cómo sé qué tecla presiona el jugador?
// Instrucciones: objeto de evento -------> Función de controlador de eventos ()
VAR CODE = Event.KeyCode; // Código ASCII para las letras correspondientes-> Veamos la tabla de código
switch (código) {
Caso 87: // en
hero.moveUp ();
romper;
Caso 68:
hero.moveright ();
romper;
Caso 83:
Hero.MoVoDown ();
romper;
Caso 65:
hero.moveleft ();
romper;
Caso 74:
hero.shotenemy ();
romper;
}
// activar esta función FlashTankMap ();
FlashTankMap ();
// Repinte todos los tanques enemigos. Puede escribir código aquí (piense, solo tengamos una función dedicada a actualizar nuestro lienzo regularmente [zona de guerra])
}
// Actualiza la zona de combate cada 100 milisegundos
Window.SetInterval ("FlashTankMap ()", 100);
</script>
</body>
</html> </pre>
tanque.js
<pre> </pre>
<pre> <pre> // Para la conveniencia de programación, definimos dos matrices de color
var Herocolor = New Array ("#BA9658", "#FEF26E");
var enmeycolor = new Array ("#00a2b5", "#00fefe");
// La expansión de otros tanques enemigos aquí es bastante buena.
// balas
Function Bullet (x, y, directo, velocidad) {
this.x = x;
this.y = y;
this.direct = directo;
this.speed = velocidad;
this.timer = null;
this.islive = verdadero;
this.run = function run () {
// Cuando se muestran las coordenadas de esta bala, primero determinamos si la bala ha alcanzado el límite
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// Las balas deben detenerse.
Window.ClearInterval (this.timer);
// La bala murió
this.islive = false;
}demás{
// Esto se puede usar para modificar las coordenadas
Switch (this.Direct) {
Caso 0:
this.y- = this.speed;
romper;
Caso 1:
this.x+= this.speed;
romper;
Caso 2:
this.y+= this.speed;
romper;
Caso 3:
this.x- = this.speed;
romper;
}
}
document.getElementById ("AA"). Innertext = "Bullet x ="+this.x+"Bullet y ="+this.y;
}
}
// Esta es una clase de tanque
Tank de funciones (x, y, directo, color) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = directo;
// Un tanque requiere dos colores.
this.color = color;
//Subir
this.moveUp = function () {
this.y- = this.speed;
this.Direct = 0;
}
//A la derecha
this.moveright = function () {
this.x+= this.speed;
this.Direct = 1;
}
// moverse hacia abajo
this.moveDown = function () {
this.y+= this.speed;
this.Direct = 2;
}
//Izquierda
this.moveleft = function () {
this.x- = this.speed;
this.Direct = 3;
}
}
// Defina una clase de héroe
// x representa la coordenada horizontal del tanque, y representa la coordenada vertical, dirección directa
function hero (x, y, directo, color) {
// El propósito de las siguientes dos oraciones es lograr el efecto de la herencia a través de la suplantación de objetos
this.tank = tanque;
this.tank (x, y, directo, color);
// Agregar una función para disparar tanques enemigos.
this.shotenemy = function () {
// Crea una bala, la posición de la bala debería estar relacionada con el héroe y la dirección del héroe ... !!!
//this.x es la coordenada horizontal del héroe actual. Aquí simplemente procesaremos (refinar)
Switch (this.Direct) {
Caso 0:
HeroBullet = nueva bala (this.x+9, this.y, this.direct, 1);
romper;
Caso 1:
HeroBullet = nueva bala (this.x+30, this.y+9, this.direct, 1);
romper;
Caso 2:
HeroBullet = nueva bala (this.x+9, this.y+30, this.direct, 1);
romper;
Caso 3: // Derecho
HeroBullet = nueva bala (this.x, this.y+9, this.direct, 1);
romper;
}
// llamando a nuestra bala, 50 es una conclusión obtenida por las múltiples pruebas del maestro.
VAR Timer = Window.SetInterval ("HeroBullet.run ()", 50);
// Asigna este temporizador a esta bala (¡el objeto JS es el pase de referencia!)
Herobullet.timer = temporizador;
}
}
// Defina una clase de EnemyTank
function enemyTank (x, y, directo, color) {
// heredar tanque haciéndolo pasar por un objeto
this.tank = tanque;
this.tank (x, y, directo, color);
}
// Dibuja tu propia bala y dice una cosa más, también puedes encapsular la función en la clase de héroes
function drawHherObullet () {
// Aquí, agregamos una oración, pero debe saber que agregar aquí requiere que esté seguro de todo el programa
if (HeroBullet! = Null && Herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillrect (Herobullet.x, Herobullet.y, 2,2);
}
}
// Dibuja el tanque
function drawTank (tanque) {
// Considere la dirección
Switch (Tank.Direct) {
Caso 0: // en
Caso 2: // abajo
// Dibuja tu propio tanque y usa la técnica de dibujo anterior
// Establecer el color
cxt.fillstyle = Tank.Color [0];
// El maestro Han usa la muerte primero ---> y luego vive (es mejor para principiantes)
// Dibuja el rectángulo a la izquierda primero
cxt.fillrect (tank.x, tank.y, 5,30);
// Dibuja el rectángulo a la derecha (piense en ello en este momento -> Asegúrese de tener un punto de referencia)
cxt.fillrect (tank.x+15, tanque.y, 5,30);
// Dibuja el rectángulo medio
cxt.fillrect (tank.x+6, tanque.y+5,8,20);
// Dibuja la cubierta del tanque
cxt.fillstyle = Tank.Color [1];
cxt.arc (tank.x+10, tanque.y+15,4,0,360, verdadero);
cxt.fill ();
// Dibuja el cañón (línea recta)
cxt.Strokestyle = Tank.Color [1];
// Establecer el ancho de la línea
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (tanque.x+10, tanque.y+15);
if (tank.direct == 0) {
cxt.lineto (tank.x+10, tank.y);
} else if (tank.direct == 2) {
cxt.lineto (tank.x+10, tanque.y+30);
}
cxt.ClosePath ();
cxt.stroke ();
romper;
Caso 1: // Derecha e izquierda
Caso 3:
// Dibuja tu propio tanque y usa la técnica de dibujo anterior
// Establecer el color
cxt.fillstyle = Tank.Color [0];
// El maestro Han usa la muerte primero ---> y luego vive (es mejor para principiantes)
// Dibuja el rectángulo a la izquierda primero
cxt.fillrect (tank.x, tank.y, 30,5);
// Dibuja el rectángulo a la derecha (piense en ello en este momento -> Asegúrese de tener un punto de referencia)
cxt.fillrect (tank.x, tanque.y+15,30,5);
// Dibuja el rectángulo medio
cxt.fillrect (tank.x+5, tanque.y+6,20,8);
// Dibuja la cubierta del tanque
cxt.fillstyle = Tank.Color [1];
cxt.arc (tank.x+15, tanque.y+10,4,0,360, verdadero);
cxt.fill ();
// Dibuja el cañón (línea recta)
cxt.Strokestyle = Tank.Color [1];
// Establecer el ancho de la línea
cxt.linewidth = 1.5;
cxt.beginpath ();
cxt.moveto (tanque.x+15, tanque.y+10);
//A la derecha
if (tank.direct == 1) {
cxt.lineto (tank.x+30, tanque.y+10);
} else if (tank.direct == 3) {// a la izquierda
cxt.lineto (tank.x, tank.y+10);
}
cxt.ClosePath ();
cxt.stroke ();
romper;
}
}
</pre>
<pre> </pre>
</pre>