Ich würde erstmal schauen ob der "zweite" Junge so blöd es klingen mag überhaupt Gefühle für dich entwickelt hat. Ich meine vielleicht hast du Glück und wenn nicht dann musst du den "ersten" Jungen ja nichts erzählen.
Viel Glück und LG

...zur Antwort
Warum ist das so?

Warum ist bei diesem code der Screen weiß?

 <!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, 200);
    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 testGameOver() {
      //1. Schlange läuft gegen die Wand
      if (snake[0].x < 0 ||
        snake[0].x > cols - 1 ||
        snake[0].y < 0 ||
        snake[0].y > rows - 1
      ) {
        placeFood();
        snake = [{
      x: 19,
      y:3
    }];
      direction = 'LEFT';
  }
      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;
      
      }
    }
    function gameLoop() {
     
      testGameOver();
      if(foodCollected) {
       snake = [{x: snake[0].x, y: snake[0].y}, ...snake];
       
       foodCollected = false;
      }
      
      shiftsnake();
      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 Links
        direction = 'LEFT';
      }
      if (e.keyCode == 38) {
        direction = 'UP';
      }
      if (e.keyCode == 39) {
        direction = 'RIGHT';
      }
      if (e.keyCode == 40) {
        direction = 'DOWN';
      }
    }  
  </script>
</body>
</html>
...zur Frage

Der weiße Bildschirm könnte verschiedene Gründe haben. Hier sind einige Dinge, die du überprüfen solltest:

  1. JavaScript-Fehler: Wenn im JavaScript-Code Fehler vorhanden sind, kann dies dazu führen, dass die Ausführung des Codes fehlschlägt, was zu einem leeren Bildschirm führt. Überprüfe die Browser-Konsole auf etwaige Fehlermeldungen. In deinem Code sind einige Syntaxfehler, die behoben werden müssen. Zum Beispiel ist die Funktion
  2. testGameOver()
  3. nicht richtig geschlossen.
  4. Fehlende Rendervorgänge: Derzeit fehlt in deinem Code eine explizite Methode zum Zeichnen des Spiels. Du hast die Funktion
  5. draw()
  6. definiert, aber sie wird nicht aufgerufen. Du könntest
  7. draw()
  8. in die
  9. gameLoop()
  10. -Funktion einfügen, um das Spiel zu zeichnen.
  11. Event-Listener: Stelle sicher, dass der Event-Listener, der auf Tastatureingaben reagiert (
  12. document.addEventListener('keydown', keyDown);
  13. ), ordnungsgemäß funktioniert. Überprüfe, ob die Tastenereignisse erkannt werden und die Richtung entsprechend aktualisiert wird.
  14. HTML-Struktur: Vergewissere dich, dass die HTML-Struktur korrekt ist. Das HTML-Dokument, das du gepostet hast, sieht in Ordnung aus, aber es ist wichtig sicherzustellen, dass es keine anderen Fehler im HTML-Code gibt, die das Rendering beeinträchtigen könnten.

Sobald du diese Aspekte überprüft und gegebenenfalls korrigiert hast, sollte dein Spiel ordnungsgemäß gerendert werden.

...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.