Kommentar: Schlangenessen, die Hauptfunktionen: 1. Die Bewegung der Schlange 2. Ändern Sie die Richtung der Schlange. Es ist einfach und praktisch in 60 Zeilen. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Ich habe HTML5 in der Vergangenheit selten beachtet. Ich habe das Gefühl, dass die Auswahl von HTML nach und nach ein Trend geworden ist, also möchte ich davon wissen. Ich fand ein Spiel, um es zu lernen. Nachdem ich dieses Spiel geschrieben hatte, hatte ich das Gefühl, dass HTML5 und JS sehr eng integriert waren, wenn JS nicht besonders gut war. Ich denke, ich muss zuerst einen Nachhilfe -JS -Tutoring nehmen. Dies ist nur mein persönlicher Rat und ist möglicherweise nicht genau. Eine andere Sache ist, dass Sie sich besonders über Ihr Denken und Ihre Logik klar machen müssen, da das Schreiben von Spielen schmerzhaft sein kann.Die Hauptfunktionen von gierigen Schlangen: 1. Die Schlange bewegt sich 2. Ändern Sie die Richtung der Schlange.
Als ich zum ersten Mal ein Spiel schrieb, als ich zum ersten Mal HTML5 schrieb, fühlte es sich sehr schwierig an. Ich habe das Schreiben fertiggestellt und ich werde es mit dir teilen. Kommunikation miteinander ... Wenn Sie keine Vorschläge verstehen oder keine Vorschläge haben, hinterlassen Sie mir bitte eine Nachricht. . . Der Code ist sehr kurz, nur 60 Zeilen.
Aber dies ist ein halbfeindliches Produkt und es ist fertig. Erneut aktualisieren
<! DocType html>
<html>
<body>
<Canvas> </canvas>
<script type = "text/javaScript">
var c = document.getElementById ("mycanvas");
var time = 160; // Schlangengeschwindigkeit
var cxt = C.GetContext ("2D");
var x = y = 8;
var a = 0; // Lebensmittelkoordinaten
var t = 20; // opfere dein Leben
var map = []; // Aufzeichnung des Schlangenreitwegs aufzeichnen
var size = 8; // Schlangenkörpereinheitgröße
var Richtung = 2; // 1 nach oben 2 rechts 0 links 3 unten
Interval = window.setInterval (set_game_speed, Zeit); // Schlange bewegen
Funktion set_game_speed () {// Schlange verschieben
Schalter (Richtung) {
Fall 1: y = y-Größe; Break;
Fall 2: x = x+Größe; brechen;
Fall 0: x = x-Größe; Break;
Fall 3: y = y+Größe; brechen;
}
if (x> 400 || y> 400 || x <0 || y <0) {
Alarm ("Du bist tot, arbeite weiter hart! Grund für Misserfolg: Ich schlage eine Mauer ..."); window.location.reload ();
}
für (var i = 0; i <map.length; i ++) {
if (parseInt (map [i] .x) == x && parseInt (map [i] .y) == y) {
Alarm ("Du bist tot, arbeite weiter hart! Der Grund für das Scheitern: Ich bin auf mich selbst gestoßen ..."); window.location.reload ();
}
}
if (map.length> t) {// Halten Sie Ihre Opferlänge
var cl = map.shift (); // Löschen Sie das erste Element des Arrays und geben Sie das ursprüngliche Element zurück
cxt.clearrect (cl ['x'], cl ['y'], Größe, Größe);
};
map.push ({'x': x, 'y': y}); // Daten zum Ende des ursprünglichen Arrays hinzufügen
cxt.fillstyle = "#006699"; // interne Füllfarbe
cxt.strokestyle = "#006699"; // Grenzfarbe
Cxt.FillRect (x, y, Größe, Größe); // Rechteck zeichnen
if ((a*8) == x && (a*8) == y) {// Essen essen
rand_frog (); t ++;
}
}
document.onkeydown = function (e) {// die Schlangenrichtung ändern
var code = e.keycode - 37;
Switch (Code) {
Fall 1: Richtung = 1; brechen; // on
Fall 2: Richtung = 2; brechen; // rechts
Fall 3: Richtung = 3; Break; // Weiter
Fall 0: Richtung = 0; Break; // links
}
}
// zufällig Essen platzieren
Funktion rand_frog () {
a = math.ceil (math.random ()*50);
cxt.fillstyle = "#00000"; // interne Füllfarbe
cxt.strokestyle = "#00000"; // Grenzfarbe
Cxt.FillRect (A*8, A*8, 8, 8); // Zeichnen Sie das Rechteck
}
// zufällig Essen platzieren
rand_frog ();
</script>
</body>
</html>