Snake html

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JokingJoker25

Neues Mitglied
24 November 2020
1
0
1
16
Hallo,
könnte jemand mal über den Code hier schauen:
Code:
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
   
    <title></title>

    <style>
        #field{
         
            width: 525px;
            height: 500px;
            border: 5px solid black;
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;

        }

        #Head{
            width: 25px;
            height: 25px;
            background-color: blue;
            position: relative;
           
        }

        #food{
            width: 25px;
            height: 25px;
            background-color: green;
            margin-bottom: -25px;
           
            position: relative;
        }

        .Body{
            width: 25px;
            height: 25px;
            background-color: blue;
            position: relative;
        }
    </style>
</head>
<body>
   
    <div id="field">
        <div id="food"></div>
        <div class="snake" id="Head"></div>
       
    </div>
 


<script type="text/javascript">


    //Head
    var HeadStyle = document.getElementById("Head").style;
    document.getElementById("food").style.right = "-500px";
    document.getElementById("food").style.bottom = "-50px";
    //start position
    var currentRight = -200;
    var currentDown = -50;
    //set start position
    HeadStyle.right = currentRight + "px";  
    HeadStyle.bottom = currentDown + "px";
    //moveBools
    var moveRight = true;
    var moveLeft = false;
    var moveDown = false;
    var moveUp = false;
    var eat = false;
    var body = [];
    var bodiesInt = 0;
    function GameLoop()
    {
        //Move
        var HeadRightBeforeMove = HeadStyle.right;
        var HeadBottomBeforeMove = HeadStyle.bottom;
        if(moveRight){
            currentRight -= 25;
            HeadStyle.right = currentRight + "px";
        }
        else if(moveLeft){
            currentRight += 25;
            HeadStyle.right = currentRight + "px";
        }
        else if(moveUp){
            currentDown += 25;
            HeadStyle.bottom = currentDown + "px";
        }
        else if(moveDown){
            currentDown -= 25;
            HeadStyle.bottom = currentDown + "px";
        }

       
     
     
       
       //Eat
       var FoodStyle = document.getElementById("food").style;
        if(HeadStyle.bottom  == FoodStyle.bottom && HeadStyle.right == FoodStyle.right){
            for(var i = 0; i < 1; i++){
                var randright = Math.random();
                randright *= 20;
                randright = Math.floor(randright);
                randright = -randright;
                randright *= 25;
                var randbottom = Math.random();
                randbottom *= 20;
                randbottom = Math.floor(randbottom);
                randbottom = -randbottom;
                randbottom *= 25;
               
                if(randright == FoodStyle.right || randbottom == FoodStyle.bottom){
                    i -= 1;
                }
                else{
                    eat = true
                    FoodStyle.bottom = randbottom + "px";
                    FoodStyle.right = randright + "px";
                    var node = document.createElement("div");
                   
                    document.getElementById("field").appendChild(node);
                    node.className = "Body";
                    node.id = "Body" + bodiesInt;
                    body[bodiesInt] = node;                
                    bodiesInt++;
                   
                }
            }

        }

        if(!eat && bodiesInt > 0){
           
            document.getElementById("Body" + body[length - 1]).style.right = HeadRightBeforeMove;
            document.getElementById("Body" + body[length - 1]).style.bottom = HeadBottomBeforeMove;
            var lastbody = body.pop();
            body.unshift(lastbody);
            console.log(body);
        }
        else if(eat){
            node.style.right = HeadRightBeforeMove;
            node.style.bottom = HeadBottomBeforeMove;
            eat = false;
        }
       
       
    }
   
   

    setInterval(function(){
       GameLoop();
    }, 250);
   
    document.addEventListener("keydown", function(event){
        //Left
        if((event.keyCode == 65 || event.keyCode == 37) && !moveRight) {
            moveLeft = true;
            moveUp = false;
            moveDown = false;
            moveRight = false;
        }
        //Right
        else if((event.keyCode == 68 || event.keyCode == 39) && !moveLeft){
            moveLeft = false;
            moveUp = false;
            moveDown = false;
            moveRight = true;
        }
        //Up
        else if((event.keyCode == 87 || event.keyCode == 38) && !moveDown){
            moveLeft = false;
            moveUp = true;
            moveDown = false;
            moveRight = false;
        }
        //Down
        else if((event.keyCode == 83 || event.keyCode == 40) &&  !moveUp){
            moveLeft = false;
            moveUp = false;
            moveDown = true;
            moveRight = false;
        }
    });
 

   

</script>

</body>
</html>

Die Frucht wird zwar neu positioniert aber die neu gespawnten teile des Körpers der Schlange folgen dem Kopf nicht und sie erscheinen irgendwie zufällig.
Vielen Dank schonmal im voraus!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.140
427
83
68
die neu gespawnten teile des Körpers der Schlange folgen dem Kopf nicht und sie erscheinen irgendwie zufällig.
Das ist kein Wunder, denn die Position eines neuen Körperteils wird ja zufällig festgelegt, wobei die Prozedur etwas umständlich ist. Du musst statt dessen die Position abhängig von Richtung und Position des Kopfes bzw. des letzten Körperteils entgegen der Richtung festlegen.
Ich empfehle zwei Funktionen zu schreiben:
  1. getNextPos um die nächste Position in der aktuellen Richtung zu ermitteln
  2. getBackPos um die Position entgegen der aktuellen Richtung zu ermitteln
Und für die Richtung besser einen String verwenden mit 'right', 'left', 'up', 'down', dann kannst Du bei der Abfrage einen switch verwenden.

Weiter ist das Festlegen der Position mit right und bottom stark gewöhnungsbedürftig und erschwert das Lesen, weil normaler Weise die x-Achse von links nach rechts gezählt wird und die y-Achse von oben nach unten.
 
Zuletzt bearbeitet: