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

Snake html

JokingJoker25

Neues Mitglied
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!
 
Zurück
Oben