Comentário: A dificuldade do jogo é como simular o movimento de uma cobra gananciosa. É obviamente simples se for apenas um quadrado. No entanto, como controlar o comprimento da cobra depois que ela se torna mais longa? Aqui está uma breve introdução à implementação específica. Amigos interessados podem se referir a ele. Espero que seja útil para você.
Instruções de operação do jogo
Use as teclas de seta para controlar o movimento da cobra para cima e para baixo, esquerda e direita. A cobra glutão crescerá um comprimento depois de comer a comida.
Implementação do jogo
A dificuldade do jogo é como simular o movimento de uma cobra gananciosa. É obviamente simples se for apenas um quadrado. Mas como controlar o comprimento da cobra depois que ela se torna mais longa
E o movimento de cada quadrado?
Se você observar o movimento da cobra, poderá encontrar isso da cabeça até a cauda da cobra, a posição de cada quadrado no momento seguinte é o quadrado anterior no momento atual.
localização. Então, tudo o que precisamos fazer é controlar o movimento da cabeça da cobra gulosa. As posições de outras partes podem ser analogadas por sua vez.
Outra questão notável é
Depois que a cobra come comida, onde os blocos recém -adicionados devem ser colocados?
A resposta é que, no momento seguinte, o bloco recém -adicionado deve aparecer na posição da cauda do momento atual.
Portanto, depois de comer a comida, um quadrado deve ser adicionado antes de atualizar cada posição da cobra e sua posição é definida na posição da cauda do momento atual.
Então, no momento atual, as posições de todos os blocos, exceto os novos blocos, são atualizados.
index.html
Snake.js
Var Canvas;
var ctx;
Var Timer;
//Medidas
var x_cnt = 15;
var y_cnt = 15;
unidade var = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * unidade;
var box_Height = 15 * unidade;
var bound_left = box_x;
var bound_right = box_x + box_width;
var limite_up = box_y;
var bound_down = box_y + box_height;
// imagens
var image_sprite;
// objetos
Var Snake;
alimento var;
var food_x;
var food_y;
// funções
Função da função (SX, SY, SW, SH, direção, status, velocidade, imagem, bandeira)
{
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
this.direction = direção;
this.status = status;
this.speed = speed;
this.image = imagem;
this.flag = sinalizador;
}
Transferência de funções (código -chave)
{
Switch (KeyCode)
{
Caso 37:
retornar 1;
Caso 38:
retornar 3;
Caso 39:
retornar 2;
Caso 40:
retornar 0;
}
}
função 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 = unidade * Math.floor (Math.random () * x_cnt);
Food_Y = unidade * Math.floor (Math.random () * y_cnt);
Food = nova função (Food_X, Food_Y, unidade, unidade, 0, 0, image_sprite, true);
}
Play de função (evento)
{
var keycode;
if (event == null)
{
keycode = window.event.keycode;
window.Event.PreventDefault ();
}
outro
{
keycode = event.keycode;
event.preventDefault ();
}
var cur_direction = transfer (KeyCode);
cobra [0] .direction = cur_direction;
}
função atualização ()
{
// Adicione uma nova parte à cobra antes de mover a cobra
if (cobra [0] .x == Food.x && Snake [0] .y == Food.Y)
{
var comprimento = Snake.length;
var tail_x = cobra [comprimento - 1] .x;
var tail_y = cobra [comprimento - 1] .y;
var cauda = nova função (tail_x, tail_y, unidade, unidade, cobra [comprimento - 1] .direction, 0, 0, image_sprite, true);
cobra.push (cauda);
addfood ();
}
// modifica atributos
// Mova a cabeça
Switch (cobra [0] .Direction)
{
Caso 0: // Down
cobra [0] .y += unidade;
if (cobra [0] .y> bound_down - unidade)
cobra [0] .y = bound_down - unidade;
quebrar;
Caso 1: // esquerda
cobra [0] .x -= unidade;
if (Snake [0] .x <Bound_left)
cobra [0] .x = bound_left;
quebrar;
Caso 2: // Certo
cobra [0] .x += unidade;
if (cobra [0] .x> bound_right - unidade)
cobra [0] .x = bound_right - unidade;
quebrar;
Caso 3: // Up
cobra [0] .y -= unidade;
if (cobra [0] .y <bound_up)
cobra [0] .y = limite_up;
quebrar;
}
// mova outra parte da cobra
for (var i = snake.length-1; i> = 0; i--)
{
se (i> 0)
//snakeOU.i.direction=sNakeO-1/12/12010;
{
cobra [i] .x = cobra [i - 1] .x;
cobra [i] .y = cobra [i - 1] .y;
}
}
}
função drawscene ()
{
ctx.clearrect (box_x, box_y, box_width, box_height);
ctx.strokestyle = "rgb (0,0,0";
ctx.stragerect (box_x, box_y, box_width, box_height);
// colisões de detecção
// desenha imagens
para (var i = 0; i <Snake.Length; i ++)
{
ctx.drawimage (image_sprite, cobra [i] .x, cobra [i] .y);
}
ctx.drawimage (image_sprite, Food.x, Food.Y);
}
função init ()
{
canvas = document.getElementById ("cena");
ctx = Canvas.getContext ('2D');
// imagens
image_sprite = new Image ();
image_sprite.src = "Images/sprite.png";
image_sprite.onload = function ()
{}
// ojects
cobra = novo array ();
var cabeça = nova função (unidade 0 *, 0 * unidade, unidade, unidade, 5, 0, 1, image_sprite, true);
cobra.push (cabeça);
window.addeventListener ('keydown', play, false);
addfood ();
setInterval (atualização, 300); //observação
SetInterval (Drawscene, 30);
}
Leitura relacionada: jogo de cobra HTML5 perfeitamente implementado usando 63 linhas de código