let circle = document.getElementById("circle");
let scoreText = document.getElementById("score");
let score = 0;

<!DOCTYPE html>
<html lang="bs">
<head>
<meta charset="UTF-8">
<title>Snake igra</title>

<style>

body{
    text-align:center;
    font-family:Arial;
    background:#e8f5e9;
}

canvas{
    background:#111;
    border:4px solid #2e7d32;
}

</style>

</head>
<body>

<h1>🐍 Snake igra</h1>
<p>Bodovi: <span id="score">0</span></p>

<canvas id="game" width="400" height="400"></canvas>

<script>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let box = 20;

let snake = [];
snake[0] = {x:9*box, y:10*box};

let food = {
    x: Math.floor(Math.random()*19+1)*box,
    y: Math.floor(Math.random()*19+1)*box
};

let score = 0;

let direction;

document.addEventListener("keydown", DIR);

function DIR(event){

if(event.keyCode == 37 && direction != "RIGHT")
direction = "LEFT";

else if(event.keyCode == 38 && direction != "DOWN")
direction = "UP";

else if(event.keyCode == 39 && direction != "LEFT")
direction = "RIGHT";

else if(event.keyCode == 40 && direction != "UP")
direction = "DOWN";

}

function draw(){

ctx.fillStyle = "#111";
ctx.fillRect(0,0,400,400);

for(let i=0;i<snake.length;i++){

ctx.fillStyle = i==0 ? "lime" : "green";
ctx.fillRect(snake[i].x, snake[i].y, box, box);

}

ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, box, box);

let snakeX = snake[0].x;
let snakeY = snake[0].y;

if(direction == "LEFT") snakeX -= box;
if(direction == "UP") snakeY -= box;
if(direction == "RIGHT") snakeX += box;
if(direction == "DOWN") snakeY += box;

if(snakeX == food.x && snakeY == food.y){

score++;
document.getElementById("score").innerText = score;

food = {
x: Math.floor(Math.random()*19+1)*box,
y: Math.floor(Math.random()*19+1)*box
};

}else{

snake.pop();

}

let newHead = {
x: snakeX,
y: snakeY
};

if(
snakeX < 0 || snakeY < 0 ||
snakeX >= 400 || snakeY >= 400 ||
collision(newHead,snake)
){
clearInterval(game);
alert("Game Over! Bodovi: " + score);
}

snake.unshift(newHead);

}

function collision(head,array){

for(let i=0;i<array.length;i++){
if(head.x == array[i].x && head.y == array[i].y){
return true;
}
}

return false;

}

let game = setInterval(draw,100);

</script>

</body>
</html>