Snake Game by @italotramontin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

minlengthDetermina il numero minimo di caratteri per un elemento input
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
listCollega un elemento input con una lista di opzioni datalist
<table>Tag primario per la creazione di tabelle
relServe a definire la relazione tra il documento e una risorsa.

Users

Log in to search for users

Explore

Find inspiration

BasicStructure.html

Esercizi 05/03/2024 es5

Cheeseburger CSS

CheatBlox | PayBack HUB

VERIFICA.BONETTI

Le meraviglie d\\

ESERCIZIO: LE REGIONI ITALIANE E

Il mio primo sito

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
  <style>
    body {
      margin: 0;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      color: white;
      font-family: Arial, sans-serif;
    }
    canvas {
      background-color: #000;
      display: block;
      border: 2px solid #fff;
    }
    #score {
      position: absolute;
      top: 20px;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <div id="score">Score: 0</div>

  <script>
    // Set up the canvas and context
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreDisplay = document.getElementById('score');

    // Game settings
    canvas.width = 400;
    canvas.height = 400;
    const tileSize = 20;
    const rows = canvas.height / tileSize;
    const cols = canvas.width / tileSize;

    // Snake and game variables
    let snake = [{ x: 10, y: 10 }];
    let direction = { x: 0, y: 0 };
    let food = { x: 15, y: 15 };
    let score = 0;
    let gameOver = false;
    let speed = 200; // Initial speed in milliseconds

    // Draw a rectangle on the canvas
    function drawRect(x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
    }

    // Place food at a random position
    function placeFood() {
      food.x = Math.floor(Math.random() * cols);
      food.y = Math.floor(Math.random() * rows);
    }

    // Game loop
    function gameLoop() {
      if (gameOver) {
        alert(`Game Over! Final Score: ${score}`);
        document.location.reload();
        return;
      }

      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw the food
      drawRect(food.x, food.y, 'red');

      // Move the snake
      const newHead = {
        x: snake[0].x + direction.x,
        y: snake[0].y + direction.y,
      };

      // Check if the snake hits the walls
      if (newHead.x < 0 || newHead.x >= cols || newHead.y < 0 || newHead.y >= rows) {
        gameOver = true;
        return;
      }

      // Check if the snake collides with itself
      for (const segment of snake) {
        if (segment.x === newHead.x && segment.y === newHead.y) {
          gameOver = true;
          return;
        }
      }

      // Add new head to the snake
      snake.unshift(newHead);

      // Check if the snake eats the food
      if (newHead.x === food.x && newHead.y === food.y) {
        score++;
        scoreDisplay.textContent = `Score: ${score}`;
        placeFood();
        speed = Math.max(50, speed - 10); // Increase speed, with a lower limit
      } else {
        snake.pop(); // Remove the last segment if no food is eaten
      }

      // Draw the snake
      snake.forEach((segment, index) => {
        drawRect(segment.x, segment.y, index === 0 ? 'lime' : 'green');
      });

      // Repeat the game loop with updated speed
      setTimeout(gameLoop, speed);
    }

    // Handle keyboard input
    document.addEventListener('keydown', event => {
      const { key } = event;

      // Change direction based on arrow keys, ensuring no reverse movement
      if (key === 'ArrowUp' && direction.y === 0) direction = { x: 0, y: -1 };
      if (key === 'ArrowDown' && direction.y === 0) direction = { x: 0, y: 1 };
      if (key === 'ArrowLeft' && direction.x === 0) direction = { x: -1, y: 0 };
      if (key === 'ArrowRight' && direction.x === 0) direction = { x: 1, y: 0 };
    });

    // Start the game
    placeFood();
    gameLoop();
  </script>
</body>
</html>