Snake-Spiel mit nativem JS schreiben

In diesem Artikel wird der spezifische Code zum Schreiben eines Schlangenspiels in js als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Ich habe gerade mit dem Erlernen von JS fertig und das Tutorial nachgeahmt, um mein eigenes natives JS-Applet zu schreiben.

HTML-Teil

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <link rel="stylesheet" href="./css/index.css" >
</Kopf>
<Text>
    <div Klasse="Inhalt">
     <!-- Schaltfläche zum Starten des Spiels-->
        <div Klasse="btn startBtn"><Schaltfläche></Schaltfläche></div>
        <!-- Schlangenkörper -->
        <div id="snakeWrap"></div>
    </div>
    <!-- Externe JS-Dateien importieren-->
    <script src="./js/index.js"></script>
</body>
</html>

CSS-Teil

/* Gesamtstil */
.Inhalt{
    Breite: 640px;
    Höhe: 640px;
    Rand: 100px automatisch;
    Position: relativ;
}
 .btn{
    Breite: 100 %;
    Höhe: 100%;
    Position: absolut;
    links: 0;
    oben: 0;
    Hintergrundfarbe: rgba(0, 0, 0, 0,3);
    Z-Index: 2;
}

.btn-Schaltfläche{
    Hintergrund: keiner;
    Rand: keiner;
    Hintergrundgröße: 100 % 100 %;

    Cursor: Zeiger;
    Gliederung: keine;

    Position: absolut;
    links: 50%;
    oben: 50 %;
}

.startBtn-Schaltfläche{
    Breite: 200px;
    Höhe: 80px;
    Hintergrund: URL (../images/Snipaste_2021-05-08_08-52-45.png) keine Wiederholung;
    Hintergrundgröße: enthalten;
    Rand links: -100px;
    Rand oben: 222px;
}

#SchlangeWrap{
    Breite: 600px;
    Höhe: 600px;
    Hintergrund: #73aad4;
    Rand: 20px durchgezogen #13649c;
    Position: relativ;
}

.snakeHead{
    Hintergrundfarbe: gelbgrün;
    Randradius: 50 %;
}

.snakeBody{
    Hintergrundfarbe: schwarz;
    Randradius: 50 %;
}

.Essen{
    Hintergrundfarbe: rot;
    Randradius: 50 %;
}

js-Teil

var sw = 20, //Breite eines Blocks sh = 20, //Breite eines Blocks tr = 30, //Anzahl der Zeilen td = 30; //Anzahl der Spalten var snake = null, //Schlangeninstanz generieren food = null; //Food-Instanz generieren game = null; //Spielinstanz erstellen //Blöcke erstellen und löschen, wenn das Ganze als kleiner, sich bewegender Block behandelt wird (alle nachfolgenden Blöcke werden aufgerufen)
// Quadrat-Konstruktorfunktion Square(x,y,classname){ //Entspricht den drei Schlangenstilen in CSS (Schlangenkopf, Schlangenkörper, Schlangenschwanz)
    dies.x = x * sw;
    dies.y = y * sh;
    diese.klasse = Klassenname;
    dies.viewContent = document.createElement('div');
    this.viewContent.className = this.class; //Fügen Sie dem erstellten Div den entsprechenden CSS-Stil hinzu this.parent = document.getElementById('snakeWrap');    
}

//Erstelle die Create-Methode in der Prototypkette des Blockkonstruktors, um die spezifischen Informationen des neuen Div zu bestimmen //dies zeigt auf Square
Quadrat.prototype.create = Funktion(){
    this.viewContent.style.position = "absolut";
    dies.viewContent.style.width = sw + "px";
    dies.viewContent.style.height = sh + 'px';
    dies.viewContent.style.left = dies.x + 'px';
    dies.viewContent.style.top = dies.y + 'px';

    this.parent.appendChild(this.viewContent); //Füge das neu erstellte div zur Seite hinzu}

//Erstelle eine Remove-Methode in der Prototypenkette des Blockkonstruktors, um den Block beim Verschieben zu löschen Square.prototype.remove = function(){
    dies.übergeordnetes Element.entfernenKind(dieses.Inhalt anzeigen);
}

