Snake modified by @LeoMosc - Codewith.it

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

Referenze

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<br>Inserisce uno spazio vuoto tra due elementi HTML.
formmethodDefinisce il metodo di invio dei dati oltre a method
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<em>Formatta il testo in corsivo/italico enfatizzato
<nav>Definisce un menu di navigazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

servizio_fiscale.html

Costruzione di tabella con html5

es riepilogativo da correggere

Selezione Telefoni

congettura di Golbach

Documentazione Tecnica

Comunicare sul Web [Template CSS]

Pro Vercelli Segreteria

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

Oppure questo:
// Creazione del canvas
var canvas = document.createElement("canvas");
canvas.style.backgroundColor = "#03326c";
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

// Dimensione canvas
var canvasSize = 600;
canvas.width = canvasSize;
canvas.height = canvasSize;

// Dimensione punto griglia
var gridSize = 10;
var gridWidth = canvas.width / gridSize;
var gridHeight = canvas.height / gridSize;

// Variabili di gioco
var snake = [
  { x: 2, y: 0 },
  { x: 1, y: 0 },
  { x: 0, y: 0 }
];
var direction = "right";
var newDirection = "right"; // Aggiunta della variabile newDirection
var food = createFood();
var powerUp = createPowerUp();
var score = 0;
var gameLoop;
var gameSpeed = 100; // Velocità di aggiornamento del gioco (in millisecondi)

// Variabili degli effetti dei power-up
var speedBoostActive = false;
var speedBoostTimer;
var speedBoostDuration = 5000; // Durata dell'effetto di aumento di velocità (in millisecondi)

var speedDecreaseActive = false;
var speedDecreaseTimer;
var speedDecreaseDuration = 5000; // Durata dell'effetto di diminuzione di velocità (in millisecondi)

var scoreBoostActive = false;
var scoreBoostTimer;
var scoreBoostDuration = 5000; // Durata dell'effetto di aumento del punteggio (in millisecondi)

// Posizione cibo casuale
function createFood() {
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight)
  };
}

// Posizione power-up casuale
function createPowerUp() {
  var types = ["orange", "purple", "yellow"];
  var type = types[Math.floor(Math.random() * types.length)];
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight),
    type: type
  };
}

// Disegna le linee della griglia
function drawGrid() {
  ctx.strokeStyle = "#888";
  ctx.lineWidth = 0.5;

  // Disegna linee verticali
  for (var x = 0; x <= canvas.width; x += gridSize) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();
  }

  // Disegna linee orizzontali
  for (var y = 0; y <= canvas.height; y += gridSize) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
}

// Funzione per applicare l'effetto del power-up
function applyPowerUpEffect(powerUp) {
  if (powerUp.type === "orange") {
    if (!speedBoostActive) {
      speedBoostActive = true;
      clearInterval(speedBoostTimer);
      speedBoostTimer = setInterval(function () {
        speedBoostActive = false;
      }, speedBoostDuration);
      gameSpeed /= 2; // Aumenta la velocità del gioco
      setTimeout(function () {
        gameSpeed *= 2; // Ripristina la velocità normale dopo la durata dell'effetto
      }, speedBoostDuration);
    }
  } else if (powerUp.type === "purple") {
    if (!speedDecreaseActive) {
      speedDecreaseActive = true;
      clearInterval(speedDecreaseTimer);
      speedDecreaseTimer = setInterval(function () {
        speedDecreaseActive = false;
      }, speedDecreaseDuration);
      gameSpeed *= 2; // Diminuisce la velocità del gioco
      setTimeout(function () {
        gameSpeed /= 2; // Ripristina la velocità normale dopo la durata dell'effetto
      }, speedDecreaseDuration);
    }
  } else if (powerUp.type === "yellow") {
    if (!scoreBoostActive) {
      scoreBoostActive = true;
      clearInterval(scoreBoostTimer);
      scoreBoostTimer = setInterval(function () {
        scoreBoostActive = false;
      }, scoreBoostDuration);
      score += 5; // Aumenta il punteggio del giocatore
      setTimeout(function () {
        score -= 5; // Ripristina il punteggio normale dopo la durata dell'effetto
      }, scoreBoostDuration);
    }
  }
}

// Aggiorna il gioco
function update() {
  var head = { x: snake[0].x, y: snake[0].y };
  direction = newDirection;

  // Posizione direzione
  if (direction === "up") head.y--;
  else if (direction === "down") head.y++;
  else if (direction === "left") head.x--;
  else if (direction === "right") head.x++;

  // Collisione canvas
  if (head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight) {
    // Fine del gioco
    clearInterval(gameLoop);
    drawGameOver();
    resetGame();
    return;
  }

  // Collisione corpo
  for (var i = 1; i < snake.length; i++) {
    if (snake[i].x === head.x && snake[i].y === head.y) {
      // Fine del gioco
      clearInterval(gameLoop);
      drawGameOver();
      resetGame();
      return;
    }
  }

  // Posizione della testa
  snake.unshift(head);

  // Conta del cibo
  if (head.x === food.x && head.y === food.y) {
    // Genera nuovo cibo e aumenta la lunghezza dello snake
    food = createFood();
    score++;
  } else {
    // Rimuove la coda dello snake
    snake.pop();
  }

  // Sfondo
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#00295B";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Griglia
  drawGrid();

  // Cibo
  ctx.fillStyle = "#f00";
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

  // Power-up
  ctx.fillStyle = getPowerUpColor(powerUp.type);
  ctx.fillRect(powerUp.x * gridSize, powerUp.y * gridSize, gridSize, gridSize);

  // Snake
  ctx.fillStyle = "#0f0";
  snake.forEach(function (segment) {
    ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
  });

  // Punteggio
  ctx.fillStyle = "#fff";
  ctx.font = "20px monospace";
  ctx.fillText("Score: " + score, 10, 30);

  // Aggiorna il gioco con la velocità impostata
  gameLoop = setTimeout(update, gameSpeed);
}

