• 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!
 
Werbung:
Zurück
Oben