PD: Esta batalla de tanques fue una reescritura después de un código fuente en línea y fuera de línea. No hay nada demasiado difícil en sí mismo. Este caso utiliza JS orientado a objetos, que puede usarse como un tutorial introductorio para el objeto JS orientado.
1. Cree objetos básicos para realizar un movimiento simple de los tanques
1.1 ¿Cómo dibujar un lienzo en un mapa ?
Teniendo en cuenta el problema de la compatibilidad del navegador, usamos el DOM para dibujar y actualizar objetos de juego. ¿Cómo almacenamos nuestros mapas? Deberíamos guardar el mapa como una matriz bidimensional. No hay una matriz bidimensional en JS, pero se puede lograr almacenando la matriz en una matriz unidimensional.
1.2 Implementación del código
Diseñamos el lienzo como una matriz bidimensional de 13 * 13. Cada elemento tiene una longitud y ancho correspondientes en el mapa. Podemos considerar todo el mapa como una tabla compuesta por celdas de tamaño 40px * 40px, por lo que el tamaño de todo nuestro lienzo es 520px * 520px;
Antes de ingresar el código, le daré un diagrama de relación de objeto:
1.2.1 Creación de un objeto de nivel superior
Código HTML:
La copia del código es la siguiente:
<! Doctype html público "-// w3c // dtd html 4.0 transitional // en">
<html>
<Evista>
<title> Tank War </title>
<link rel = stylesheet href = "css /main.css" />
<script src = "js/common.js"> </script>
<script src = "js/tankobject.js"> </script>
<script src = "js/mobre.js"> </script>
<script src = "js/tank.js"> </script>
<script src = "js/frame.js"> </script>
<script>
window.onload = function () {
// llamar al objeto de carga del juego
var Loader = new Gameloader ();
loader.begin ();
}
</script>
</ablo>
<Body>
<!-Contenedor de mapas->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
Archivo tankobject.js:
La copia del código es la siguiente:
// Objeto de nivel superior
TankObject = function () {
this.xPosition = 0; // La posición del objeto en x en el mapa (13*13)
this.yposition = 0;
this.ui = nulo; // elemento dom
}
// Cambiar el método estático de la interfaz de usuario
TankObject.prototype.updateui = function (Battlfiled) {}
// Establecer la posición, los parámetros son los siguientes: 1*40, 6*40
TankObject.prototype.setPosition = function (LeftPosition, Topposition) {
// Ronda en la ubicación del mapa Math.round
this.xPosition = Math.round (LeftPosition / 40);
this.yposition = Math.round (Topposition / 40);
// Establecer la posición en el formulario
if (this.ui! = null && this.ui.style! = null) {
this.ui.style.left = LeftPosition + "Px";
this.ui.style.top = topposition + "px";
}
}
Aquí usamos coordenadas X e Y para representar la posición del objeto en el mapa. Más tarde, pondremos cada objeto en el mapa en una matriz bidimensional, y en este momento, podemos obtener el objeto correspondiente a través de las coordenadas X e Y.
Luego use la izquierda y la parte superior en CSS para controlar la posición de nuestro objeto en el formulario. (Objetos tipeables: tanques, balas)
1.2.2 Creación de un objeto público
También necesitamos crear un objeto público para escribir algunos de nuestros métodos de uso común.
Common.js:
La copia del código es la siguiente:
// cuatro direcciones de movimiento del tanque
var enumdirection = {
Arriba: "0",
Derecha: "1",
Abajo: "2",
Izquierda: "3"
};
// Objeto de método general
var utilityClass = {
// Crear elemento DOM en ParentNode, especificar ID y ClassName
Create: function (type, id, classname, parentNode) {
var j = document.createElement (tipo);
if (id) {j.id = id};
if (className) {J.ClassName = className};
return parentNode.appendChild (j);
}, // eliminar elementos
Removee: function (obj, parentNode) {
parentnode.removechild (obj);
},
GetFunctionName: function (context, argumentCallee) {
para (var i en contexto) {
if (context [i] == argumentCallee) {return i};
}
devolver "";
}, // Binda el evento, devuelve el método func, este es el obj aprobado
BindFunction: function (obj, func) {
Función de retorno () {
FunC.Apply (obj, argumentos);
};
}
};
1.2.3 Creación de un objeto en movimiento
Motor de mudanzas
La copia del código es la siguiente:
// mover el objeto, heredar del objeto de nivel superior
Mero = function () {
this.Direction = enumdirection.up;
this.speed = 1;
}
Mover.prototype = new TankObject ();
Mover.prototype.move = function () {
if (this.lock) {
return;/* desactivado o todavía está en progreso, la operación no es válida*/
}
// Establecer la imagen de fondo del tanque de acuerdo con la dirección
this.ui.style.backgroundPosition = "0 -" + this.Direction * 40 + "Px";
// Si la dirección está hacia arriba y hacia abajo, el VP es superior; Si la dirección está ascendente y izquierda, Val es -1
var vp = ["top", "izquierda"] [((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*/
// Guarde el objeto actual a este
var this = this;
// Registro de la posición de inicio del movimiento del objeto
var startMoveP = parseInt (this.ui.style [vp]);
var xp = this.xPosition, yp = this.yposition;
var submeve = setInterval (function () {
// comienza a moverse, 5px cada vez
This.ui.style [vp] = parseInt (this.ui.style [vp]) + 5 * val + "px";
// 40px por celda
if (math.abs ((parseInt (this.ui.style [vp]) - startmovep))> = 40) {
ClearInterval (subfirmar);
This.lock = false;/* desbloquear, permitiendo pasar de nuevo*/
// Registre la posición del objeto en la tabla después de que se mueva
This.xPosition = Math.round (this.ui.offsetleft / 40);
This.yposition = math.round (this.ui.offsettop / 40);
}
}, 80 - this.speed* 10);
}
El objeto en movimiento aquí hereda de nuestro objeto de nivel superior, y esto representa el objeto que llama al método de movimiento.
La función del objeto de movimiento se mueve de acuerdo con la dirección y la velocidad del objeto. Cada vez que mueve 5px, mueva un total de 40px de una celda. El objeto se ampliará más adelante y se agregarán detección de colisiones y se agregarán otras funciones.
1.2.4 Creación de un objeto de tanque
Archivo tank.js:
La copia del código es la siguiente:
// El objeto del tanque hereda del motor
Tank = function () {}
Tank.prototype = new Mover ();
// crear un tanque de jugador, heredar de un objeto de tanque
SelfTank = function () {
this.ui = UtilityClass.Createe ("div", "", "itank", document.getElementById ("divmap"));
this.movingState = false;
this.speed = 4;
}
SelfTank.prototype = new Tank ();
// Establecer la posición del tanque
Selftank.prototype.updateui = function () {
this.ui.classname = "itank";
// Método de objeto superior, establezca la posición del tanque
this.setPosition (this.xposition * 40, this.yposition * 40);
}
Ahora solo se han creado tanques de jugadores, y les agregaremos tanques enemigos más tarde.
1.2.5 Crear un objeto de carga del juego (núcleo)
La copia del código es la siguiente:
// El juego carga el objeto del objeto central de todo el juego
Gameloader = function () {
this.mapContainer = document.getElementById ("DivMap"); // El div que almacena el mapa del juego
this._SelfTank = null; // tanque de jugador
this._gamelistener = null; // La ID de temporizador de bucle principal del juego
}
Gameloader.prototype = {
Begin: function () {
// Inicializa el tanque de jugador
var selft = new SelfTank ();
selft.xPosition = 4;
selft.yposition = 12;
selft.updateui ();
this._SelfTank = Selft;
// Agregar evento clave
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;
// El bucle principal del juego
Warpper = UtilityClass.BindFunction (this, this.run);
/*Clave de control de monitoreo de temporizador largo*/
this._gamelistener = setInterval (Warpper, 20);
}
// Presione el tanque de reproductor en el teclado para comenzar a moverse
, OnKeydown: function (e) {
switch ((Window.event || e) .keycode) {
Caso 37:
this._SelfTank.Direction = enumdirection.left;
this._SelfTank.movingState = true;
romper; //izquierda
Caso 38:
this._SelfTank.Direction = enumdirection.up;
this._SelfTank.movingState = true;
romper; //En
Caso 39:
this._SelfTank.Direction = enumdirection.right;
this._SelfTank.movingState = true;
romper; //Bien
Caso 40:
this._SelfTank.Direction = enumDirection.down;
this._SelfTank.movingState = true;
romper; //Próximo
}
}
// Los botones aparecen y dejan de moverse
, OnKeyUp: function (e) {
switch ((Window.event || e) .keycode) {
Caso 37:
Caso 38:
Caso 39:
Caso 40:
this._SelfTank.movingState = false;
romper;
}
}
/*La función de ejecución principal del juego, el corazón del juego, el Hub*/
, Ejecutar: function () {
if (this._SelfTank.movingState) {
this._SelfTank.move ();
}
}
};
El código de objeto de carga del juego parece mucho, pero de hecho, solo hace dos cosas:
1. Crea un objeto de tanque de jugador.
2. Agregue un evento de monitoreo clave. Cuando el jugador presione la tecla móvil, llame al método de movimiento del tanque para mover el tanque.
Resumen: En este punto, nuestro tanque puede moverse libremente presionando los botones. Siguiente paso necesitamos mejorar el mapa y la detección de colisiones.