JS implementiert das Schlangenspiel

Games.prototype.init = Funktion () {
    this.dom = Dokument.createElement('Tabelle');
    var tr, td;
    //Durchlaufe den Zeilen- und Spaltenbaum für (var i = 0; i < this.row; i++) {
        // Durchlaufe die Zeilen und erstelle einen Baum auf dem Knoten tr = document.createElement('tr');
 
        für (var j = 0; j < this.col; j++) {
            // Spalte durchlaufen und einen Baum auf dem Knoten erstellen td = document.createElement('td');
            // Den Knoten an den Baum anhängen tr.appendChild(td);
 
 
            // Den Knoten an den Baum anhängen this.dom.appendChild(tr);
 
        }
    }
    // Baum in der Tabelle document.getElementById('app').appendChild(this.dom);
}

// Methode zum Einstellen der Farbe Games.prototype.setColor = function (row, col, color) {
    // Legen Sie die Farbe der Zeile und Spalte der Tabelle fest this.dom.getElementsByTagName('tr')[row].getElementsByTagName('td')[col].style.backgroundColor = color;
}

Snake.prototype.render = Funktion () {
    // Rendering der Schlange game.setColor(this.body[0].row, this.body[0].col, 'pink');
    // Schlangenkörper für (var i = 1; i < this.body.length; i++) {
        Spiel.setColor(dieser.Körper[i].Zeile, dieser.Körper[i].col, 'himmelblau');
    }
}

    dieser.Timer = setzeIntervall(Funktion () {
        // Der Kern des Timers ist die Essenz des Spiel-Renderings: Bildschirm löschen – aktualisieren – rendern // Snake rendern game.snake.render();
    }, 20);

Snake.prototype.update = Funktion () {
 
    // Die aktuelle Richtung erhält willdirection
    diese.Richtung = diese.wirdRichtung;
    Schalter (diese.Richtung) {
        Fall 'R':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            brechen;
        Fall 'D':
            this.body.unshift({ 'Zeile': this.body[0].Zeile + 1, 'Spalte': this.body[0].col });
            brechen;
        Fall 'L':
            this.body.unshift({ 'Zeile': this.body[0].Zeile, 'Spalte': this.body[0].col - 1 });
            brechen;
        Fall 'T':
            this.body.unshift({ 'Zeile': this.body[0].Zeile - 1, 'Spalte': this.body[0].col });
            brechen;
    }

// Bildschirm löschen Games.prototype.clear = function () {
    für (var i = 0; i < diese.Zeile; i++) {
        für (var j = 0; j < this.col; j++) {
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].style.backgroundColor = '#fff';
            this.dom.getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML = '';
        }
    }
}

 // Bildschirm löschen game.clear();
        //Schlangenbewegung/-aktualisierung //Aktualisierungsgeschwindigkeit der Schlange Wenn die Schlangenseite länger ist, erhöht sich die Geschwindigkeit var während = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        // Snake-Update game.f % während == 0 und game.snake.update();
        // Rendere die Schlange game.snake.render();

Games.prototype.bindEvent = Funktion () {
    var selbst = dies;
    //Tastaturereignis document.onkeydown = function (even) {
        Schalter (gerade.Schlüsselcode) {
            Fall 37:
                // Beurteilen Sie zunächst, ob die aktuelle Richtung nach rechts geht. Wir können zu diesem Zeitpunkt nicht die linke Taste drücken, wenn (self.snake.direction == 'R') return;
                selbst.snake.changeDirection('L');
                brechen;
            Fall 38:
                // Beurteilen Sie zunächst, ob die aktuelle Richtung nach unten geht. Wir können zu diesem Zeitpunkt nicht die Aufwärtstaste drücken, wenn (self.snake.direction == 'D') return;
                self.snake.changeDirection('T');
                brechen;
            Fall 39:
                // Beurteilen Sie zunächst, ob die aktuelle Richtung nach links geht. Wir können zu diesem Zeitpunkt nicht die rechte Taste drücken, wenn (self.snake.direction == 'L') return;
                selbst.snake.changeDirection('R');
                brechen;
            Fall 40:
                // Beurteilen Sie zunächst, ob die aktuelle Richtung nach oben geht. Wir können die Taste derzeit nicht drücken, wenn (self.snake.direction == 'T') return;
                selbst.snake.changeDirection('D');
                brechen;
        }
    }
}

