Die Beispiele in diesem Artikel teilen den entsprechenden Code des JS -Schlangenspiels als Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> Schlangenspiel </title> <style>*{Margin: 0; Polsterung: 0;} Header {Anzeige: Block; Rand: 0 Auto; Breite: 500px; Text-Align: Mitte;} Header H1 {Schriftfamilie: Arial; Schriftgewicht: BOLD;} Header #NewGamebutton {Anzeige: Block; Rand: 20px Auto; Breite: 100px; Polsterung: 10px 10px; Hintergrundfarbe: #8f7a66; Schriftfamilie: Arial; Farbe: weiß; Border-Radius: 10px; Textdekoration: Keine;} Header #NewGamButton: Hover {Hintergrundfarbe: #9f8b77;} Header P {Schriftfamilie: Arial; Schriftgröße: 25px; Rand: 20px auto;} canvas {display: block; Grenze: Medium Double Black; Rand: 4PX Auto; id = "newGaMebutton"> neues Spiel </a> <p> Score: <span id = "Score"> 0 </span> </p> </header> <Canvas id = "Canvas"> Ihr Browser unterstützt das Element <Code> Canvas </code> nicht. </canvas> <script> var canvas = document.getElementById ("canvas"); var ctx = canvas.getContext ("2D"); var snake = new array (); // Simulieren Sie den Schlangenkörper var mit einer Warteschlange. Dir = "rechts"; // Verwenden Sie, um die Richtung des Schlangenkopfes zu steuern. // Breite des Schlangenkörpers var foodx = 0; // die x -Koordinate des Food var foody = 0; // die y -Koordinate des Lebensmittels var headx = 0; // die x -Koordinate des Schlangenkopfes var Heady = 0; // die Y -Koordinate des Schlangenkopfes var maxwidth = 200; // die Höhe der Leinwand var maxheight = 200; // die Breite der Leinwand var time = 400; // die Geschwindigkeit der Schlangen var Score = 0; // Berechnen Sie den Player Score var intervall = null; Canvas.width = maxwidth; canvas.height = maxHeight; window.onload = function () {newGame ();}; document.getElementById ("newGamebutton"). Click (function () {newGame (); // Verwenden Sie die Warteschlange, um den Schlangenkörper zu simulieren. // Verwenden Sie, um die Richtung des Schlangenkopfes Headx = 0 zu steuern; // die x -Koordinate des Schlangenkopfes Kopftum = 0; // die y -Koordinate der Schlangenkopf -Punktzahl = 0; Fenster.ClearInterval (Intervall); Intervall = null; // Initialisieren Sie die Canvas ctx.clearrect (0, 0, maxwidth, maxHeight); // eine Schlange zeichne Drawsnake (); // Port Food setfood (); // Schlangenintervall = window.setInterval (MOVE, Zeit);} Funktion move () {swith (dir) {case "up": Heady = Heady-Size; Break; Fall "rechts": HeadX = HeadX+Größe; Break; Fall "Down": Heady = Heady+Größe; Break; Fall "links": HeadX = Headx-Größe; Break; } if (headX> maxWidth-Größe || Heady> MaxHeight-Größe || Headx <0 || Heady <0) {alert ("Ihre Punktzahl ist:"+Score+"Punkte, weiterhin hart! Grund für den Fehler: Ich bin in eine Mauer gerannt ......"); window.location.reload (); } für (var i = 1; i <snake.length; i ++) {if (Snake [i] [0] == Snake [0] [0] && Snake [i] [1] == Snake [0] [1]) {alarm ("Ihre Punktzahl ist:"+Punkte+"Punkte, weiter hart! window.location.reload (); }} if (snake.length == MaxWidth *maxHeight) {alert ("so fantastisch! ~"); window.location.reload (); } MoveIn (HeadX, Heady); // MOVE EIN GRID} document.onkeydown = Funktion (e) {// Ändern Sie die Schlangenrichtung var code = e.keycode - 37; Switch (Code) {Fall 1: dir = "up"; break; // in Fall 2: dir = "rechts"; break; // Rechtsfall 3: dir = "down"; break; // down case 0: dir = = "left";break;//Left}}//================================================================================================ =======================================================ieben ================================================================= =======================================================ieben ================================================================= ================================================================= ================================================================= Snake.push ([Headx, Heady]); // Schlangenkörperschalter zeichnen (Dir) {case "Up": Drawbody (Headx, Heady + Größe, Headx, Heady + 2 * Größe); brechen; Fall "rechts": Drawbody (Headx - Größe, Kopf, Headx - 2 * Größe, Heady); brechen; Fall "Down": Drawbody (Headx, Heady - Größe, Headx, Heady - 2 * Größe); brechen; Fall "links": Drawbody (Headx + Größe, Headx + 2 * Größe, Heady); brechen; }} Funktion Drawbody (x1, y1, x2, y2) {ctx.fillRect (x1, y1, Größe, Größe); Ctx.FillRect (x2, y2, Größe, Größe); Snake.push ([x1, y1]); Snake.push ([x2, y2]);}//======================================================= ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== ====================================================================== Foody, Größe, Größe);} Funktion foodInsnake () {für (var i = 0; i <snake.length; i ++) {if (foodx == Snake [i] [0] && foody == Snake [i] [1]) {return true; } } zurückkehren false;}//================================================================================================ ==========================================================ieben ==========================================================ieben ==================================================================ieben Ctx.FillRect (x, y, Größe, Größe); // Den Schlangenkopf neu drehen // den neuen Schlangenkopf zum Schlangenarray var newnake = [[x, y]] hinzufügen; Snake = NewsNake.concat (Snake); if(false == eatFood()){//If you don't eat food, reduce one snake tail var snakeTail = SNAKE.pop();//Get the snake tail position CTX.clearRect(snakeTail[0], snakeTail[1], SIZE, SIZE);//Remove the snake tail}}function eatFood(){ if(HEADX == FOODX && HEADY == FOODY){ Ctx.FillStyle = "Block"; Ctx.FillRect (FoodX, Foody, Größe, Größe); setfood (); Score ++; //$("#score").text(Core); document.getElementById ("Score"). Innerhtml = Score; zurückkehren; } return false;} </script> </html>Reproduktionsbild:
Ideen:
Funktion newGame () {setzen Sie die Daten von Schlangen und Brüchen zurück; klares Intervall; initialisieren Sie die Leinwand; zeichne eine Schlange; Nahrung platzieren; Verwenden Sie einen Timer (setInterval), um die Schlange zu verschieben (MOVE -Funktion). } function move () {ändern Sie die Position des nächsten Breitengrads des Schlangenkopfes gemäß der Richtung; Stellen Sie fest, ob das Spiel vorbei ist und der Grund für das Ende (einschließlich Gewinn oder Verlust); Snake bewegt einen Breitengrad (MoveIn -Funktion); } Überwachen Sie die Richtungsschlüssel der Tastatur und ändern Sie den Wert der globalen Variablen -DIR (zum Speichern der Richtung). Funktion MoveIn () {Fügen Sie einen Breitengrad zum vorherigen Breitengrad des Schlangenkopfes als neuer Schlangenkopf hinzu und fügen Sie die Koordinaten des Schlangenkopfes als erstes Element in das Array hinzu, das die Schlange darstellt. Wenn (kein Essen gegessen wurde) {löschen Sie einen Breitengrad zum Schlangenschwanz und nehmen Sie entsprechende Änderungen in der Leinwand vor; }}Es ist zu beachten, dass, wenn Sie die Breite und Höhe in Leinwand in JS einstellen müssen, etwas anders ist als die Einstellung anderer CSS -Eigenschaften.
Canvas.width = maxwidth; canvas.height = maxheight;
Der Herausgeber hat auch ein wunderbares Thema für alle vorbereitet: eine Zusammenfassung klassischer JavaScript -Spiele
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.