// Gestione dell'input da tastiera
function handleKeyPress(event) {
  var keyPressed = event.key;
  if (keyPressed === "ArrowUp" && direction !== "down") {
    newDirection = "up";
  } else if (keyPressed === "ArrowDown" && direction !== "up") {
    newDirection = "down";
  } else if (keyPressed === "ArrowLeft" && direction !== "right") {
    newDirection = "left";
  } else if (keyPressed === "ArrowRight" && direction !== "left") {
    newDirection = "right";
  }
}

// Mostra il messaggio di game over
function drawGameOver() {
  ctx.fillStyle = "#fff";
  ctx.font = "40px monospace";
  ctx.fillText("Game Over", canvas.width / 2 - 100, canvas.height / 2);
}

// Ripristina il gioco alle impostazioni iniziali
function resetGame() {
  snake = [
    { x: 2, y: 0 },
    { x: 1, y: 0 },
    { x: 0, y: 0 }
  ];
  direction = "right";
  food = createFood();
  powerUp = createPowerUp();
  score = 0;
  gameSpeed = 100;
  speedBoostActive = false;
  speedDecreaseActive = false;
  scoreBoostActive = false;
}

// Ottieni il colore del power-up
function getPowerUpColor(type) {
  if (type === "orange") {
    return "#ff9900"; // Arancione
  } else if (type === "purple") {
    return "#993399"; // Viola
  } else if (type === "yellow") {
    return "#ffff00"; // Giallo
  }
}

// Crea il pulsante di avvio
var startButton = document.createElement("button");
startButton.textContent = "Start";
startButton.addEventListener("click", startGame);
document.body.appendChild(startButton);

// Avvia il gioco
function startGame() {
  gameLoop = setTimeout(update, gameSpeed);
}

// Aggiungi l'evento di pressione dei tasti per la gestione dell'input
window.addEventListener("keydown", handleKeyPress);
// Funzione per avviare il gioco
function startGame() {
  gameLoop = setInterval(update, gameSpeed);
}

// Funzione per interrompere il gioco
function stopGame() {
  clearInterval(gameLoop);
  drawGameOver();
  resetGame();
}

// Aggiungi l'evento di pressione del tasto Start
startButton.addEventListener("click", startGame);

// Funzione per gestire il click del tasto Start
function startGame() {
  startButton.removeEventListener("click", startGame); // Rimuovi l'evento click del tasto Start
  startButton.style.display = "none"; // Nascondi il tasto Start
  document.addEventListener("keydown", handleKeyPress); // Aggiungi l'evento di pressione dei tasti per la gestione dell'input
  gameLoop = setInterval(update, gameSpeed); // Avvia il gioco
}

// Funzione per gestire il click del tasto Stop
function stopGame() {
  clearInterval(gameLoop); // Interrompi il gioco
  drawGameOver(); // Mostra il messaggio di Game Over
  resetGame(); // Ripristina il gioco alle impostazioni iniziali
  startButton.style.display = "block"; // Mostra di nuovo il tasto Start
  startButton.addEventListener("click", startGame); // Aggiungi l'evento click del tasto Start
}

// Creazione del tasto Stop
var stopButton = document.createElement("button");
stopButton.textContent = "Stop";
stopButton.addEventListener("click", stopGame);
document.body.appendChild(stopButton);

// Creazione del canvas
var canvas = document.createElement("canvas");
canvas.style.backgroundColor = "#03326c";
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

// Dimensione canvas
var canvasSize = 600;
canvas.width = canvasSize;
canvas.height = canvasSize;

// Dimensione punto griglia
var gridSize = 10;
var gridWidth = canvas.width / gridSize;
var gridHeight = canvas.height / gridSize;

// Variabili di gioco
var snake = [
  { x: 2, y: 0 },
  { x: 1, y: 0 },
  { x: 0, y: 0 }
];
var direction = "right";
var food = createFood();
var powerUp = createPowerUp();
var score = 0;
var gameLoop;
var gameSpeed = 100;

// Posizione cibo casuale
function createFood() {
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight)
  };
}

// Posizione power-up casuale
function createPowerUp() {
  var types = ["orange", "purple", "yellow"];
  var type = types[Math.floor(Math.random() * types.length)];
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight),
    type: type
  };
}

