JavaScript Snake-Implementierungscode

<div Klasse="Container">
        <!--Spielplatz mit beweglichen Schlangen-->
        <div id="Spielplatz">
            <!--Kleine Schlange-->
            <div id="Schlange"></div>
            <!--Essen-->
            <div id="Essen"></div>
        </div>
        <!--Rekordergebnis-->
        <div id="Menü">
            <div>Punktzahl<span id="score"></span></div>
        </div>
</div>

<Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
 
        .container {
            Breite: 800px;
            Höhe: 600px;
            Rand: 0 automatisch;
        }
 
        #Spielplatz {
            Breite: 650px;
            Höhe: 100%;
            Hintergrundfarbe: Kadettenblau;
            schweben: links;
            Position: relativ;
        }
 
        #Speisekarte {
            Breite: 150px;
            Höhe: 100%;
            Hintergrundfarbe: Dunkelcyan;
            schweben: links;
        }
 
        #Schlange {
            Breite: 20px;
            Höhe: 20px;
            Hintergrundfarbe: #d3e0d7;
            Position: absolut;
            links: 0;
            oben: 0;
        }
 
        #Essen {
            Breite: 20px;
            Höhe: 20px;
            Hintergrundfarbe: #027766;
            Position: absolut;
        }
 
        .Körper {
            Breite: 20px;
            Höhe: 20px;
            Hintergrundfarbe: #178b9a;
            Position: absolut;
            ;
            oben: 0;
            links: 0;
        }
 
        #Punktzahl {
            Schriftgröße: 30px;
            Schriftstärke: fett;
            Farbe: Schwarz;
        }
 
        #Menü div {
            Schriftgröße: 20px;
            Schriftstärke: fett;
            Rand links: 20px;
        }
 
        #hqx {
            Breite: 100px;
            Höhe: 50px;
            Rand: 0 automatisch;
 
        }
 
        #inp {
            Rand: 0;
            Breite: 100px;
            Höhe: 50px;
            Hintergrundfarbe: Koralle;
        }
</Stil>

//Knoten abrufen var snake = document.getElementById("snake");
        var Essen = document.getElementById("Essen");
        var Spielplatz = document.getElementById("Spielplatz");
        var Punktzahl = document.getElementById('Punktzahl');
        // var inp = document.getElementById('inp')
        /*Globale Variablen festlegen*/
        var Zeitgeber;
        var arr = []; //Array zum Speichern der Position der Schlange var num = 0; //Länge des Arrays var snakeBody; //Jedes Mal, wenn Sie ein Lebensmittel essen, vergrößern Sie den Körper

 //Tastenereignis festlegen document.onkeydown = function (e) {
            var evt = window.evnet || e;
            Schalter (evt.Schlüsselcode) {
                Fall 37: //links clearInterval(timer);
                    timer = window.setInterval(runLeft, 10); //Timer um nach links zu gehen function runLeft() {
                        wenn (snake.offsetLeft > 0) {
                            snake.style.left = snake.offsetLeft - 1 + 'px'; //Eigenbewegung erreichen snake.style.top = snake.offsetTop + 'px'; //Keine Änderung der Höhe arr.push([snake.offsetLeft, snake.offsetTop]); //Jedes Mal, wenn Sie sich um 1px bewegen, speichern Sie die Position im Array num++; //Addieren Sie 1 zur entsprechenden Arraylänge
                        } anders {
                            clearInterval(timer); //Timer löschen alert('du stirbst') //Fehlermeldung anzeigen document.onkeydown = null //Ende-Schaltfläche }
                    }
                    break; //Aktuellen Tastendruck beenden case 38: //clearInterval(timer);
                    Timer = Fenster.SetInterval(runTop, 10);
 
                    Funktion runTop() {
                        wenn (snake.offsetTop > 0) {
                            Schlange.style.top = Schlange.offsetTop - 1 + 'px';
                            Schlange.Stil.links = Schlange.OffsetLinks + 'px';
                            arr.push([Schlange.OffsetLinks, Schlange.OffsetOben]);
                            Zahl++;
                        } anders {
                            Intervall löschen(Timer);
                            Alarm ('du stirbst')
                            document.onkeydown = null
                        }
                    }
                    brechen;
                Fall 39: //richtig clearInterval(timer);
                    Timer = Fenster.SetInterval(runRight, 10);
 
                    Funktion runRight() {
                        wenn (snake.offsetLeft < 630) {
                            Schlange.Stil.links = Schlange.OffsetLinks + 1 + 'px';
                            Schlange.style.top = Schlange.offsetTop + 'px';
                            arr.push([Schlange.OffsetLinks, Schlange.OffsetOben]);
                            Zahl++;
                        } anders {
                            Intervall löschen(Timer);
                            Alarm ('du stirbst')
                            document.onkeydown = null
                        }
                    }
                    brechen;
                Fall 40: //ClearInterval(Timer);
                    Timer = Fenster.SetInterval(runBottom, 10);
 
                    Funktion runBottom() {
                        wenn (snake.offsetTop < 580) {
                            Schlange.style.top = Schlange.offsetTop + 1 + 'px';
                            Schlange.Stil.links = Schlange.OffsetLinks + 'px';
                            arr.push([Schlange.OffsetLinks, Schlange.OffsetOben]);
                            Zahl++;
                        } anders {
                            Intervall löschen(Timer);
                            Alarm ('du stirbst')
                            document.onkeydown = null
                        }
                    }
                    brechen;
 
}

