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
WeChat-Applet + MQTT, ESP8266-Implementierungsmethode zum Ablesen von Temperatur und Luftfeuchtigkeit
Erstens das Prinzip der esp8266 veröffentlicht Na...
Tutorial zum Bereitstellen von nginx+uwsgi in Django-Projekten unter Centos8
1. Virtuelle Umgebung virtualenv installieren 1. ...
Lösung für die durch das FOUC-Problem auf Webseiten verursachte Verwirrung auf Webseiten
FOUC steht für Flash of Unstyled Content, abgekürz...
Allgemeine DIV-Aufgaben (Teil 2) — Umwandlung in Editoren und verschiedene DIY-Anwendungen von DIV
Seit der Einführung des contentEditable-Attributs ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Win10
Ich möchte die Installations- und Konfigurationsm...
RGB-Farbtabellensammlung
RGB-Farbtabelle Farbe Englischer Name RGB 16 Farb...
Detaillierte Erklärung zur Verwendung verschiedener MySQL-Indizes
1. Langsames Abfrageprotokoll 1.1 MySQL-Protokoll...
Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte
In diesem Artikelbeispiel wird der spezifische Im...
Detaillierte Erklärung der Whitelist-Regeln von nginx-naxsi
Syntax der Whitelist-Regel: Grundregel wl:ID [neg...
Reines HTML+CSS, um einen Tippeffekt zu erzielen
In diesem Artikel wird hauptsächlich der durch re...
So zählen Sie das Datum mit Bash herunter
Sie möchten wissen, wie viele Tage es bis zu eine...
Teilen einiger wunderbarer Verwendungsmöglichkeiten von wxs-Dateien im WeChat-Applet
Inhaltsverzeichnis Vorwort Anwendung Filter Ziehe...
Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular
Inhaltsverzeichnis Initialisierung von Echart App...
Der Unterschied zwischen „where“ und „on“ in MySQL und wann sie verwendet werden
Als ich früher Join-Tabellenabfragen geschrieben ...
Lösung für das Problem, dass Eingaben im Formular nicht übermittelt werden können, wenn diese deaktiviert sind
Ich habe vorher ein Testprogramm geschrieben, in d...