// Disegna le linee della griglia
function drawGrid() {
  ctx.strokeStyle = "#888";
  ctx.lineWidth = 0.5;

  // Disegna linee verticali
  for (var x = 0; x <= canvas.width; x += gridSize) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();
  }

  // Disegna linee orizzontali
  for (var y = 0; y <= canvas.height; y += gridSize) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
}

// Applica l'effetto del power-up
function applyPowerUpEffect(powerUp) {
  if (powerUp.type === "orange") {
    gameSpeed -= 10; // Aumento della velocità del serpente
    setTimeout(function () {
      gameSpeed += 10; // Ripristino della velocità normale dopo 5 secondi
    }, 5000);
  } else if (powerUp.type === "purple") {
    gameSpeed += 10; // Diminuzione della velocità del serpente
    setTimeout(function () {
      gameSpeed -= 10; // Ripristino della velocità normale dopo 5 secondi
    }, 5000);
  } else if (powerUp.type === "yellow") {
    score += 5; // Aumento del punteggio
    snake.push({ x: 0, y: 0 }); // Aumento di 5 caselle dello snake
    snake.push({ x: 0, y: 0 });
    snake.push({ x: 0, y: 0 });
    snake.push({ x: 0, y: 0 });
    snake.push({ x: 0, y: 0 });
  }
}

// Aggiorna il gioco
function update() {
  var head = { x: snake[0].x, y: snake[0].y };
  direction = newDirection;

  // Posizione direzione
  if (direction === "up") head.y--;
  else if (direction === "down") head.y++;
  else if (direction === "left") head.x--;
  else if (direction === "right") head.x++;

  // Collisione canvas
  if (head.x < 0 || head.x >= gridWidth || head.y < 0 || head.y >= gridHeight) {
    // Fine del gioco
    clearInterval(gameLoop);
    drawGameOver();
    resetGame();
    return;
  }

  // Collisione corpo
  for (var i = 1; i < snake.length; i++) {
    if (snake[i].x === head.x && snake[i].y === head.y) {
      // Fine del gioco
      clearInterval(gameLoop);
      drawGameOver();
      resetGame();
      return;
    }
  }

  // Posizione della testa
  snake.unshift(head);

  // Controlla se il serpente mangia il cibo
  if (head.x === food.x && head.y === food.y) {
    // Genera nuovo cibo
    food = createFood();
    score++;
  } else {
    // Rimuove la coda dello snake
    snake.pop();
  }

  // Controlla se il serpente mangia il power-up
  if (head.x === powerUp.x && head.y === powerUp.y) {
    // Applica l'effetto del power-up
    applyPowerUpEffect(powerUp);
    powerUp = createPowerUp();
  }

  // Sfondo
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#00295B";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Griglia
  drawGrid();

  // Cibo
  ctx.fillStyle = "#f00";
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

  // Power-up
  if (powerUp.type === "orange") {
    ctx.fillStyle = "#FFA500";
  } else if (powerUp.type === "purple") {
    ctx.fillStyle = "#800080";
  } else if (powerUp.type === "yellow") {
    ctx.fillStyle = "#FFFF00";
  }
  ctx.fillRect(powerUp.x * gridSize, powerUp.y * gridSize, gridSize, gridSize);

  // Snake
  ctx.fillStyle = "#0f0";
  snake.forEach(function (segment) {
    ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
  });

  // Punteggio
  ctx.fillStyle = "#fff";
  ctx.font = "20px monospace";
  ctx.fillText("Score: " + score, 10, 30);
}

// Gestione dell'input da tastiera
var newDirection = direction;

function handleInput(event) {
  if (event.keyCode === 38 && direction !== "down") {
    newDirection = "up";
  } else if (event.keyCode === 40 && direction !== "up") {
    newDirection = "down";
  } else if (event.keyCode === 37 && direction !== "right") {
    newDirection = "left";
  } else if (event.keyCode === 39 && direction !== "left") {
    newDirection = "right";
  }
}

document.addEventListener("keydown", handleInput);

// Avvia il gioco
function startGame() {
  if (!gameLoop) {
    gameLoop = setInterval(update, gameSpeed); // Imposta la velocità del gioco (in millisecondi)
    document.getElementById("playButton").style.display = "none"; // Nasconde il pulsante "PLAY" una volta avviato il gioco
  }
}

// "Game Over"
function drawGameOver() {
  ctx.fillStyle = "#fff";
  ctx.font = "25px monospace";
  ctx.fillText("Game Over", 10, 60);
}

// Reset del gioco
function resetGame() {
  snake = [
    { x: 2, y: 0 },
    { x: 1, y: 0 },
    { x: 0, y: 0 }
  ];
  direction = "right";
  food = createFood();
  powerUp = createPowerUp();
  score = 0;
  gameLoop = null;
  document.getElementById("playButton").style.display = "block";
}

// Pulsante di gioco
var playButton = document.createElement("button");
playButton.textContent = "PLAY NOW";
playButton.id = "playButton";
playButton.addEventListener("click", startGame);
document.body.appendChild(playButton);