Funktion pos() {
                essen.stil.links = parseInt(Math.random() * 630) + 'px';
                essen.style.top = parseInt(Math.random() * 580) + 'px';
            }

var timer1 = setInterval(eat, 10); //Setze einen Kollisionstimer function eat() {
                snakeCrashFood(snake, food); //Eingabeparameter Funktion snakeCrashFood(obj1, obj2) {
                    var obj1Left = obj1.offsetLeft;
                    var obj1Width = obj1.offsetWidth + obj1.offsetLeft;
                    var obj1Top = obj1.offsetTop;
                    var obj1Height = obj1.offsetHeight + obj1.offsetTop;
                    var obj2Left = obj2.offsetLeft;
                    var obj2Width = obj2.offsetWidth + obj2.offsetLeft;
                    var obj2Top = obj2.offsetTop;
                    var obj2Height = obj2.offsetHeight + obj2.offsetTop;
                    wenn (!((obj1Breite < obj2Links) || (obj2Breite < obj1Links) || (obj1Höhe < obj2Oben) || (
                            obj2Höhe < obj1Oben))) {
                        snakeBody = document.createElement("div"); //Erstelle ein neues div
                        snakeBody.setAttribute("class", "body"); //Füge dem neuen Div einen Klassennamen hinzu playground.appendChild(snakeBody); //Füge einen neuen Body hinzu pos(); //Lass das Essen zufällig wieder erscheinen setInterval(follow, 10); //Ändere die Position des neuen Bodys dynamisch }
                }
            }

Funktion folgen() {
                /*Holen Sie sich das Array der hinzugefügten Körper*/
                var bodyNum = document.getElementsByClassName("body");
                Punktzahl.innerHTML = bodyNum.Länge;
                var Stelle = 0;
                /*Jedes Mal, wenn sich das Array um 1 Pixel bewegt, ist die Position des neuen Körpers die Position des 20. Arrays relativ zum vorherigen Körper und so weiter*/
                // konsole.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1")
                // konsole.log("arr : ==" + arr)
                // console.log("num : ==" + num) //2
                für (var i = 0; i < bodyNum.length; i++) {
                    // konsole.log("bodyNum.length : ==" + bodyNum.length)
                    Platz += 20;
                    // console.log("Ort : ==" + Ort)//20
                    // console.log("Anzahl - Stelle : ==" + (Anzahl - Stelle)) //-18
                    // bodyNum[i].style.left = arr[num - Stelle][0] + 'px';
                    // bodyNum[i].style.top = arr[num - Stelle][1] + 'px';
                    if (Anzahl - Stellen > 0) {
                        bodyNum[i].style.left = arr[num - Stelle][0] + 'px';
                        bodyNum[i].style.top = arr[num - Stelle][1] + 'px';
                    }
 
                }
                // konsole.log("num555 : ==" + num)
                // console.log("=================================================")
            }