Snake Game by @italotramontin - Codewith.it

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

References

widthImposta la larghezza di un elemento HTML
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<td>Definisce una cella di una tabella HTML.
<title>Definisce il titolo della pagina web.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Tracker delle attività giiornalie

Heads Or Tails Random Tally

5/10/24 es. 2 - conta Parole

Riprova verifica di progr

Array of Colors

INFORMATICA - ESERCIZIO 2 RISOLTO

Federica Bachini Lab

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>