Les exemples de cet article partagent avec vous la démo du jeu JS Snake, qui est achevé uniquement par JS et CSS pour votre référence. Le contenu spécifique est le suivant
<! doctype html> <html> <meta charset = "utf-8"> <éad> <style> * {margin: 0; rembourrage: 0;} .Content {position: absolue; Largeur: 500px; hauteur: 500px; Color d'arrière-plan: # 212121; } .colo {largeur: 48px; hauteur: 48px; Color en arrière-plan: # E6E6E6; Border: 1px solide # 466F85; flottant: à gauche; } .head {/ * background-Color: # 49df85; * / background-iMage: url (./ img / 22.jpg); Border-Radius: 10px; taille arrière: 100%; Position: absolue; hauteur: 48px; Largeur: 48px; } .fruit {/ * background-Color: # 49df85; * / background-iMage: url (./ img / fruit.jpg); taille arrière: 100%; Position: absolue; hauteur: 48px; Largeur: 48px; } .score {Font-Family: 'Bold'; Gauche: 600px; Position: absolue; hauteur: 50px; Largeur: 200px; Color d'arrière-plan: # 212121; Couleur: #FFF; } .newbody {position: absolue; Largeur: 48px; hauteur: 48px; Background-Image: URL (./ img / 33.jpg); taille arrière: 100%; } .btn {Font-Family: 'Bold'; Gauche: 600px; En haut: 100px; Position: absolue; hauteur: 50px; Largeur: 100px; Color d'arrière-plan: # 1193FF; Couleur: #FFF; Texte-aligne: Centre; hauteur de ligne: 50px; taille de police: 20px; curseur: pointeur; Border-Radius: 15px; } </ style> </ head> <body> <div id = "contenu"> </ div> <div id = "stop"> Stop the Game </div> <div style = "top: 180px" id = "start"> Démarrer le jeu </v> <div style = "top: 380px" id = "Gameway"> STATURE: </v> <div> <div ID = "Score"> Score: <p> </ P> type = "text / javascript"> // add status var stop = document.getElementById ('stop'); var start = document.getElementyId ("start"); var gameway = document.getElementById ('gameway'); start.onclick = function () {head.value = '2'; Incident = setInterval (Move, 200);} stop.OnClick = function () {ClearInterval (incident);} // var contenu = document.getElementById ("contenu"); pour (var i = 0; i <100; i ++) {var div = document.CreateElement ("div"); div.classname = "colo"; Content.ApendChild (Div); } var scoreID = document.getElementById ("score"); var scoreNum = 0; var scoreCon = document.CreateElement ("p"); // var scoreText = document.CreateExtNode (scoreNum); // scoreCon.APPENDCHILD (scoreText); SCOREID.APPENDCHILD (ScoreCon); var Head = NULL; // sauver le fruit var à la tête du serpent = nul; // économiser le fruit var dir = null; // Enregistrez la direction du corps Var Snake = nouveau Array (); // Enregistrer la partie ajoutée du corps du corps du serpent var bodynum = 0; // Enregistrez combien de corps sont créés // Créez au hasard la tête et les fruits dans la fonction de contenu CreateType (type) {if (type == 1) {// Créer un numéro aléatoire var row = parseInt (math.random () * 6 +2); var col = paSeInt (math.random () * 6 +2); head = document.CreateElement ("div"); head.classname = "head"; head.style.top = row * 50 + "px"; head.style.left = col * 50 + "px"; Content.ApendChild (tête); // head.style.top =; // head.style.left =; } if (type == 2) {// Créer un nombre aléatoire var row = parseInt (math.random () * 6 +2); var col = paSeInt (math.random () * 6 +2); fruit = document.CreateElement ("div"); fruit.classname = "fruit"; fruit.style.width = "50"; fruit.style.height = "50"; fruit.style.backgroundcolor = "# ea2000"; fruit.style.top = row * 50 + "px"; fruit.style.left = col * 50 + "px"; contenu.ApendChild (fruit); }} // Appelez la méthode de propulse CreateType (1); CreateType (2); // Fonction de mouvement de tête de serpent Var Direction = nouveau tableau; // Enregistrer la direction de chaque corps nouvellement créé // Numéro de conversion var numss = 0; // Fonction d'événement de glissement automatique Move () {if (head.value! = "") {Switch (head.value) {case '1': head.style.top = head.offSetTop-50 + "px"; casser; case '2': head.style.top = head.offsettop + 50 + "px"; casser; case '3': head.style.left = head.offsetleft-50 + "px"; casser; case '4': head.style.left = head.offsetleft + 50 + "px"; casser; }} console.log (head.offsetTop); if (head.offsetTop> 500) {alert ("dépasser la limite! Veuillez rejouer"); } // if (head == null) {// if (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500) {// alert ("dépasser la limite! Veuillez remplacer"); //} if (body.length! = 0) {for (var i = body.length-1; i> = 0; i -) {if (i == 0) {body [0] .value = head.value; } else {body [i] .value = body [i-1] .value; }}} // Convertir la direction // Si l'événement après le fruit est mangé avec succès if (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var row = parseInt (math.random () * 6 +2); var col = paSeInt (math.random () * 6 +2); fruit.style.top = row * 50 + "px"; fruit.style.left = col * 50 + "px"; // enregistre le scoreninum = scoreninum + 1; document.getElementsByTagName ('p') [0] .InnerText = ""; document.getElementsByTagName ('p') [0] .InnerText = scoreNum; // Créer une partie du corps BodyAdd (head.style.top, head.style.left, head.value); } // Contrôlez le corps pour suivre la partie de mouvement de la tête // Lorsque vous avez un corps, vous devez modifier dynamiquement la valeur du corps if (body.length> 0) {var body01 = document.getElementById ('body01'); body01.style.top = head.offsettop + "px"; body01.style.left = head.offsetleft + "px"; switch (head.value) {case '1': body01.style.top = head.offsettop + 50 + "px"; body01.style.left = head.offsetleft + "px"; casser; Cas '2': body01.style.top = head.offsetTop-50 + "px"; body01.style.left = head.offsetleft + "px"; casser; case '3': body01.style.left = head.offsetleft + 50 + "px"; body01.style.top = head.offsettop + "px"; casser; case '4': body01.style.left = head.offsetleft-50 + "px"; body01.style.top = head.offsettop + "px"; casser; }} if (body.length> 1) {body [bodynum-1] .value = body [bodynum-2] .value; for (var i = 1; i <body.length; i ++) {var nu = i + 1; var bodyId = document.getElementById ('body0' + nu); var body_id = document.getElementById ('body0' + i); bodyId.style.top = body_id.offsettop + "px"; bodyId.style.left = body_id.offsetleft + "px"; commutateur (body [bodynum- (body.length-i)]. valeur) {case '1': bodyId.style.top = body_id.offsettop + 50 + "px"; bodyId.style.left = body_id.offsetleft + "px"; casser; Case '2': bodyId.style.top = body_id.offsetTop-50 + "px"; bodyId.style.left = body_id.offsetleft + "px"; casser; case '3': bodyId.style.left = body_id.offsetleft + 50 + "px"; bodyId.style.top = body_id.offsettop + "px"; casser; case '4': bodyId.style.left = body_id.offsetleft-50 + "px"; bodyId.style.top = body_id.offsettop + "px"; casser; }}}} // Créer un bouton Document Time.OnkeyDown = function () {var code = event.KeyCode; switch (code) {// Up Case 38: head.value = '1'; casser; // Down Case 40: head.value = '2'; casser; // Cas de gauche 37: head.value = '3'; casser; // Cas 39 à droite: head.value = '4'; casser; console.log (head.value); }} // Fonction de l'événement augmente de corps bodyAdd (top, gauche, dir) {if (dir! = "") {Dir = dir; } else {dir = head.value; } // Créer un corps pour la première fois if (bodynum == 0) {var newbody = document.createElement ('div'); newbody.classname = "newbody"; newbody.id = "body01"; switch (dir) {case '1': newbody.style.top = head.offsettop-50 + 'px'; newbody.style.left = head.offsetleft + "px"; casser; case '2': newbody.style.top = head.offsettop + 50 + 'px'; newbody.style.left = head.offsetleft + "px"; casser; case '3': newbody.style.left = head.offsetleft-50 + 'px'; newbody.style.top = head.offsettop + "px"; casser; case '4': newbody.style.left = head.offsetleft + 50 + 'px'; newbody.style.top = head.offsettop + "px"; casser; } content.appendChild (newbody); Bodynum = Bodynum + 1; body.push (newbody); } else {// créer var newbody = document.createElement ('div'); newbody.classname = "newbody"; newbody.id = "body0" + (body.length + 1); switch (dir) {case '1': newbody.style.top = body [body.length-1] .offsettop-50 + 'px'; newbody.style.left = body [body.length-1] .offsetleft + "px"; casser; case '2': newbody.style.top = body [body.length-1] .offsettop + 50 + 'px'; newbody.style.left = body [body.length-1] .offsetleft + "px"; casser; case '3': newbody.style.left = body [body.length-1] .offsetleft-50 + 'px'; newbody.style.top = body [body.length-1] .offsetTop + "px"; casser; case '4': newbody.style.left = body [body.length-1] .offsetleft + 50 + 'px'; newbody.style.top = body [body.length-1] .offsetTop + "px"; casser; } content.appendChild (newbody); Bodynum = Bodynum + 1; body.push (newbody); } // body.push (contenu);} // dépasser la limite, réinitialiser la fonction de l'événement d'information initialize () {// réinitialiser le fruit var row = parseInt (math.random () * 6 +2); var col = paSeInt (math.random () * 6 +2); fruit.style.top = row * 50 + "px"; fruit.style.left = col * 50 + "px"; // enregistre le score.getElementsByTagName ('p') [0] .InnerText = ""; // réinitialiser le serpent glouton} Var incident; Incident = setInterval (Move, 200); // Ajouter des opérations // var btn = document.getElementById ('btn'); // btn.onclick = function () {// clearInterval (incident); //} // </ script> </ body> </ html>Il est toujours amélioré et j'espère que cela sera utile à l'apprentissage de tout le monde.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.