Natives JS zur Realisierung eines einfachen Schlangenspiels

In diesem Artikel wird der spezifische Code von js zur Implementierung des Schlangenspiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Erstes Bild

Und nun ohne weitere Umschweife der Code. Wenn er dir gefällt, hinterlasse uns bitte deine Sternchen ♥(ˆ◡ˆԅ)

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <Titel></Titel>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
 
        .l {
            schweben: links;
        }
 
        .R {
            schweben: rechts;
        }
 
        .clear_fix::nach {
            Inhalt: '';
            Höhe: 0;
            Breite: 100 %;
            Anzeige: Block;
            klar: beides;
            Überlauf: versteckt;
            Sichtbarkeit: versteckt;
        }
 
        .Körper {
            Rand: 50px 0 0 50px;
            Breite: 700px;
        }
 
        .forts. {
            Breite: 500px;
            Höhe: 500px;
            Rand: 1px durchgehend grün;
            Rand rechts: 8px;
            Position: relativ;
        }
 
        .cont div {
            Position: absolut;
            Breite: 10px;
            Höhe: 10px;
            Hintergrundfarbe: orange;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
        }
 
        .fortsetzung .snakeHead {
            Randradius: 50 %;
        }
 
        .cont span {
            Position: absolut;
            Anzeige: Inline-Block;
            Breite: 10px;
            Höhe: 10px;
            Rand: 1px durchgezogen #000;
            Box-Größe: Rahmenbox;
            Randradius: 50 %;
            Hintergrund: grün;
 
        }
 
        .Punktzahl {
            Breite: 188px;
            Höhe: 500px;
            Rand: 1px durchgehend rot;
 
        }
 
        .score p {
            Textausrichtung: zentriert;
            Höhe: 50px;
            Zeilenhöhe: 50px;
            Schriftgröße: 30px;
            Rand: 20px 0;
            Farbe: braun
        }
        .Ergebnis .Zeit{
            Farbe: Chartreuse;
            Schriftgröße: 20px;
        }
        .btn {
            Rand links: 50px
        }
 
        .btn .aktiv {
            Hintergrundfarbe: grün;
        }
 
        Taste {
            Breite: 100px;
            Höhe: 30px;
            Schriftgröße: 24px;
        }
    </Stil>
</Kopf>
 
