Webleb - HTML UI Elements - Gioco del serpente

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;

const blockSize = 20;
let speed = 100;
let snake = [
  { x: 240, y: 240 },
  { x: 220, y: 240 },
  { x: 200, y: 240 }
];
let direction = 'RIGHT';
let food = generateFood();
let score = 0;
let gameOver = false;

function moveSnake() {
  const head = { ...snake[0] };

if (direction === 'UP') head.y -= blockSize;
  if (direction === 'DOWN') head.y += blockSize;
  if (direction === 'LEFT') head.x -= blockSize;
  if (direction === 'RIGHT') head.x += blockSize;

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
    score += 10;
    food = generateFood();
    updateScore();
    if (score % 50 === 0) {
      speed -= 10;
    }
  } else {
    snake.pop();
  }
}

function generateFood() {
  let x = Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize;
  let y = Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize;
  return { x, y };
}

function drawSnake() {
  ctx.fillStyle = 'green';
  snake.forEach((segment, index) => {
    if (index === 0) {
      ctx.fillStyle = 'darkgreen';
    } else {
      ctx.fillStyle = 'green';
    }
    ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
  });
}

function drawFood() {
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, blockSize, blockSize);
}

function checkCollisions() {
  const head = snake[0];

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    gameOver = true;
  }

for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      gameOver = true;
    }
  }
}

function updateScore() {
  document.getElementById('scoreDisplay').innerText = `Score: ${score}`;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawSnake();
  drawFood();
}

function gameLoop() {
  if (gameOver) return showGameOver();

moveSnake();
  checkCollisions();
  draw();
}

function showGameOver() {
  document.getElementById('gameOverText').style.display = 'block';
}

document.addEventListener('keydown', (e) => {
  if (e.code === 'ArrowUp' && direction !== 'DOWN') {
    direction = 'UP';
  } else if (e.code === 'ArrowDown' && direction !== 'UP') {
    direction = 'DOWN';
  } else if (e.code === 'ArrowLeft' && direction !== 'RIGHT') {
    direction = 'LEFT';
  } else if (e.code === 'ArrowRight' && direction !== 'LEFT') {
    direction = 'RIGHT';
  }
});

setInterval(gameLoop, speed);

Validating your code, please wait...

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;

const blockSize = 20;
let speed = 100;
let snake = [
  { x: 240, y: 240 },
  { x: 220, y: 240 },
  { x: 200, y: 240 }
];
let direction = 'RIGHT';
let food = generateFood();
let score = 0;
let gameOver = false;

function moveSnake() {
  const head = { ...snake[0] };

if (direction === 'UP') head.y -= blockSize;
  if (direction === 'DOWN') head.y += blockSize;
  if (direction === 'LEFT') head.x -= blockSize;
  if (direction === 'RIGHT') head.x += blockSize;

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
    score += 10;
    food = generateFood();
    updateScore();
    if (score % 50 === 0) {
      speed -= 10;
    }
  } else {
    snake.pop();
  }
}

function generateFood() {
  let x = Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize;
  let y = Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize;
  return { x, y };
}

function drawSnake() {
  ctx.fillStyle = 'green';
  snake.forEach((segment, index) => {
    if (index === 0) {
      ctx.fillStyle = 'darkgreen';
    } else {
      ctx.fillStyle = 'green';
    }
    ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
  });
}

function drawFood() {
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x, food.y, blockSize, blockSize);
}

function checkCollisions() {
  const head = snake[0];

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
    gameOver = true;
  }

for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      gameOver = true;
    }
  }
}

function updateScore() {
  document.getElementById('scoreDisplay').innerText = `Score: ${score}`;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawSnake();
  drawFood();
}

function gameLoop() {
  if (gameOver) return showGameOver();

moveSnake();
  checkCollisions();
  draw();
}

function showGameOver() {
  document.getElementById('gameOverText').style.display = 'block';
}

document.addEventListener('keydown', (e) => {
  if (e.code === 'ArrowUp' && direction !== 'DOWN') {
    direction = 'UP';
  } else if (e.code === 'ArrowDown' && direction !== 'UP') {
    direction = 'DOWN';
  } else if (e.code === 'ArrowLeft' && direction !== 'RIGHT') {
    direction = 'LEFT';
  } else if (e.code === 'ArrowRight' && direction !== 'LEFT') {
    direction = 'RIGHT';
  }
});

setInterval(gameLoop, speed);