Was ist das Problem?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
programmieren, JavaScript, Programmieren & Softwareentwicklung
15.10.2023, 17:08

Statt den Essenspunkt vorzuhängen, würde ich sie anhängen.

snake.push({
  x: snake[snake.length - 1].x,
  y: snake[snake.length - 1].y
});

Des Weiteren brauchst du je Schritt der Schlange einen Shift. Eine Funktion hast du dafür schon geschrieben, allerdings musst du sie auch aufrufen.

if (foodCollected) {
  /* ... */
}

shiftSnake();

/* ... */

Den Funktionsnamen würde ich in diesem Zug noch ändern. Er besteht aus zwei Wörtern, daher ist die camelCase-Schreibart angebracht (shiftSnake).

Ein paar weitere Verbesserungstipps:

1) Zwei Tippfehler: cellWidth und cellHeight.

2) In den Zeilen, in denen du die beiden Variablen definierst, fehlt jeweils ein Semikolon am Zeilenende. Es ist zwar kein Fehler, doch der Form halber würde ich empfehlen, immer einheitlich ein Semikolon zu setzen.

3) Mehrere deiner Variablen (canvas, ctx, rows, cols, snake, cellWidth, cellHeight) ändern nie ihren Wert und können daher auch direkt als Konstanten angelegt werden. Das gilt an sich ebenso für food. Du müsstest nur dessen Positionsänderung etwas anpassen.

food.x = Math.floor(Math.random() * cols);
food.y = Math.floor(Math.random() * rows);

4) Wenn du die Richtung abfragst oder den Key Code, hast du jedesmal Fälle, in denen nur ein Wert zutreffen kann. Die Richtung kann beispielsweise nicht gleichzeitig die Werte LEFT und UP haben. Trotzdem prüfst du immer alle Fälle.

Es wäre besser, stattdessen mit switch oder if-else if zu arbeiten.

Beispiel:

switch (direction) {
  case 'LEFT':
    --snake[0].x;
    break;
  case 'RIGHT':
    ++snake[0].x;
    break;
  case 'UP':
    --snake[0].y;
    break;
  case 'DOWN':
    ++snake[0].y;
    break;
}

Im besten Fall (LEFT) muss nur ein Vergleich durchgeführt werden. Im schlechtesten Fall (DOWN) werden alle Vergleiche abgearbeitet.
Mikaaaaaaaaaaa
15.10.2023, 14:27

Mehr Kontext, sowie den Code in schriftform wäre sehr praktisch um zu helfen.
Hallo1234567569 
Fragesteller
 15.10.2023, 14:34

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Snake</title>

</head>

<body>

   

    <canvas id="canvas" width="480" height="480"></canvas>

    <script>

        let canvas = document.getElementById('canvas');

        let ctx = canvas.getContext('2d');

        let rows = 20;

        let cols = 20;

        let snake = [{

            x: 19,

            y:3

        }];

        let food = {

            x: 4,

            y: 5

        };

        let cellWidht = canvas.width / cols

        let cellHeigth = canvas.height / rows

        let direction = 'LEFT';

        let foodCollected = false;

        placeFood();

        setInterval(gameLoop, 500);

        document.addEventListener('keydown', keyDown);

        draw();

       

        function draw() {

            ctx.fillStyle = 'black';

            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = 'white'

            snake.forEach(part => add(part.x, part.y));

           

            ctx.fillStyle = 'yellow'

            add(food.x, food.y); //food

            requestAnimationFrame(draw);

        }

            function placeFood(){

                let randomX = Math.floor(Math.random() * cols);

                let randomY = Math.floor(Math.random() * rows);

                food = {x: randomX, y: randomY};

             }

        function add(x, y) {

            ctx.fillRect(x * cellWidht, y * cellHeigth, cellWidht - 1, cellHeigth - 1);

        }

        function shiftsnake() {

            for (let i = snake.length - 1; i > 0; i--) {              const part = snake[i];

                const lastPart = snake[i - 1];

                part.x = lastPart.x;

                part.y = lastPart.y;

i          

            }

        }

        function gameLoop() {

            if(foodCollected) {

                snake = [{x: snake[0].x, y: snake[0].y}, ...snake];

                foodCollected = false;

        }

             

            if (direction == 'LEFT') {

            snake[0].x--;

            }

            if (direction == 'RIGHT') {

            snake[0].x++;

            }

           if (direction == 'UP') {

            snake[0].y--;

           }

           if (direction == 'DOWN') {

            snake[0].y++;

           }

           if(snake[0].x ==food.x

           && snake[0].y == food.y) {

           foodCollected = true;

                 placeFood();

           }

    }

       

           

        function keyDown(e) {

            if (e.keyCode == 37) {  //Richtung Liks

                direction = 'LEFT';

            }

            if (e.keyCode == 38) {

                direction = 'UP';

            }

            if (e.keyCode == 39) {

                direction = 'RIGHT';

            }

            if (e.keyCode == 40) {

                direction = 'DOWN';

            }

        }    

    </script>

</body>

</html>

0