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
Einführung in semantische HTML-Tags
In den letzten Jahren war DIV+CSS bei der Website-...
MySQL verwendet benutzerdefinierte Funktionen, um die übergeordnete ID oder untergeordnete ID rekursiv abzufragen
Hintergrund: Wenn es in MySQL eine begrenzte Eben...
Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript
Inhaltsverzeichnis JavaScript importieren 1. Inte...
Führen Sie die Schritte zur Installation der Boost-Bibliothek unter Linux aus
Vorwort Die Boost-Bibliothek ist eine portable, m...
So installieren und konfigurieren Sie Docker nginx
Laden Sie das Nginx-Image in Docker herunter Dock...
Detaillierte Erklärung zur Erstellung von Schießspielen mit CocosCreator
Inhaltsverzeichnis Szeneneinstellung Spielressour...
Tutorial zu XHTML-Webseiten
Dieser Artikel soll vor allem Anfängern einige gr...
Parsen des Linux-Quellcodes epoll
Inhaltsverzeichnis 1. Einleitung 2. Einfaches Epo...
Lösung für falsche Zeichenfolgenwerte in MySQL
Viele Freunde berichten von folgendem Fehler, wen...
Einführung in das Versionsverwaltungstool Rational ClearCase
Rational ClearCase ist ein Tool für das Softwarek...
Vue implementiert Dialogkapselung
Inhaltsverzeichnis Vue2-Schreiben Schreiben der V...
HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife
Beschreibung: Stellen Sie einen Timer ein, um den ...
Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux
Dieser Artikel beschreibt, wie man die PHP-Curl-E...
Detaillierte Erläuterung des Docker-Arbeitsmodus und -Prinzips
Wie in der folgenden Abbildung dargestellt: Wenn ...
JS praktisches objektorientiertes Schlangenspielbeispiel
Inhaltsverzeichnis denken 1. Bild mit dem gierige...