In diesem Artikel erfahren Sie alles über die Verwendung von einfachem JS-Code zur Implementierung des klassischen Snake-Spiels. Interessierte Freunde können sich als Referenz darauf beziehen.
In der Vergangenheit war Nokias Snake der letzte Schrei, als es zu schwierig war, sie mit Java zu implementieren. Jetzt können Sie eine einfache Demo mit nur 20 Zeilen Code erstellen Webseite. Die Zeiten schreiten voran
Vollständiger Skriptcode:
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body>
</html>Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Wie implementiert man den Node+Express-Persönlichkeits-Chatroom?
So erstellen Sie ein automatisches Website-Erstellungsprojekt mit Vue (ausführliches Tutorial)
Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Snake-Spiel mit JS-Code (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So verwenden Sie JS-Code
Implementieren Sie die 301-Sprungmethode über JS-Code
So lösen Sie das Problem, dass JS-Code nach der Formatierung nicht ausgeführt werden kann
Sublime führt JS-Code aus
PS-Seriennummer CS5
Wissen Sie, ob Sie die andere Person sofort kündigen, nachdem Sie ihr auf Douyin gefolgt sind?
Window.setInterval()-Methode
Google Earth kann keine Verbindung zur Serverlösung herstellen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
