Comentario: La dificultad del juego es cómo simular el movimiento de una serpiente codiciosa. Obviamente es simple si es solo un cuadrado. Sin embargo, ¿cómo controlar la longitud de la serpiente después de que se vuelva más larga? Aquí hay una breve introducción a la implementación específica. Los amigos interesados pueden referirse a él. Espero que te sea útil.
Instrucciones de operación del juego
Use las teclas de flecha para controlar el movimiento de la serpiente hacia arriba y hacia abajo, a la izquierda y a la derecha. La serpiente glotón crecerá una longitud después de comer la comida.
Implementación del juego
La dificultad del juego es cómo simular el movimiento de una serpiente codiciosa. Obviamente es simple si es solo un cuadrado. Pero cómo controlar la longitud de la serpiente después de que se vuelva más larga
¿Qué pasa con el movimiento de cada cuadrado?
Si observa el movimiento de la serpiente, puede encontrar eso desde la cabeza hasta la cola de la serpiente, la posición de cada cuadrado en el momento siguiente es su cuadrado anterior en el momento actual.
ubicación. Entonces, todo lo que necesitamos hacer es controlar el movimiento de la cabeza de la serpiente glotón. Las posiciones de otras partes se pueden analogizar a su vez.
Otro problema notable es
Después de que la serpiente come comida, ¿dónde se deben colocar los bloques recién agregados?
La respuesta es que en el siguiente momento, el bloque recién agregado debe aparecer en la posición de la cola del momento actual.
Por lo tanto, después de comer la comida, se debe agregar un cuadrado antes de actualizar cada posición de la serpiente y su posición se establece en la posición de la cola del momento actual.
Luego, en el momento actual, se actualizan las posiciones de todos los bloques, excepto los nuevos bloques.
index.html
serpiente.js
Var lienzo;
var ctx;
temporizador var;
//Medidas
var x_cnt = 15;
var y_cnt = 15;
unidad var = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * Unidad;
var box_height = 15 * Unidad;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
// Imágenes
var image_sprite;
// objetos
Var serpiente;
VAR Food;
var food_x;
var food_y;
// Funciones
papel de función (SX, SY, SW, SH, Dirección, Estado, Velocidad, Imagen, Bandera)
{
this.x = sx;
this.y = sy;
this.W = SW;
this.h = sh;
this.Direction = Direction;
this.status = status;
this.speed = velocidad;
this.image = imagen;
this.flag = flag;
}
transferencia de funciones (código clave)
{
Switch (KeyCode)
{
Caso 37:
regresar 1;
Caso 38:
regresar 3;
Caso 39:
regresar 2;
Caso 40:
regresar 0;
}
}
función addfood ()
{
//food_x=box_x+math.floor(math.random()*(box_width-unit));
//food_y=box_y+math.floor(math.random()*((Box_Height-unit));
Food_x = unit * Math.floor (math.random () * x_cnt);
Food_y = unit * Math.floor (Math.random () * y_cnt);
Food = nuevo rol (Food_X, Food_y, Unidad, Unidad, 0, 0, Image_Sprite, True);
}
Function Play (evento)
{
Código de teclas var;
if (event == null)
{
keycode = window.event.keycode;
Window.event.PreventDefault ();
}
demás
{
KeyCode = Event.KeyCode;
event.preventDefault ();
}
var cur_direction = transfer (keycode);
serpiente [0] .Direction = cur_direction;
}
Function Update ()
{
// Agregue una nueva parte a la serpiente antes de mover la serpiente
if (serpiente [0] .x == food.x && serpiente [0] .y == food.y)
{
VAR Longitud = Snake.length;
var tail_x = serpiente [longitud - 1] .x;
var tail_y = serpiente [longitud - 1] .y;
var tail = nuevo rol (tail_x, tail_y, unidad, unidad, serpiente [longitud - 1] .Direction, 0, 0, image_sprite, true);
serpiente.push (cola);
addfood ();
}
// modificar los atributos
// mov la cabeza
Switch (serpiente [0] .Direction)
{
Caso 0: // abajo
serpiente [0] .y += unidad;
if (serpiente [0] .y> bound_down - unidad)
serpiente [0] .y = bound_down - unidad;
romper;
Caso 1: // izquierda
serpiente [0] .x -= unidad;
if (serpiente [0] .x <Bound_left)
serpiente [0] .x = bound_left;
romper;
Caso 2: // Derecho
serpiente [0] .x += unidad;
if (serpiente [0] .x> bound_right - unidad)
serpiente [0] .x = bound_right - unidad;
romper;
Caso 3: // arriba
serpiente [0] .y -= unidad;
if (serpiente [0] .y <bound_up)
serpiente [0] .y = bound_up;
romper;
}
// mover otra parte de la serpiente
para (var i = snake.length-1; i> = 0; i--)
{
if (i> 0)
//snake[font>.Direction=snake[i-1font>.Direction;
{
serpiente [i] .x = serpiente [i - 1] .x;
serpiente [i] .y = serpiente [i - 1] .y;
}
}
}
función drawscene ()
{
ctx.ClearRect (box_x, box_y, box_width, box_height);
ctx.StrokeStyle = "RGB (0,0,0";
ctx.strokerect (box_x, box_y, box_width, box_height);
// colisiones de detección
// dibujar imágenes
para (var i = 0; i <snake.length; i ++)
{
ctx.drawimage (image_sprite, serpiente [i] .x, serpiente [i] .y);
}
ctx.DrawImage (image_sprite, food.x, food.y);
}
función init ()
{
Canvas = document.getElementById ("escena");
ctx = canvas.getContext ('2d');
// Imágenes
image_sprite = new image ();
image_sprite.src = "Images/sprite.png";
image_sprite.onload = function ()
{}
// ojects
serpiente = nueva array ();
Var head = nuevo rol (0 * Unidad, 0 * Unidad, Unidad, Unidad, 5, 0, 1, Image_Sprite, True);
serpiente.push (cabeza);
Window.AdDeventListener ('Keydown', Play, False);
addfood ();
setInterval (actualización, 300); //nota
setInterval (DrawScene, 30);
}
Lectura relacionada: juego de serpiente HTML5 perfectamente implementado utilizando 63 líneas de código