Snake modified by @LeoMosc - Codewith.it

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

References

<table>Tag primario per la creazione di tabelle
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<body>Tag primario di un documento HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Con nome bandiera(2)

Heads Or Tails Random Tally

26/01/2024 pagina html

esercitazione 5

Istogramma a colonne

Esercizio tabella e form

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.

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);