//Schlangenfunktion Snake(){
    this.head = null; //Speichert die Informationen zum Kopf der Schlange this.tail = null; //Speichert die Informationen zum Schwanz der Schlange this.pos = []; //Speichert die Position jedes Blocks auf der Schlange this.directionNum = { //Speichert die Richtung, in die die Schlange läuft left : {
            x : -1,
            y : 0
        },
        Rechts : {
            x : 1,
            y : 0
        },
        hoch : {
            x : 0,
            y: -1
        },
        runter : {
            x : 0,
            y : 1
        }
    }
}

//das zeigt auf Snake
Snake.prototype.init = function(){ // Initialisierung // Schlangenkopf erstellen var snakeHead = new Square(2,0,'snakeHead');
    snakeHead.erstellen();
    dieser.kopf = Schlangenkopf;
    this.pos.push([2,0]); //Informationen zum Schlangenkopf speichern // Schlangenkörper erstellen 1
    var Schlangenkörper1 = neues Quadrat(1,0,'Schlangenkörper');
    snakeBody1.erstellen();
    this.pos.push([1,0]); //Informationen zum Schlangenkörper speichern // Schlangenschwanz erstellen var snakeBody2 = new Square(0,0,'snakeBody');
    snakeBody2.erstellen();
    dieser.Schwanz = Schlangenkörper2;
    this.pos.push([0,0]); /Speichern Sie die Zuverlässigkeit des Schlangenschwanzes//Bilden Sie eine verknüpfte Listenbeziehung//Die Beziehung zwischen Kopf, Körper und Schwanz der Schlange snakeHead.last = null;
    Schlangenkopf.nächster = Schlangenkörper1;

    Schlangenkörper1.letzter = Schlangenkopf;
    Schlangenkörper1.nächster = Schlangenkörper2;

    Schlangenkörper2.letzter = Schlangenkörper1;
    snakeBody2.next = null;

    //Fügen Sie für die Schlange eine Standardrichtung nach rechts hinzu this.direction = this.directionNum.right;
}

// Holen Sie sich das Element, das der nächsten Position des Schlangenkopfes entspricht (dies zeigt auf Snake)
// Die Koordinaten des nächsten Punkts abrufen und im Array nextPos speichern Snake.prototype.getNextPos = function(){
    var nächstePos = [
        this.head.x/sw + this.direction.x, //this.direction.x, y Folgendes bindet die Richtung an das Tastaturereignis, um die Position des nächsten Punkts zu bestimmen this.head.y/sh + this.direction.y
    ]
    
    // Der nächste Punkt sind Sie selbst. Das Spiel endet, wenn Sie mit sich selbst kollidieren. var selfCollied = false;
    this.pos.forEach(function(value){ //forEach durchläuft das Array und vergleicht die beiden Arrays, um zu sehen, ob es doppelte Koordinaten gibt if (value[0] == nextPos[0] && value[1] == nextPos[1]){
            selfCollied = wahr;
        }
    })
 
 //Das Spiel endet, wenn du dich selbst triffst, if (selfCollied) {
        Das.,
        .die.call(dies);
        zurückkehren;
    }

    // Der nächste Punkt ist die Wand Spielende if (nextPos[0] > 29 || nextPos[0] < 0 || nextPos[1] > 29 || nextPos[1] < 0) {
        diese.strategien.die.call(diese);
        zurückkehren;
    }

    // Der nächste Punkt ist Essen, das gegessen werden muss, if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]){
        dies.strategien.essen.anrufen(dies);
        zurückkehren;
    }

    // Der nächste Punkt ist nichts, also gehe zu this.strategies.move.call(this);
}


