Commentaire: La difficulté du jeu est de savoir comment simuler le mouvement d'un serpent gourmand. C'est évidemment simple si ce n'est qu'un carré. Cependant, comment contrôler la longueur du serpent après qu'il devient plus long? Voici une brève introduction à la mise en œuvre spécifique. Les amis intéressés peuvent y faire référence. J'espère que cela vous sera utile.
Instructions de fonctionnement du jeu
Utilisez les touches de flèche pour contrôler le mouvement du serpent de haut en bas, à gauche et à droite. Le serpent gourmandau cultivera une longueur après avoir mangé la nourriture.
Mise en œuvre du jeu
La difficulté du jeu est de savoir comment simuler le mouvement d'un serpent gourmand. C'est évidemment simple si ce n'est qu'un carré. Mais comment contrôler la longueur du serpent après qu'il devient plus long
Qu'en est-il du mouvement de chaque carré?
Si vous observez le mouvement du serpent, vous pouvez constater que de la tête à la queue du serpent, la position de chaque carré au moment suivant est son carré précédent au moment actuel.
emplacement. Donc, tout ce que nous devons faire est de contrôler le mouvement de la tête du serpent glouton. Les positions d'autres pièces peuvent être analogisées à leur tour.
Un autre problème remarquable est
Après que le serpent mange de la nourriture, où les blocs nouvellement ajoutés devraient-ils être placés?
La réponse est qu'à l'instant suivant, le bloc nouvellement ajouté devrait apparaître à la position de la queue du moment actuel.
Par conséquent, après avoir mangé la nourriture, un carré doit être ajouté avant de mettre à jour chaque position du serpent et sa position est réglée à la position de la queue du moment actuel.
Ensuite, au moment actuel, les positions de tous les blocs, sauf que les nouveaux blocs sont mis à jour.
index.html
serpent.js
Var Canvas;
var ctx;
var temporisateur;
//Mesures
var x_cnt = 15;
var y_cnt = 15;
unité var = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * unité;
var box_height = 15 * unité;
var bound_left = box_x;
var bound_right = box_x + box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
// images
var image_sprite;
// objets
var Snake;
Var Food;
var food_x;
var food_y;
// fonctions
Rôle de la fonction (SX, SY, SW, SH, Direction, statut, vitesse, image, drapeau)
{
this.x = sx;
this.y = sy;
this.w = sw;
this.h = sh;
this.direction = direction;
this.status = statut;
this.Speed = Speed;
this.image = image;
this.flag = drapeau;
}
Transfert de fonction (Keycode)
{
commutateur (keycode)
{
Cas 37:
retour 1;
Cas 38:
retour 3;
Cas 39:
retour 2;
Cas 40:
retour 0;
}
}
fonction 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 = nouveau rôle (aliments_x, aliments_y, unité, unité, 0, 0, image_sprite, true);
}
Fonction Play (événement)
{
var keycode;
if (événement == null)
{
keyCode = window.event.KeyCode;
window.event.preventDefault ();
}
autre
{
keyCode = event.KeyCode;
event.PreventDefault ();
}
var cur_direction = transfert (keycode);
Snake [0] .Direction = cur_direction;
}
Function Update ()
{
// ajoute une nouvelle pièce au serpent avant de déplacer le serpent
if (Snake [0] .x == aliments.x && serpent [0] .y == aliments.y)
{
var longueur = snake.length;
var tail_x = serpent [longueur - 1] .x;
var tail_y = serpent [longueur - 1] .y;
var tail = nouveau rôle (tail_x, tail_y, unité, unité, serpent [longueur - 1] .direction, 0, 0, image_sprite, true);
Snake.push (queue);
addFood ();
}
// Modifier les attributs
// déplace la tête
commutateur (serpent [0] .Direction)
{
cas 0: //
serpent [0] .y + = unité;
if (snake [0] .y> bound_down - unité)
Snake [0] .y = Bound_down - Unité;
casser;
Cas 1: // gauche
Snake [0] .x - = unité;
if (Snake [0] .x <bound_left)
Snake [0] .x = bound_left;
casser;
Cas 2: // à droite
Snake [0] .x + = unité;
if (Snake [0] .x> bound_right - unité)
Snake [0] .x = bound_right - unité;
casser;
Cas 3: //
serpent [0] .y - = unité;
if (Snake [0] .y <bound_up)
Snake [0] .y = bound_up;
casser;
}
// déplace une autre partie du serpent
pour (var i = Snake.length - 1; i> = 0; i--)
{
si (i> 0)
//snake@i
{
serpent [i] .x = serpent [i - 1] .x;
serpent [i] .y = serpent [i - 1] .y;
}
}
}
fonction drawscene ()
{
ctx.clearrect (box_x, box_y, box_width, box_height);
ctx.strokestyle = "rgb (0,0,0";
ctx.strokect (box_x, box_y, box_width, box_height);
// Collisions de détection
// dessiner des images
pour (var i = 0; i <snake.length; i ++)
{
ctx.DrawImage (image_sprite, serpent [i] .x, serpent [i] .y);
}
ctx.DrawImage (image_sprite, aliments.x, aliments.y);
}
fonction init ()
{
canvas = document.getElementById ("scène");
ctx = canvas.getContext ('2d');
// images
image_sprite = new image ();
image_sprite.src = "images / sprite.png";
image_sprite.onload = function ()
{}
// ojects
Snake = new Array ();
var head = nouveau rôle (0 * unité, 0 * unité, unité, unité, 5, 0, 1, image_sprite, true);
Snake.push (tête);
window.addeventListener ('keydown', play, false);
addFood ();
setInterval (mise à jour, 300); //note
setInterval (DrawScene, 30);
}
Lecture connexe: le jeu de serpent HTML5 parfaitement implémenté en utilisant 63 lignes de code