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>