[Javascript] Snake update() fehler

Werbeanzeige

Azasel

unregistriert

26.06.2017, 21:52

[Javascript] Snake update() fehler

Mein Snake Programm tut nicht das, was ich erwarte, und zwar werden immer nur 2 Segmentobjekte gezeichnet, egal wie viele Segmentobjekte sich im Schlangenobjekt befinden.
An der Snake.draw() Methode kann es nicht liegen, es muss an der update() Methode liegen.

Javascript-Quelltext

var schlange = function()
        {
            this.segmente = 
            [
                new block(14,4),
                new block(13,4),
                new block(12,4),
                new block(11,4),
                new block(10,4),
                new block(9,4),
                new block(8,4)              
            ];
        }
        
        var richtung = "rechts";
        
        schlange.prototype.update = function()
        {
            switch(richtung)
            {
                case "rechts":
                    for(var i = 0; i < this.segmente.length-1; i++)
                    {
                        //Hier müsste glaube ich der Fehler liegen
                        this.segmente[i+1].posX = this.segmente[i].posX;
                        this.segmente[i+1].posY = this.segmente[i].posY;
                    }
                    this.segmente[0].posX += 10;
                    break;
...

Wäre echt nett wenn mir jemand sagen könnte, was ich ändern muss, damit alle Segmente gezeichnet werden.
Was die Namensgebung der Variablen angeht, das werde ich später sowieso ändern, fall mich jetzt jemand darauf aufmerksam machen möchte.
Hier der vollständige Code:

Inhalt anzeigen/verstecken

HTML

<!doctype html>
<html>
<head>

    <meta charset="UTF-8">
    <title>Snake</title>
    <script src="https://code.jquery.com/jquery-3.2.0.js"></script>

</head>
<body bgcolor="#00b000">

    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script>
        console.clear();
    
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        
        var laenge = canvas.width;
        var hoehe = canvas.height;
        var blockSize = 10;
        var punkte = 0;
        
        var rahmen = function()
        {
            ctx.fillStyle ="white";
            ctx.fillRect(0,0,laenge,hoehe);
            ctx.fillStyle ="grey";
            ctx.fillRect(0,0,laenge,blockSize);
            ctx.fillRect(0,hoehe-blockSize,laenge,blockSize);
            ctx.fillRect(0,0,blockSize,hoehe);
            ctx.fillRect(laenge-blockSize,0,blockSize,hoehe);
        }
        
        var punktestand = function()
        {
            ctx.fillStyle ="black";
            ctx.font ="10px Comic Sans MS";
            ctx.fillText("Scoore: "+punkte,20,20);
        }
        
        var block = function(x,y)
        {
            this.posX = x * blockSize;
            this.posY = y * blockSize;
        }
        
        var schlange = function()
        {
            this.segmente = 
            [
                new block(14,4),
                new block(13,4),
                new block(12,4),
                new block(11,4),
                new block(10,4),
                new block(9,4),
                new block(8,4)              
            ];
        }
        
        var richtung = "rechts";
        
        schlange.prototype.update = function()
        {
            switch(richtung)
            {
                case "rechts":
                    for(var i = 0; i < this.segmente.length-1; i++)
                    {
                        this.segmente[i+1].posX = this.segmente[i].posX;
                        this.segmente[i+1].posY = this.segmente[i].posY;
                    }
                    this.segmente[0].posX += 10;
                    break;
                case "links":
                    for(var i = 0; i < this.segmente.length-1; i++)
                    {
                        this.segmente[i+1].posX = this.segmente[i].posX;
                        this.segmente[i+1].posY = this.segmente[i].posY;
                    }
                    this.segmente[0].posX -= 10;
                    break;
                case "oben":
                    for(var i = 0; i < this.segmente.length-1; i++)
                    {
                        this.segmente[i+1].posX = this.segmente[i].posX;
                        this.segmente[i+1].posY = this.segmente[i].posY;
                    }
                    this.segmente[0].posY -= 10;
                    break;
                case "unten":
                    for(var i = 0; i < this.segmente.length-1; i++)
                    {
                        this.segmente[i+1].posX = this.segmente[i].posX;
                        this.segmente[i+1].posY = this.segmente[i].posY;
                    }
                    this.segmente[0].posY += 10;
            }
        }
        
        schlange.prototype.draw = function()
        {
            ctx.fillStyle ="cyan";
            for(var i = 0; i < this.segmente.length; i++)
            {
                ctx.fillRect(this.segmente[i].posX,this.segmente[i].posY, blockSize, blockSize);
            }
        }
        
        var snake = new schlange();
        
        setInterval(function(){
            ctx.clearRect(0,0,laenge,hoehe);
            rahmen();
            punktestand();
            snake.update();
            snake.draw();
        },100); 
        
        $("body").keydown(function(e)
        {
            switch(e.keyCode)
            {
                case 37: richtung = "links"; break;
                case 38: richtung = "oben"; break;
                case 39: richtung = "rechts"; break;
                case 40: richtung = "unten"; break;
            }
        });
    
    </script>

</body>
</html>

Zum Seitenanfang

David Scherfgen

Administrator

Beiträge: 10 382

Wohnort: Hildesheim

Beruf: Wissenschaftlicher Mitarbeiter

26.06.2017, 22:57

Dein Kommentar ist schon richtig. Überleg mal, was passiert. Zuerst wird Segment 1 auf Segment 0 gesetzt. Dann Segment 2 auf Segment 1, was aber vorher schon auf Segment 0 gesetzt wurde, also sind jetzt auch die Segmente 2 und 0 identisch. Und so zieht sich das immer weiter durch, und am Ende sind alle Segmente identisch. Dass du zwei siehst, liegt daran, dass du anschließend nochmal Segment 0 bewegst.

Für Lösung hier klicken oder selbst drauf kommen!

Schleife umgekehrt durchlaufen!

David Scherfgens Website | Konzentrationstest Polizei

Zum Seitenanfang

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

27.06.2017, 09:05

Was wäre denn wenn du nicht alle Segmente verschiebst, sondern nur das letzte im Container nach vorne bringst und dessen Position anpasst?

„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Zum Seitenanfang

Azasel

unregistriert

27.06.2017, 15:43

Zitat von »David Scherfgen«

Dein Kommentar ist schon richtig. Überleg mal, was passiert. Zuerst wird Segment 1 auf Segment 0 gesetzt. Dann Segment 2 auf Segment 1, was aber vorher schon auf Segment 0 gesetzt wurde, also sind jetzt auch die Segmente 2 und 0 identisch. Und so zieht sich das immer weiter durch, und am Ende sind alle Segmente identisch. Dass du zwei siehst, liegt daran, dass du anschließend nochmal Segment 0 bewegst.

Ok, jetzt (, nach 5 Minuten Kritzelei auf einem Papier,) ist mir der Fehler auch aufgefallen.

Javascript-Quelltext

schlange.prototype.update = function()
        {
            switch(richtung)
            {
                case "rechts":
                    for(var i = 1; i < this.segmente.length; i++)
                    {
                        this.segmente[this.segmente.length-i].posX = this.segmente[this.segmente.length-i-1].posX;
                        this.segmente[this.segmente.length-i].posY = this.segmente[this.segmente.length-i-1].posY;
                    }                  
                    this.segmente[0].posX += 10;
                    break;

Danke

Zum Seitenanfang

Schorsch

Supermoderator

Beiträge: 5 145

Wohnort: Wickede

Beruf: Softwareentwickler

27.06.2017, 20:36

Zitat von »Azasel«

Ok, jetzt (, nach 5 Minuten Kritzelei auf einem Papier,) ist mir der Fehler auch aufgefallen.

An sich läufst du die Elemente ja jetzt von hinten nach vorne durch. Du kannst deinen Code vereinfachen indem du die Berechnung vom Index in die Schleife verschiebst. Dann wird es etwas offensichtlicher was du da tust. Soll heißen sein i läuft vom letzten zum zweiten Element, anstatt i als Offset zum letzten Element laufen zu lassen. Zumindest finde ich das so lesbarer und verständlicher.

„Es ist doch so. Zwei und zwei macht irgendwas, und vier und vier macht irgendwas. Leider nicht dasselbe, dann wär's leicht.
Das ist aber auch schon höhere Mathematik.“

Zum Seitenanfang

Werbeanzeige

spieleprogrammierer.de - Forum und Wiki zur Spieleprogrammierung und Spieleentwicklung

[Javascript] Snake update() fehler

[Javascript] Snake update() fehler

Javascript-Quelltext

Inhalt anzeigen/verstecken

HTML

Für Lösung hier klicken oder selbst drauf kommen!

Zitat von »David Scherfgen«

Javascript-Quelltext

Zitat von »Azasel«

Ähnliche Themen