JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine zerschlagen werden müssen
|
In diesem Artikel wird der spezifische JS-Code zur Implementierung des Flipperspiels mit Ziegelsteinen als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Obwohl es in nativem JS geschrieben ist, gibt es immer noch einige Mängel. Der Code kann direkt verwendet werden, indem man ihn in HTML kopiert Die Geschwindigkeit ist zufällig, da es sich um horizontale und vertikale Geschwindigkeiten handelt und der angezeigte Geschwindigkeitswert des Balls daher die Summe ihrer Werte (Kubik und Quadratwurzel) ist.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Dokument</title>
<Stil>
.Container{
Breite: 500px;
Höhe: 500px;
Rand: 1px durchgezogen #000;
Rand: automatisch;
Position: relativ;
}
.brickBox{
Breite: 500px;
Höhe: 300px;
/* Hintergrundfarbe: gelbgrün; */
Position: absolut;
links: 0;
oben: 0;
}
.Ball{
Breite: 15px;
Höhe: 15px;
Hintergrundfarbe: lila;
Randradius: 50 %;
Position: absolut;
unten: 30px;
links: 235px;
/* Rand links: -15px; */
}
.slider{
Breite: 150px;
Höhe: 30px;
Hintergrundfarbe: #00f;
Position: absolut;
/* links: 50 %; */
links: 175px;
/* Rand links: -75px; */
unten: 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="brickBox"></div>
<div Klasse="Ball"></div>
<div Klasse="Schieberegler"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;">Aktuelle Geschwindigkeit: <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;">Aktuelle Anzahl zerstörter Blöcke: <span id="count"></span> </div>
</body>
<Skript>
// Alle aktuellen Tags abrufen var container = document.querySelector('.container')
var brickBox = container.querySelector('.brickBox')
var ball = container.querySelector('.ball')
var Schieberegler = Container.QuerySelector('.slider')
// Bausteine dynamisch erstellen // Bausteingröße definieren var brickWidth = 50;
var Ziegelhöhe = 15;
// Anzahl der Steine berechnen var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)
// konsole.log(brickNum);
var brickColNum = brickBox.clientWidth / brickWidth
// Entsprechend der Menge erstellen for(var i=0;i<brickNum;i++){
var div = Dokument.createElement('div')
setStyle(div,{
Breite: Ziegelbreite + "px",
Höhe: Ziegelhöhe + "px",
Hintergrundfarbe:getColor(true),
Position: „absolut“,
oben: parseInt(i/ZiegelSpaltenAnzahl)*ZiegelHöhe + 'px',
links:(i%ZiegelSpaltennummer)*ZiegelBreite + 'px'
})
brickBox.appendChild(div)
}
// Klicken Sie auf den Schieberegler, um den Ball in Bewegung zu setzen // Definieren Sie die horizontalen und vertikalen Bewegungswerte var speedX = getRandom(1,8);
var GeschwindigkeitY = getRandom(1,8);
document.querySelector("#Geschwindigkeit").innerHTML = Math.sqrt(Math.pow(GeschwindigkeitX,2)+Math.pow(GeschwindigkeitY,2))
var Zeitgeber;
//Klicken, um den Schieberegler zu verschieben.onclick = move;
//Eingabetaste startet die Popup-Funktion move(){
Variablenanzahl=0;
Intervall löschen(Timer)
Timer = Intervall festlegen(Funktion(){
// Beginnen Sie mit der Bewegung // Holen Sie sich die linke und obere Seite des Balls
lass links = ball.offsetLeft;
lass oben = Ball.OffsetTop;
// Lasse links und oben die Geschwindigkeit erhöhen // Der Ball kollidiert mit dem Slider if (boom (slider, ball)) {
GeschwindigkeitY = -GeschwindigkeitY
}
// Der kleine Ball kollidiert mit der großen Kiste if(left<=0 || left>=container.clientWidth - ball.offsetWidth){
GeschwindigkeitX = -GeschwindigkeitX
}
wenn(oben<=0){
GeschwindigkeitY = -GeschwindigkeitY
}
//Überprüfe, ob alle Steine und Bälle kollidieren for(let i=0;i<brickBox.children.length;i++){
wenn(boom(brickBox.children[i],ball)){
GeschwindigkeitY = -GeschwindigkeitY
brickBox.removeChild(brickBox.children[i]);
zählen++;
}
}
console.log(Anzahl)
document.querySelector("#Anzahl").innerHTML=Anzahl
// SPIEL VORBEI
wenn(oben>=Container.Clienthöhe-Ball.Offsethöhe){
Intervall löschen(Timer)
if(confirm("Spiel vorbei, ob erneut gespielt werden soll")){
Standort.neu laden();
}else{alert('Ihr Endergebnis'+Anzahl)}
}
links += GeschwindigkeitX
oben += GeschwindigkeitY
// Setze die linke und obere Seite des Balls
ball.style.left = links + "px"
ball.style.top = oben + "px"
},20)
}
// Den Slider der Mausbewegung folgen lassen slider.onmouseover = function(){
Dokument.onmousemove = Funktion(e){
var e = e || Fenster.Ereignis;
var x = e.seiteX;
var l = x - Container.OffsetLinks - 1 - Schieberegler.OffsetBreite / 2
wenn(l<0){
l = 0
}
wenn (l > Container.Clientbreite - Schieberegler.Offsetbreite) {
l = Container.Clientbreite - Schieberegler.Offsetbreite
}
Schieberegler.Stil.links = l + "px"
}
}
//Den Schieberegler mit der linken und rechten Tastatur bewegen lassen window.onload = function(){
Dokument.onkeydown = e=>{
var e = e || Fenster.Ereignis;
var Schlüsselcode = e.Schlüsselcode || e.welcher;
var Schlüsselwort = String.fromCharCode(Schlüsselcode).toLowerCase();
wenn(Schlüsselcode==13){
bewegen();
}
wenn(Schlüsselwort=='a'){
console.log("1111")
Schieberegler.Stil.links = Schieberegler.OffsetLinks-15+"px"
}sonst wenn(Schlüsselwort=='d'){
console.log("222")
Schieberegler.Stil.links=Schieberegler.OffsetLinks+15+"px"
}
Konsole.log(Schieberegler.OffsetLinks)
}
}
// Kapselung der Kollisionserkennungsfunktion function boom(node1,node2){
// Es gibt nur 4 Möglichkeiten, eine Kollision zu vermeiden, if(node1.offsetLeft+node1.offsetWidth<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){
gibt false zurück;
}anders{
gibt true zurück;
}
}
//Kapselung der Funktion zum Abrufen einer zufälligen Farbe function getColor(hex=true){
wenn(hex){
var Farbe = "#"
für(var i=0;i<3;i++){
var rgb = getRandom(256).toString(16);
rgb = rgb.Länge===1?'0'+rgb:rgb;
Farbe += RGB
}
Farbe zurückgeben;
}
gibt `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})` zurück
}
// Kapselt die Funktion zum Setzen des Stils ein function setStyle(ele,styleObj){
für (var attr in styleObj) {
ele.style[attr] = styleObj[attr]
}
}
//Kapselung der Funktion zum Abrufen von Zufallszahlen function getRandom(a,b=0){
var max = Math.max(a,b);
var min = Math.min(a,b)
gibt Math.floor(Math.random() * (max-min)) + min zurück
}
</Skript>
</html>Das Wirkungsdiagramm ist in der Abbildung dargestellt
Ohne das Plug-In ist der Stil etwas hässlich. 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 Schritte zum Selbststart und geplanten Start von Python-Skripten unter Linux
>>: Tutorial zur Installation von PHP5, Deinstallation von PHP und Installation von PHP7 auf CentOS
Artikel empfehlen
Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes
In diesem Artikel finden Sie den spezifischen Cod...
Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana
Überblick Prometheus ist ein Open-Source-Dienstüb...
Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten
Die Methode zum Abrufen der Zeigerposition in Jav...
W3C Tutorial (6): W3C CSS Aktivitäten
Ein Stylesheet beschreibt, wie ein Dokument angez...
MySQL-Entwicklungsleistungsforschung: Optimierungsmethode zum Batch-Einfügen von Daten
1. Auf welche Probleme sind wir gestoßen? In Stan...
7 Hauptelemente der Neugestaltung von Webseiten Teilen Sie die 7 Hauptelemente der Neugestaltung von Webseiten
Shopify Plus ist die Enterprise-Version der von u...
Installation und Verwendung von Vue
Inhaltsverzeichnis 1. Vue-Installation Methode 1:...
Ein kurzes Verständnis der Unterschiede zwischen MySQL InnoDB und MyISAM
Vorwort MySQL unterstützt viele Arten von Tabelle...
Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3
Details zur Sicherheitsanfälligkeit VSFTP ist ein...
6 Vererbungsmethoden von JS Advanced ES6
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
Beispiel für die Konfiguration der Timeout-Einstellung für MySQL-Datenbanken
Inhaltsverzeichnis Vorwort 1. JDBC-Timeout-Einste...
So installieren Sie Nginx und konfigurieren mehrere Domänennamen
Nginx-Installation CentOS 6.x yum verfügt standar...
Detaillierte Erklärung zur Verwendung von Vue+Element zum Implementieren des Tags oben auf der Seite
Inhaltsverzeichnis 1. Seiten-Rendering 2. Tags hi...
Detaillierte Erläuterung der JavaScript-Implementierung der Hash-Tabelle
Inhaltsverzeichnis 1. Hash-Tabellenprinzip 2. Das...
CSS verwendet die BEM-Namenskonvention
Welche Informationen möchten Sie erhalten, wenn S...