<Text>
    <div id="wrap">
        <div Klasse="Body Clear_Fix">
            <div Klasse="Fortsetzung l">
            </div>
            Punktzahl:
                </br>
                <p>0 Punkte</p>
                <hr>
                Zeit:
                <p Klasse="Zeit"></p>
            </div>
        </div>
        <div Klasse="btn">
            <button>Starten</button>
            <button class="active">Normal</button>
            <button>Schwierig</button>
            <button>Hölle</button>
        </div>
    </div>
    <Skript>
        var Schlange = {
            /* Globale Ereignisse initialisieren, anfänglichen Ereignis-Listener hinzufügen*/
            init: Funktion () {
                dies.btns = document.querySelectorAll('button');
                Dies.score = document.querySelector('p');
                dies.cont = document.querySelector('.cont');
                //Container für Zeitanzeige this.time = document.querySelector('.time');
                //Richtung der Schlange, „r“ bedeutet rechts this.dir = „r“;
 
                /* Zeitgeber */
                dieser.timer = '';
                /* Ursprüngliche Position des Schlangenkopfes */
                dies.kopf = {
                    l: 30,
                    t: 10
                }
                //Schlangenschwanz this.ender = {
                    l: '',
                    T: ''
                };
                dieses.Lebensmittelelement = {
                    l: '',
                    T: ''
                };
                //Startzustand this.isStart = false;
                /* Punktezähler */
                dieser.Zähler = 0;
                //Der einfache Status ist 1, der schwierige ist 2, der Höllenstatus ist 3
                dieser.status = 1;
                diese.Geschwindigkeit = 10
                this.btns[0].onclick = this.startFn //Starten oder pausieren this.btns[1].onclick = this.simpleFn //Abhören im einfachen Modus this.btns[2].onclick = this.difcultFn //Abhören im schwierigen Modus this.btns[3].onclick = this.hardFn //Abhören im Höllenmodus this.initCreate();
                dies.getTime()
                //Ein zufälliges Lebensmittel this.getfood()
            },
            initErstellen() {
                //Erstelle einen ersten Schlangenkopf und 3 Schlangenkörper für (let i = 0; i <= 3; i++) {
                    let item = document.createElement('div');
                    Objekt.zuweisen(item.style, {
                        links: this.head.l - 10 * i + 'px',
                        oben: this.head.t + 'px',
                        /* borderRadius: '50%' */
                    })
                    wenn (i == 0) {
                        item.className = "Schlangenkopf"
                    }
                    Schlange.cont.appendChild(Artikel);
                }
            },
            /* Füge einen Abschnitt des Schlangenkörpers hinzu*/
            createSnake: Funktion (Objekt) {
                Intervall löschen(snake.timer)
                var div = document.createElement('div');
                div.style.left = Schlange.ender.l;
                div.style.top = snake.ender.t;
                Schlange.cont.appendChild(div);
                Konsole.log(Schlange.Kontrolle.Kinder);
                Schlange.bewegen();
                /* konsole.log(snake.cont); */
            },
            /*Überprüfen, ob es die Startzeit ist*/
            startFn: Funktion () {
                wenn (!snake.isStart) {
                    Schlange.bewegen();
                    snake.btns[0].innerHTML = 'Pause';
                    snake.isStart = true;
                } anders {
                    Schlange.Stopp();
                    snake.btns[0].innerHTML = "Start";
                    snake.isStart = falsch;
                }
 
            },
            /* Beginn der Bewegung, Kernmodul*/
            verschieben: Funktion () {
                Dokument.onkeydown = Schlange.controlFn;
                var itemsAll = Schlange.cont.children;
                /* console.log(itemsAlle);
                Konsole.log(itemsAll,itemsAll[0].nodeName); */
                /* Array zum Speichern jedes Abschnitts des Schlangenkörpers*/
                var Elemente = [];
                var Spanne;
                /* var Elemente = Array.from(itemsAll).filter(Funktion (v, k) {
                    Rückgabewert v.nodeName === 'DIV'
                }); */
                /* console.log(Elemente); */
                /* Filtere div (Schlangenkörper) und span (Nahrung) */
                für (var j = 0; j < itemsAll.length; j++) {
                    wenn (itemsAll[j].nodeName == 'DIV') {
                        Elemente.push(ElementeAlle[j])
                    } anders {
                        span = ArtikelAlle[j]
                    }
                }
                /* Position des Schlangenkopfes ermitteln */
                var l = Schlange.Kopf.l;
                var t = Schlange.Kopf.t;
                console.log(l, t);
                console.log(Elemente)
                Intervall löschen(snake.timer)
                /* Tastaturüberwachung */
                Dokument.onkeydown = Schlange.controlFn
                /* Beginne mit der Bewegung */
                snake.timer = setzeIntervall(Funktion () {
                    /* Die Position des Schlangenschwanzes aufzeichnen und in dem Objekt aktualisieren, in dem der Schlangenschwanz gespeichert ist*/
                    snake.ender.l = Artikel[Artikellänge - 1].Stil.links;
                    snake.ender.t = Artikel[Artikellänge - 1].style.top;
                    /* Aktualisiere die Position der Schlange*/
                    für (var i = items.length - 1; i > 0; i--) {
                        Elemente[i].style.left = Elemente[i - 1].style.left;
                        Elemente[i].style.top = Elemente[i - 1].style.top;
                    }
 
                    /* Bestimme die Richtung des Schlangenkopfes und aktualisiere seine Position*/
                    wenn (snake.dir == 'l') {
                        l -= Schlangengeschwindigkeit;
                    }
                    wenn (snake.dir == 'r') {
                        l += Schlangengeschwindigkeit;
                    }
                    wenn (snake.dir == 't') {
                        t -= Schlangengeschwindigkeit;
                    }
                    if (snake.dir == 'b') {
                        t += Schlangengeschwindigkeit;
                    }
                    /* Außerhalb der Grenze y */
                    wenn (l < 0 || l > 490 || t < 0 || t > 490) {
                        Intervall löschen(snake.timer)
                        snake.reStart(confirm('Schlangenmonster, du bist gegen die Wand gelaufen! Willst du nochmal von vorne anfangen?'))
                    }
 
                    Elemente[0].style.left = l + 'px';
                    Elemente[0].style.top = t + 'px';
                    /* Aktualisiere das Objekt, das den Schlangenkopf aufzeichnet*/
                    Schlange.Kopf.l = l
                    Schlange.Kopf.t = t
                    /* konsole.log(items[0].style); */
                    /* Schlangenkopf einfügen */
                    Schlange.cont.appendChild(Elemente[0])
                    für (var k = 1; k < Elemente.Länge; k++) {
                        /* Feststellen, ob der Schlangenkopf sich selbst gebissen hat*/
                        wenn (items[0].style.left == items[k].style.left und items[0].style.top == items[k]
                            .Stil.oben) {
                            snake.reStart(confirm('Schlangenmonster, du hast dich zu Tode gebissen, willst du nochmal von vorne anfangen?'))
                            /* console.log(Elemente[0].style.left,Elemente[0].style.top);
                            Konsole.log(Elemente[0].Stil.links,Elemente[0].Stil.oben); */
                            Intervall löschen(snake.timer)
                            /* Warnung (,Spiel vorbei!');
                            fenster.standort.neuladen(wahr) */
                            zurückkehren
                        }
                        /* Füge den Schlangenkörper ein */
                        snake.cont.appendChild(Elemente[k])
                    }
                    /* Das Essen gegessen */
                    Konsole.log(span.style.left, span.style.top);
                    /* console.log(l, 'iss das Essen'); */
                    wenn (l == parseInt(span.style.left) und t == parseInt(span.style.top)) {
                        Schlange.essen()
                    }
                }, parseInt(300 / Schlange.status))
            },
            essen() {
                Schlange.erstelleSchlange()
                Schlange.getfood()
                Schlange.Zähler++;
                snake.score.innerHTML = `${snake.counter*100} Punkte`
            },
            /* Das Spiel endet und es wird entschieden, ob es neu gestartet werden soll*/
            reStart: Funktion (Wert) {
                wenn (Wert) {
                    Fenster.Standort.neu laden(true)
                }
            },
            /* Nahrung produzieren */
            getfood: Funktion () {
                wenn (document.querySelector('span')) {
                    console.log('hereinkommen');
                    Dokument.QuerySelector('span').remove();
                }
 
                var span = document.createElement('span');
                var l = Schlange.randM(0, 49) * 10
                var t = Schlange.randM(0, 49) * 10
                console.log('Essen holen', l, t);
 
                span.style.left = l + "px";
                span.style.top = t + 'px';
 
                snake.cont.appendChild(span);
                wenn (snake.isStart) {
                    Schlange.bewegen()
                }
            },
            /* Zufallszahlen generieren */
            getTime() {
                lass zeit,h,m,s
                
                setzeIntervall(Funktion () {
                    Zeit = neues Datum()
                    h = Zeit.getHours()
                    m = Zeit.getMinutes();
                    s = Zeit.getSeconds();
                     wenn (h < 10) {
                         h = '0' + h
                     }
                     wenn (m < 10) {
                         m = '0' + m
                     }
                     wenn (s < 10) {
                         s = '0' + s
                     }
                    snake.time.innerHTML = `${h}: ${m}: ${s}`
                }, 1000)
            },
            randM: Funktion (min, max) {
                gibt Math.round(Math.random() * (max - min) + min) zurück
            },
            /* Pause*/
            Stopp: Funktion () {
                Intervall löschen(snake.timer)
            },
            /* Einfacher Modus */
            simpleFn: Funktion () {
                Schlange.status = 1;
                Schlange.btnFn()
                snake.btns[1].className = "aktiv"
            },
            /* Komplexer Modus */
            UnterschiedFn: Funktion () {
                Schlange.status = 3;
                Schlange.btnFn()
                snake.btns[2].className = "aktiv"
            },
            /* Höllenmodus */
            hardFn: Funktion () {
                Schlange.status = 5;
                Schlange.btnFn()
                snake.btns[3].className = "aktiv"
            },
            btnFn: Funktion () {
                snake.btns.forEach(Funktion (v, k) {
                    v.Klassenname = ''
                });
                wenn (snake.isStart) {
                    Schlange.bewegen();
                }
            },
            /* Schaltflächen zum Bewegen der Schlange*/
            controlFn: Funktion (el) {
                var el = el || Fenster.Ereignis;
                var code = el.schlüsselcode || el.welcher;
                konsole.log(code);
                wenn ((code == 40 || code == 83)&&snake.dir != 't') {
                    snake.dir = "b"
                }
                wenn ((code == 39 || code == 68)&&snake.dir != 'l') {
                    snake.dir = "r"
                }
                wenn ((code == 38 || code == 87)&&snake.dir != 'b') {
                    snake.dir = "t"
                }
                wenn ((code == 37 || code == 65)&&snake.dir != 'r') {
                    snake.dir = "l"
                }
            }
        }
        Schlange.init();
    </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: