Verwenden Sie js, um ein einfaches Schlangenspiel zu schreiben

In diesem Artikel wird der spezifische Code eines einfachen Schlangenspiels, das in js geschrieben wurde, zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Der Code lautet wie folgt:

HTML 5 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>Gierige Schlange</title>
    <Stil>
        #Szene{
            Breite: 800px;
            Höhe: 600px;
            Rand: 1px durchgezogen #000;
            Rand: 50px automatisch;
            Hintergrundfarbe: Aliceblau;
            Position: relativ;
            Überlauf: versteckt;
        }
       .Kopf{
           Position: absolut;
           Breite: 20px;
           Höhe: 20px;
           Hintergrundfarbe: #000;
       }
       .Schwanz{
        Position: absolut;
           Breite: 20px;
           Höhe: 20px;
           Hintergrundfarbe: grau;       
       }
    </Stil>
</Kopf>
<Text>
    <div id="Szene">

    </div>
</body>
</html>
<script src="tools.js"></script>
<script src="../Dateityp/snake.js"></script>
<script src="essen.js"></script>
<script src="spiel.js"></script>

js-Teil

tools.js

Funktion getStyle(Element, Stilobjekt) {
    für (const key in styleObj) {
        ele.style[Schlüssel] = styleObj[Schlüssel];
    }   
}
Funktion getRandom(a, b) {
    gibt Math.floor(Math.random() * (b - a) + a +1) zurück
}

Schlange.js

Funktion Schlange() {
    diese.scence = document.querySelector('#scence');
    dieser.body = [
        [0, 0, 'grau', null],
        [0, 1, 'grau', null],
        [0, 2, '#000', null]
    ];
    this.dir = "richtig";
    this.lastdir = "richtig";
    diese.Breite = 20;
    diese.Höhe = 20;
    this.scence_w = Szene.OffsetWidth;
    this.scence_h = Szene.OffsetHeight;
}
Snake.prototype.found = Funktion () {
    für (lass i = 0; i < diese.Body.Länge; i++) {
        wenn (dieser.body[i][3] == null) {
            dies.body[i][3] = Dokument.createElement('div');
        }
        getStyle(diesen.body[i][3], {
            Breite: diese.Breite + 'px',
            Höhe: diese.Höhe + 'px',
            Position: 'absolut',
            oben: diese.Höhe * (dieser.Körper[i][0]) + 'px',
            links: diese.Breite * (dieser.Body[i][1]) + 'px',
            Hintergrundfarbe: this.body[i][2]
        });
        diese.Szene.appendChild(dieser.Körper[i][3]);
    }
}
//Bewegungsfunktion Snake.prototype.move = function () {
    var Länge = dieser.Body.Länge;
    für (sei i = 0; i < Länge - 1; i++) {
        dieser.Körper[i][0] = dieser.Körper[i + 1][0];
        dieser.Körper[i][1] = dieser.Körper[i + 1][1];
    }
    let snakehead = this.body[Länge - 1]
    Schalter (dieses.dir) {
        Fall 'richtig':
            Schlangenkopf[1] += 1;
            brechen;
        Fall 'links':
            Schlangenkopf[1] -= 1
            brechen;
        Fall 'oben':
            Schlangenkopf[0] -= 1
            brechen;
        Fall 'down':
            Schlangenkopf[0] += 1
            brechen;
    }
    dieses.letztesVerzeichnis = dieses.Verzeichnis;
    Schlange.gefunden();
}
// Zeitliche Steuerung der Bewegung Snake.prototype.shift = function () {
    document.onkeydown = (e) => {
        e = e || Fenster.Ereignis;
        let key = e.keyCode;
        Schalter (Schlüssel) {
            Fall 39:
                wenn (this.lastdir == 'links') {
                    this.dir = "links"
                } anders {
                    this.dir = "richtig"
                };
                brechen;
            Fall 37:
                wenn (this.lastdir == 'richtig') {
                    this.dir = "richtig"
                } anders {
                    this.dir = "links"
                };
                brechen;
            Fall 38:
                wenn (this.lastdir == 'down') {
                    this.dir = "nach unten"
                } anders {
                    this.dir = "nach oben"
                };
                brechen;
            Fall 40:
                wenn (this.lastdir == 'up') {
                    this.dir = "nach oben"
                } anders {
                    this.dir = "nach unten"
                };
                brechen;
        }
    }
}

//Spiel vorbei Snake.prototype.over = function () {
    lass oben = dieser.Körper[diese.Körperlänge - 1][0];
    lass links = dieser.Körper[diese.Körperlänge - 1][1];
    lass Breite = this.scence_w / this.width - 1;
    lass Höhe = this.scence_w / this.height - 1;
    if (oben < 0 || links < 0 || oben > Breite || links > Höhe) {
        ClearInterval(Zeit-ID)
        Alarm (,Spiel ist vorbei‘);
    }
    für (lass i = 0; i < this.body.length - 1; i++) {
        wenn (oben == dieser.body[i][0] && links == dieser.body[i][1]) {
            ClearInterval(Zeit-ID)
            Alarm (,Spiel ist vorbei‘);
        }
    }
}


lass Schlange = neue Schlange();
Schlange.gefunden();
Schlange.Verschiebung();
Zeit-ID = Intervall festlegen (Funktion () {
    Schlange.bewegen();
    essen.essen();
    Schlange.über()
}, 100)

essen.js

Funktion Essen() {
  diese.scence = document.querySelector('#scence');
  diese.Breite = 20;
  diese.Höhe = 20;
  dieser.body = [-1, -1, 'rot', null];
  this.scence_w = Szene.OffsetWidth;
  this.scence_h = Szene.OffsetHeight;
  
}
//Lebensmittelerzeugung Food.prototype.crteate = function () {
  dieser.body[1] = getRandom(0, diese.scence_w / diese.width-1);
  dieser.body[0] = getRandom(0, diese.scence_h / diese.height-1);
  dies.body[3] = document.createElement('div');
  getStyle(diesen.body[3], {
    Breite: diese.Breite + 'px',
    Höhe: diese.Höhe + 'px',
    Position: 'absolut',
    oben: diese.Höhe * (dieser.Körper[0] ) + 'px',
    links: diese.Breite * (dieser.Körper[1] ) + 'px',
    Hintergrundfarbe: this.body[2],
    borderRadius: '50%',
  });
  diese.Szene.appendChild(dieser.Körper[3]);


}
//Die Schlange frisst das Futter Food.prototype.eat=function(){
  // const new = [0, 0, 'grau', null]
wenn(Schlange.Körper[Schlange.Körper.Länge-1][0]==dieser.Körper[0] && Schlange.Körper[Schlange.Körper.Länge-1][1]==dieser.Körper[1]){
  diese.Szene.entfernenKind(dieser.Körper[3]);
  dies.crteate();
  Schlange.body.unshift([-1,-1,"grau",null])
}
}
lass Essen = neues Essen();
essen.crteate();
essen.essen();

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: