Les exemples de cet article partagent le code pertinent du jeu JS Snake pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> jeu de serpent </ title> <style> * {margin: 0; rembourrage: 0;} en-tête {affichage: bloc; marge: 0 auto; Largeur: 500px; Text-Align: Centre;} En-tête H1 {Font-Family: Arial; Font-Weight: Bold;} En-tête #NewGameButton {affichage: bloc; marge: 20px automatique; Largeur: 100px; rembourrage: 10px 10px; Color d'arrière-plan: # 8F7A66; Font-Family: Arial; Couleur: blanc; Border-Radius: 10px; Text-Decoration: Aucun;} En-tête #NewGameButton: Hover {Background-Color: # 9F8B77;} En-tête P {Font-Family: Arial; taille de police: 25px; marge: 20px auto;} canvas {display: block; Border: moyen double noir; marge: 4px auto;} </ style> </ head> <body> <e-header> <h1> jeu de serpent </h1> <a href = "javascript: newgame ();" id = "newgamebutton"> nouveau jeu </a> <p> score: <span id = "score"> 0 </span> </p> </ header> <canvas id = "canvas"> Votre navigateur ne prend pas en charge l'élément <code> canvas </code>. </ canvas> <cript> var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2d"); var Snake = new Array (); // simulez le corps de serpent var avec une file d'attente dir = "droite"; // Utiliser pour contrôler la direction de la taille de la tête de serpent Taille = 20; // Largeur du corps de serpent var foodx = 0; // La coordonnée X de la nourriture Var Foody = 0; // La coordonnée y du Food var Headx = 0; // la coordonnée x de la tête de serpent var heady = 0; // La coordonnée y de la tête de serpent var maxwidth = 200; // la hauteur de la toile var maxheight = 200; // la largeur du temps var en toile = 400; // La vitesse du score VAR Snake = 0; // Calculez le score du joueur Var Interval = null; Canvas.width = maxwidth; canvas.height = maxHeight; window.onload = function () {newgame ();}; document.getElementByid ("newGameButton"). Click (function () {newgame ();}); function newgame () {snake = []; // Utilisez la file d'attente pour simuler le corps de serpent dir = "droit"; // Utiliser pour contrôler la direction de la tête de serpent Headx = 0; // La coordonnée x de la tête de serpent Heady = 0; // La coordonnée y du score de tête de serpent = 0; window.ClearInterval (interval); intervalle = null; // Initialisez le canevas ctx.clearrect (0, 0, maxwidth, maxheight); // dessine un serpent de serpent (); // Port Food SetFood (); // Move Snake Interval = Window.SetInterval (Move, Time);} fonction move () {switch (dir) {case "up": heady = heady-size; break; case "à droite": HeadX = headx + taille; Break; cas "Down": Heady = Heady + Taille; Break; Case "Left": HeadX = Headx-Size; Break; } if (headx> maxwidth-size || heady> maxheight-size || headx <0 || heady <0) {alert ("Votre score est:" + score + "Points, continuez à travailler! Raison de l'échec: j'ai rencontré un mur ......"); window.location.reload (); } pour (var i = 1; i <Snake.length; i ++) {if (Snake [i] [0] == Snake [0] [0] && Snake [i] [1] == Snake [0] [1]) {alert ("Votre score est:" + score + "Points, continuez à travailler dur! Raison pour la défaillance: j'ai heurté moi-même ...."); window.location.reload (); }} if (snake.length == maxwidth * maxHeight) {alert ("So génial! ~"); window.location.reload (); } MoveIn (HeadX, Heady); // Move One Grid} document.onkeydown = function (e) {// Modifiez la direction du serpent var code = e.KeyCode - 37; switch (code) {cas 1: dir = "up"; break; // dans le cas 2: dir = "droit"; bris; // droite cas 3: dir = "down"; bris; // case à bas 0: dir = "left";break;//Left}}//================================================================================================ =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================. Snake.push ([Headx, Hearty]); // Dessin Snake Body Switch (Dir) {case "up": drawbody (headx, heady + taille, headx, heady + 2 * taille); casser; Case "à droite": DrawBody (Headx - Taille, Heary, Headx - 2 * Taille, Heary); casser; Case "Down": Drawbody (Headx, Hearty - Size, Headx, Hearty - 2 * Taille); casser; Case "à gauche": Drawbody (tailx + taille, en tête, têtes + 2 * taille, enivrants); casser; }} fonction DrawBody (x1, y1, x2, y2) {ctx.fillrect (x1, y1, taille, taille); Ctx.fillrect (x2, y2, taille, taille); Snake.push ([x1, y1]); Snake.push ([x2, y2]);}//======================================================= ==========================================================================. ==========================================================================. ==========================================================================. ==========================================================================. ==========================================================================. ==========================================================================. ==========================================================================. Foody, Taille, Taille);} fonction FoodInSnake () {for (var i = 0; i <Snake.length; i ++) {if (foodx == Snake [i] [0] && goody == Snake [i] [1]) {return true; } } retour false;}//================================================================================================ ==========================================================================================================. ==========================================================================================================. ===========================================================================================================. Ctx.fillrect (x, y, taille, taille); // re-repose la tête de serpent // Ajoutez la nouvelle tête de serpent au réseau de serpent var newake = [[x, y]]; Snake = newsnake.concat (serpent); if (false == EatFood ()) {// Si vous ne mangez pas de nourriture, réduisez une queue de serpent var snaKetail = Snake.pop (); // Obtenez la position de la queue de serpent ctx.clearrect (SnaKetail [0], SnaKetail [1], taille, taille); // Retirez le Snake Tail}} Fonction EatFood () {if (Headx == FoodX &&&&&&A CTX.FillStyle = "Block"; CTX.Fillrect (FoodX, Foody, Taille, Taille); setFood (); Score ++; //$("#score").Text(score); document.getElementById ("score"). innerHtml = score; Retour Vrai; } return false;} </ script> </html>Image de reproduction:
Idées:
fonction newgame () {réinitialiser les données du serpent et des fractions; intervalle clair; initialiser la toile; dessiner un serpent; Placer la nourriture; Utilisez une minuterie (setInterval) pour déplacer le serpent (fonction de déplacement); } fonction move () {modifiez la position de la latitude suivante de la tête de serpent selon la direction; déterminer si le jeu est terminé et la raison de la fin (y compris la victoire ou la perte); Snake déplace une latitude (fonction Movein); } Surveillez les touches de direction du clavier et modifiez la valeur de la variable globale DIR (utilisée pour stocker la direction); fonction movein () {ajouter une latitude à la latitude précédente de la tête de serpent comme une nouvelle tête de serpent et ajouter les coordonnées de la tête de serpent comme premier élément au tableau représentant le serpent; Si (aucune nourriture n'a été consommée) {supprimer une latitude à la queue de serpent et apporter des modifications correspondantes dans la toile; }}Il convient de noter que si vous devez définir la largeur et la hauteur en toile en js, il est légèrement différent de la définition d'autres propriétés CSS.
Canvas.width = maxwidth; canvas.height = maxHeight;
L'éditeur a également préparé un sujet merveilleux pour tout le monde: un résumé des jeux JavaScript classiques
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.