const board = document.getElementById("game-board");
const snake = document.createElement("div");
const food = document.getElementById("food");
snake.className = "snake";
snake.style.left = "0px";
snake.style.top = "0px";
board.appendChild(snake);
const dx = 20;
const dy = 20;
let foodX = Math.floor(Math.random() * 20) * dx;
let foodY = Math.floor(Math.random() * 20) * dy;
food.style.left = foodX + "px";
food.style.top = foodY + "px";
let snakeX = 0;
let snakeY = 0;
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowRight") {
snakeX += dx;
} else if (event.key === "ArrowLeft") {
snakeX -= dx;
} else if (event.key === "ArrowUp") {
snakeY -= dy;
} else if (event.key === "ArrowDown") {
snakeY += dy;
}
snake.style.left = snakeX + "px";
snake.style.top = snakeY + "px";
if (snakeX === foodX && snakeY === foodY) {
foodX = Math.floor(Math.random() * 20) * dx;
foodY = Math.floor(Math.random() * 20) * dy;
food.style.left = foodX + "px";
food.style.top = foodY + "px";
const newSegment = document.createElement("div");
newSegment.className = "snake";
board.appendChild(newSegment);
}
});
