JavaScript zur Implementierung der Webversion des Schlangenspiels
|
In diesem Artikel wird der spezifische Code für JavaScript zur Implementierung des Schlangenspiels auf der Webseite zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<head><title>Schlange</title>
</Kopf>
<Text>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<Skript>
var canv = document.getElementById("Leinwand");
var ctx = canv.getContext("2d");
Variable Punktzahl = 0;
//Definieren Sie einen Blockkonstruktor var Block = Funktion (Spalte, Zeile, Größe)
{
diese.col=col;
diese.Zeile=Zeile;
diese.Größe=Größe;
};
//Definieren Sie die Prototypmethode „draw“ der Blockfunktion.
Block.prototype.draw = Funktion()
{
ctx.fillRect(diese.Spalte*diese.Größe, diese.Zeile*diese.Größe, diese.Größe, diese.Größe)
}
//Objekt Schlange definieren var snake = {
Körper:[
neuer Block(20,20,10),
neuer Block(20,21,10),
neuer Block(20,22,10)
],
Richtung: „rechts“,
};
//Definiere die Funktion zum Zeichnen einer Schlange snake.draw=function()
{
für (var i = 0; i < this.body.length; i++)
{
dies.body[i].draw();
}
};
Schlange.Bewegen = Funktion()
{
var Kopf = dieser.Body[0];
wenn(snake.direction=="rechts")
{
var newhead = neuer Block (head.col + 1, head.row, head.size)
}
wenn(snake.direction == "links")
{
var newhead = neuer Block(Kopf.Spalte-1,Kopf.Zeile,Kopf.Größe);
}
wenn(snake.direction=="nach oben")
{
var newhead = neuer Block (Kopf.Spalte, Kopf.Zeile-1, Kopf.Größe)
}
wenn(snake.direction=="nach unten")
{
var newhead = neuer Block (Kopf.Spalte, Kopf.Zeile+1, Kopf.Größe)
}
wenn(newhead.col<0 || newhead.col>39 )
{
Intervall löschen(Intervall-ID);
Spiel vorbei();
}
wenn(neuerKopf.Zeile<0 || neuerKopf.Zeile>39 )
{
Intervall löschen(Intervall-ID);
Spiel vorbei();
}
für (var i = 0; i < this.body.length; i++)
{
wenn(dieser.body[i].col==newhead.col &&dieser.body[i].row==newhead.row)
{
Intervall löschen(Intervall-ID);
Spiel vorbei();
}
}
dies.body.unshift(neuer Kopf);
wenn(newhead.col==apple.posX &&newhead.row==apple.posY)
{
Punktzahl = Punktzahl + 100;
während(wahr)
{
var checkApple =false;
apple.posX=Math.floor(Math.random()*40);
apple.posY=Math.floor(Math.random()*40);
für (var i = 0; i < this.body.length; i++)
{
wenn(dieser.body[i].col==apple.posX &&dieser.body[i].row==apple.posY)
Überprüfen Sie, ob der Apple-Name richtig ist.
}
wenn(!checkApple)
brechen;
}
}
anders{
dies.body.pop();
}
};
//Erstelle ein Apple-Objekt var apple={
posX:Math.floor(Math.random()*40),
posY:Math.floor(Math.random()*40),
GrößeR:5
}
//Apfel zeichnen-Funktion apple.draw=function()
{
ctx.fillStyle="Grün";
ctx.beginPath();
ctx.arc(diese.posX*10+5,diese.posY*10+5,5,0,Math.PI*2,false);
ctx.fill();
ctx.fillStyle="Schwarz";
};
//Ende var gameover = function()
{
ctx.font="60px Comic Sans MS";
ctx.textAlign="zentriert";
ctx.textBaseline="Mitte";
ctx.fillText("SPIEL VORBEI!",200,200)
};
// Zeitfunktion var intervalId = setInterval (Funktion ()
{
ctx.clearRect(0,0,400,400);
ctx.font="20px Arial";
ctx.fillText("Punktzahl:"+score,5,15);
Schlange.zeichnen();
Schlange.bewegen();
Apfel.Zeichnen();
ctx.strokeRect(0,0,400,400);
},200);
//Snake-Tastensteuerung $("body").keydown(function(event)
{
Konsole.log(Ereignis.Schlüsselcode);
wenn(event.keyCode==37 &&snake.direction!="rechts")
{
Schlange.Richtung="links";
}
wenn(event.keyCode==38 &&snake.direction!="nach unten")
{
Schlange.Richtung="nach oben";
}
wenn(event.keyCode==39 &&snake.direction!="links")
{
Schlange.Richtung="rechts";
}
wenn(event.keyCode==40 &&snake.direction!="nach oben")
{
Schlange.Richtung="nach unten";
}
}
);
</Skript>
</body>
</html>
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung der MySQL 30-Militärregeln
>>: Detailliertes Tutorial zur Installation von Ubuntu 19.10 auf Raspberry Pi 4
Artikel empfehlen
Detaillierte Erläuterung des Linux-Textverarbeitungsbefehls sort
sort Den Inhalt einer Textdatei sortieren Verwend...
Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage
Detaillierte Erläuterung der Implementierungsmeth...
CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18
veranschaulichen Dieser Artikel wurde am 20.05.20...
So exportieren Sie MySQL-Abfrageergebnisse in CSV
Um MySQL-Abfrageergebnisse in CSV zu exportieren,...
So schreiben Sie eine Node.JS-Version eines Spiels
Inhaltsverzeichnis Überblick Build-Prozess Verwan...
Zusammenfassung der Verwendung von Linux-SFTP-Befehlen
sftp ist die Abkürzung für Secure File Transfer P...
Detaillierte Erklärung zum Einrichten eines DNS-Servers unter Linux
1. DNS-Server-Konzept Die Kommunikation im Intern...
Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Datums- und Uhrzeitauswahl
In diesem Artikelbeispiel wird der spezifische Co...
Detailliertes Tutorial zum Kompilieren und Installieren von Python3.6 unter Linux
1. Gehen Sie zunächst auf die offizielle Website ...
CSS3-Mauszeiger-Übergangszoomeffekt
Das Folgende ist ein Bild-Zoom-Effekt, der in rei...
Detaillierte Erläuterung der grundlegenden Verwendung von MySql-Stored-Procedure-Parametern
Verwendung gespeicherter Prozeduren in Parametern...
Einführung in die grundlegenden TypeScript-Typen
Inhaltsverzeichnis 1. Grundtypen 2. Objekttyp 2.1...
Native JS realisiert einheitliche Bewegungen verschiedener Sportarten
In diesem Artikel wird eine einheitliche Bewegung...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Umfassendes Verständnis der Überwachung von HTML-Formulareingaben
Heute habe ich einen Blogbeitrag über Eingabeerei...