Serpiente que todos jugamos, pero se hará cosa? Suena como mirada dura, de hecho hombre muy sencillo, de pocas palabras, dijo, directamente sobre el código
que escribimos dom primera estructura
<div id = "contenido">
<div id = "serpiente">
<div class = "cuadro de la cabeza"> </ div>
<div class = "caja"> </ div>
</div>
</div>La cual, el contenido de todo el diseño de la caja grande, la serpiente es una serpiente dentro de la caja es su cuerpo, con el fin de distinguir la cabeza de la primera caja añadimos un nombre para distinguir la cabeza, a continuación, vamos a añadir CSS
<style>
.box {
anchura: 60 píxeles;
altura: 60 píxeles;
background-color: rojo;
position: absolute;
la izquierda: 0;
top: 0;
line-height: 60px;
}
.Head {
background-color: verde amarillo;
}
</ Style>
Nos cada sección a la anchura y la altura del conjunto de la serpiente a 60 píxeles, y dio una posición, porque si no nos localizamos, entonces no podía sacarlo del flujo de documentos (flotante en la página), y el seguimiento no puede venir a través de izquierda y de arriba juzgar sus coordenadas.
Bueno así que conseguimos una serpiente preciosa (ganso natural no veía preciosa, donde - -). ¿Qué? ¿Me cual subió a la cabeza, muy simple, además del elemento después de colocar los elementos detrás de sobrescribirá el elemento anterior pregunta, por lo que sólo la cabeza y el cuerpo de superposición no se puede ver.
Entonces tenemos que dejar que la serpiente movimiento correcto, consulta el código de valores www.gendan5.com/topic/lcSearch.html Entonces, ¿cómo dejar que se mueva? El principio es muy simple, podemos establecer un temporizador cada vez que le permitió moverse, y cómo dejar que se mueva, sólo tiene que establecer un valor, por lo que el valor de cada movimiento en el + = 60, luego hacia arriba y hacia abajo por el juez moverse o desplazarse a la izquierda a los elementos y asignación de la parte superior. Escribimos la lógica del código, salió el código siguiente
<script>
var boxs = document.querySelectorAll ( "caja.");
var snake_x = 0;
var snake_y = 0;
var su vez = "derecho";
(function () {setInterval
; snakeMove ()
, 100})
función snakeMove () {
switch (a su vez) {
caso "derecho": snake_x + = 60; break;
caso "izquierda": snake_x - = 60; break;
caso "top": snake_y - = 60; break;
caso "fondo": snake_y + = 60; break;
}
for(var i = boxs.length - 1; i > 0 ; i --){
boxs[i].style.left = boxs[i - 1].style.left;
boxs[i].style.top = boxs[i - 1].style.top;
}
boxs[i].style.left = snake_x + "px";
boxs[i].style.top = snake_y + "px";
}document.onkeydown = function (evt) {
var e = evt || evento;
var keyCode = e.keyCode || e.which;
interruptor (keyCode) {
caso 37: vuelta = "izquierda"; break;
caso 38: su vez = "top"; break;
caso 39: vuelta = "derecho"; break;
caso 40: vuelta = "fondo"; break;
}
}
</ Script>
El código anterior, nos dan las coordenadas X e Y de la posición inicial de la serpiente se establece en 0, y el derecho inicial por defecto de distancia, mediante la introducción de teclas de dirección del teclado para cambiar su dirección. Entre ellos, las mentiras de dificultad
for (var i = boxs.length - 1; i> 0; i -) {
boxs [i] = .style.left boxs [i - 1] .style.left;
boxs [i] = .style.top boxs [i - 1] .style.top;
}
boxs[i].style.left = snake_x + "px";
boxs[i].style.top = snake_y + "px";Este bloque de código, el propósito de este código es seguir los elementos detrás de la acera, es dejar que cada pieza del cuerpo de una serpiente y se encendió un movimiento, las nóminas no agrícolas y, finalmente, dar la cabeza a snake_x y snake_y los valores actuales, formando así una primera (cabeza) es la coordenada valor snake_x, cambios snake_y en tiempo real, el valor del segundo bloque antes de que el primer bloque, el tercer bloque al segundo bloque antes del valor. . . Así que un cuerpo de la cabeza para ir junto con el efecto de
Pero cuando se pierde el código en un funcionamiento encontrará que esta serpiente era demasiado malo, sino también ir ilimitada hacia adelante después de que se fue a la frontera, y que no iba a hacer ah, no puede dejar que la serpiente no se ejecuta, así que hay que además de una frontera de serpiente
var snake_x_max = document.documentElement.clientWidth ;
var snake_y_max = document.documentElement.clientHeight;si (snake_x> snake_x_max) {
snake_x = 0;
}
Si (snake_x <0) {
snake_x = snake_x_max;
}
Si (snake_y> snake_y_max) {
snake_y = 0;
}
Si (snake_y <0) {
snake_y = snake_y_max;
}
Aquí nos fijamos el máximo x e y para el ancho de la ventana actual y la altura, y luego determina si la declaración, si la coordenada actual es mayor que el máximo, las coordenadas de conversación de corriente normalizado 0, 0 es inferior a él (es decir, a pasó el borde izquierdo ), almacena el actual conjunto de coordenadas al máximo, de manera que puede obtener un límite
Cree usted que esta manera de alejarse ella? nonono, no hay comida para comer serpientes, ¿cómo puede ser llamado serpiente, no es alma estrépito. Aquí comenzamos a hacer la comida (no se puede dejar que la serpiente derecha hambre).
<Div id = "alimento">
</div>A continuación, darle un css
#food {
anchura: 60 píxeles;
altura: 60 píxeles;
position: absolute;
fondo: amarillo verdoso;
}
Entonces, ¿qué elementos y de unión a su valor izquierda y superior se establece dentro de un rango de números aleatorios, que se puede hacer para generar una posición aleatoria
var fd = document.getElementById ( "alimento");
fd.style.left = Math.random () snake_x_max + "px";
fd.style.top = Math.random () snake_y_max + "px";
Buena comida, así que conseguimos un generado de forma aleatoria
Pero la comida y la serpiente parecía tener poco interés en él, después de pasar y no comer, por lo que tenemos que darle una detección de colisiones derecha, la lógica de detección de colisiones es muy simple, sólo para el valor de la cabeza a la izquierda y alimentos el valor absoluto del valor de la resta de la izquierda <= tamaño de la comida, y la parte de cabeza superior de alimentos del valor superior y el valor de restar el valor absoluto de <= tamaño de la comida, y similares se proporciona de manera que menos de igual a juez si el uso directo, debe dos elementos completamente solapamiento del trabajo, lo que necesitamos se cumple incluso si el borde de la tarde, por lo que la fase se reduce a un valor igual a dos para hacerlo. Y luego determinar cuándo los choca de frente con la comida, las partes del cuerpo de la serpiente en un cuerpo clonado de la parte interior de la serpiente, y dejar que la posición del alimento para refrescar (aplicable para el método de clonación perezoso, este método sólo se aplica cuando el inicio de serpiente perezosa cuando un cuerpo viene, no viene empezar si el cuerpo de la serpiente, que no se puede clonar un organismo ya existente, sólo para crear un nuevo cuerpo por createElement bloquear y ha añadido className continuación se añadió a elemento padre para el trabajo). Aquí ponemos la lógica en código
var dl = snake_x;
var dt = snake_y;
var fl = fd.style.left;
var ft = fd.style.top;
var = dv document.querySelectorAll ( "# serpiente div");
var sk = document.getElementById ( "serpiente");
var a2 = Número (fl.substring (0, fl.indexOf ( "px")));
var b2 = Número (ft.substring (0, ft.indexOf ( "px")));
si (Math.abs (dl-a2) <= 60 && Math.abs (dt-b2) <= 60) {
fd.style.left = Math.random () 1000+ "px";
fd.style.top = Math.random () 800 + "px";
sk.appendChild (dv [1] .cloneNode ());
boxs = document.querySelectorAll ( "caja.");
}En el que un método de esa larga lista de subcadena se debe a que el formato del valor adquirido es, por ejemplo, izquierda y arriba "200px" una matriz de este tipo no puede ser operaciones matemáticas, debe px cortar, y los caracteres restantes cadena "200" en un número de tipos puede realizar operaciones matemáticas.