Snake.prototype.update = Funktion () {
 
    // Die aktuelle Richtung erhält willdirection
    diese.Richtung = diese.wirdRichtung;
    Schalter (diese.Richtung) {
        Fall 'R':
            this.body.unshift({ 'row': this.body[0].row, 'col': this.body[0].col + 1 });
            brechen;
        Fall 'D':
            this.body.unshift({ 'row': this.body[0].row + 1, 'col': this.body[0].col });
            brechen;
        Fall 'L':
            this.body.unshift({ 'Zeile': this.body[0].Zeile, 'Spalte': this.body[0].col - 1 });
            brechen;
        Fall 'T':
            this.body.unshift({ 'Zeile': this.body[0].Zeile - 1, 'Spalte': this.body[0].col });
            brechen;
    }

 // Der Teil, der über den Rand der Tabelle hinausragt, wenn (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
        alert('Spiel vorbei, Ihr aktueller Punktestand ist ' + game.score);
        clearInterval(spiel.timer);
        dies.body.shift();
        clearInterval(spiel.timer);
    }

  // treffe dich selbst für (var i = 1; i < this.body.length; i++) {
        wenn (dieser.body[0].col == dieser.body[i].col && dieser.body[0].row == dieser.body[i].row) {
            alert('Spiel vorbei, Ihr aktueller Punktestand ist ' + game.score);
            dies.body.shift();
            clearInterval(spiel.timer);
        }
    }

Funktion Essen(SpielSchlange) {
    var selbst = dies;
    // Standort des Futters // Die do-while-Schleifenanweisung erstellt zuerst eine Zeile und eine Spalte und ermittelt dann, ob sich die Zeile und die Spalte auf der Schlange befinden. do {
        diese.Zeile = parseInt(Math.random() * gameSnake.Zeile);
        this.col = parseInt(Math.random() * gameSnake.col);
    } während ((Funktion () {
        // Durchlaufe die Zeile und Spalte der Schlange und vergleiche sie dann mit der neu zufällig generierten Zeile und Spalte von Food, um zu sehen, ob sie sich überschneiden für (var i = 0; i < gameSnake.snake.body.length; i++) {
            wenn (gameSnake.snake.body[i].row == self.row und gameSnake.snake.body[i].col == self.col) {
                gibt true zurück;
            }
 
        }
        gibt false zurück;
    })())
 
    console.log(diese.Zeile, diese.Spalte);
}
 
Lebensmittel.prototype.render = Funktion () {
    Spiel.setHTML(diese.Zeile, diese.Spalte, '♥');
}

   wenn (dieser.body[0].row == spiel.food.row und dieser.body[0].col == spiel.food.col) {
        // Neues Essen erstellen game.food = neues Essen(Spiel);
        //Setze die Frame-Nummer auf 0 zurück
        // Punktzahl hinzufügen game.score++;
        spiel.f = 0;
    } anders {
        dies.body.pop();
    }

         dies.f = 0;
        spiel.f++;
       // Geschwindigkeit der Schlange aktualisieren. Wenn die Seite der Schlange länger ist, erhöht sich die Geschwindigkeit var während = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
        // Snake-Update game.f % während == 0 und game.snake.update();
        // Rendere die Schlange

 <div id="app"></div>
    <div class="startgame"><img src="images/btn1.gif" alt=""></div>
    <div class="stopgame"><img src="images/btn4.png" alt=""></div>
    <Skript>
        var Spiel = null;
        var btnstart = document.querySelector('.startgame');
        var btnstop = document.querySelector('.stopgame')
        btnstart.addEventListener('klicken', Funktion () {
            btnstart.style.display = "keine";
            Spiel = neue Spiele();
            // konsole.log(Tabelle);
            var Tabelle = Dokument.QuerySelector('Tabelle');
            Tabelle.addEventListener('klicken', Funktion () {
                clearInterval(spiel.timer);
                btnstop.style.display = "Block";
            })

     btnstop.addEventListener('klicken', Funktion () {
                btnstop.style.display = "keine";
                spiel.timer = setzeIntervall(funktion () {
                    // Der Kern des Timers ist die Essenz der Spiel-Rendering: Bildschirm löschen – aktualisieren – Spiel rendern.f++;
                    // document.getElementById('f').innerHTML = 'Framenummer:' + game.f;
                    // // Punktzahl rendern // document.getElementById('score').innerHTML = 'Punktzahl:' + game.score;
                    // Bildschirm löschen game.clear();
                    //Schlangenbewegung/-aktualisierung //Aktualisierungsgeschwindigkeit der Schlange Wenn die Schlangenseite länger ist, erhöht sich die Geschwindigkeit var während = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1;
                    // Snake-Update game.f % während == 0 und game.snake.update();
                    // Rendere die Schlange game.snake.render();
                    // Essen rendern game.food.render();
                }, 10);
            })