// Was tun nach einer Kollision? Snake.prototype.strategies = {
    move : function(format){ //Der Parameter wird verwendet, um zu bestimmen, ob der Schlangenschwanz gelöscht werden soll //Erstelle einen neuen Körper und lösche den Schlangenkopf var newBody = new Square(this.head.x/sw,this.head.y/sh,'snakeBody')
        neuerBody.nächster = dieser.Kopf.nächster;
        neuerBody.next.last = neuerBody;
        neuerBody.last = null;
        dies.kopf.entfernen();
        neuerBody.erstellen();

        // Einen neuen Schlangenkopf erstellen var newx = this.head.x/sw + this.direction.x;
        var newy = dieser.Kopf.y/sh + diese.Richtung.y;
        var neuerKopf = neues Quadrat(newx,newy,'snakeHead')
        neuerKopf.nächster = neuerBody;
        neuerBody.last = neuerKopf;
        neuerKopf.letzter = null;
        neuerKopf.erstellen();

        // Aktualisiere die Koordinaten des Schlangenkörpers this.pos.splice(0,0,[newx,newy]);
        dieser.Kopf = neuerKopf;

        //Wenn es falsch ist, dann iss if(!format){
            dies.tail.remove();
            dies.tail = dies.tail.letztes;

            dies.pos.pop();
        }
    },
    essen: Funktion(){
        dies.strategien.bewegen.anrufen(dies,wahr);
        Spielstand++;
        erstelleEssen();
    },
    sterben : function(){
        Spiel vorbei();
    }
}


Schlange = neue Schlange();


// Essen erstellen Funktion createFood(){
    // Koordinaten des Lebensmittelwürfels var x = null;
    var y = null;

    var include = true;
    während(einschließen){
        x = Math.round(Math.random()*(td - 1));
        y = Math.round(Math.random()*(tr - 1));

        snake.pos.forEach(Funktion(Wert){
            wenn(x != Wert[0] && y != Wert[1]){
                einschließen = falsch;
            }
        });
    }
    // Nahrung generieren food = new Square(x,y,'food');
    essen.pos = [x,y];

    var foodDom = document.querySelector('.food');
    wenn(foodDom){
        foodDom.style.left = x * sw + 'px';
        foodDom.style.top = y * sh + 'px';
    }anders{
        essen.erstellen();
    }
}



// Spiellogikfunktion erstellen Game(){
    dieser.timer = null;
    dieser.Score = 0;
}

Spiel.prototype.init = Funktion(){
    Schlange.init();
    erstelleEssen();
 //Der vorherige e.keycode e.which wurde hier deaktiviert. Verwenden Sie e.key
    window.addEventListener('Taste gedrückt',Funktion(e){
        wenn(e.key == 'PfeilLinks' && Schlange.Richtung != Schlange.RichtungNum.rechts){
            Schlange.Richtung = Schlange.Richtungsnummer.links;
        }sonst wenn(e.key == 'PfeilNachOben' && snake.direction != snake.directionNum.NachUnten){
            Schlange.Richtung = Schlange.RichtungNum.nach oben;
        }sonst wenn(e.key == 'PfeilRechts' && snake.direction != snake.directionNum.left){
            Schlange.Richtung = Schlange.RichtungsNum.rechts;
        }sonst wenn(e.key == 'PfeilNachUnten' && snake.direction != snake.directionNum.Nachoben){
            Schlange.Richtung = Schlange.RichtungNum.nach unten;
        }
    });
    dies.start();
}

Spiel.prototype.start = Funktion(){
    dieser.Timer = setzeIntervall(Funktion(){
        snake.getNextPos();
    },0,0000000000000001)
}

Spiel.Prototyp.over = Funktion(){
    : ClearInterval(dieser.Timer);
    alert('Ihr Punktestand ist' + this.score);


    // Das Spiel kehrt zum Anfangszustand zurück var snakeWrap = document.getElementById('snakeWrap');
    snakeWrap.innerHTML = '';

    Schlange = neue Schlange();
    Spiel = neues Spiel();

    var startBtnWrap = document.querySelector('.startBtn');
    startBtnWrap.style.display = "Block";
}

//Starte das Spiel game = new Game();
var startBtn = document.querySelector('.startBtn-Schaltfläche');
startBtn.onclick = Funktion(){
    startBtn.parentNode.style.display = "keine";
    spiel.init();
}

Dies ist ein einfaches kleines Spiel. Wenn Sie Fragen haben, korrigieren Sie mich bitte.

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: