Snake game by @Codewith.it - Codewith.it

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

Referenze

multipleConverte in lista a selezione multipla
idIdentifica univocamente un elemento HTML
multipart/form-dataCodifica dei caratteri di un form
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<head>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

JS Strutture dati e funzioni es2

voti con virgola

I benefici dell\\

Esame di informatica

Il mio primo sito(2)

Chiara Informatica

SCHEDA 4 INFORMATICA

Esercitazione tabelle

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.

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <!-- Snake game -->
  </body>
</html>

body{
  margin:auto;
  background:black;
  text-align:center;
  margin-top:6px;
}

button{
  display:block;
  padding:5px 10px;
  margin:auto;
  margin-top:2px;
  width:200px;
  font-family:monospace;
  text-align:center;
  background:rgb(174,255,174);
  animation:blink 2s infinite alternate both;
  
}
@keyframes blink{
  0%{
    background:rgb(255,244,24);
  }
  100%{

    background:rgb(107,255,243);
  }
}

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

//dimesione canvas
var canvasSize = 400;
canvas.width = canvasSize;
canvas.height = canvasSize;


// scritta iniziale 
ctx.fillStyle = "lightgreen";
ctx.font = "40px monospace";
ctx.fillText("PLAY SNAKE", canvasSize/2 - 100, canvasSize/2 - 20);

// Variabili di gioco
//		dimensione punto griglia
var gridSize = 10;
var gameSpeed = 100 //millisecondi : NON MINORE DI 20!!
var gridWidth = canvas.width / gridSize;
var gridHeight = canvas.height / gridSize;
var snake = [
  { x: 2, y: 0 },
  { x: 1, y: 0 },
  { x: 0, y: 0 }
];
var direction = "right";
var food = createFood();
var score = 0;
var gameLoop;

// Posizione cibo casuale
function createFood() {
  return {
    x: Math.floor(Math.random() * gridWidth),
    y: Math.floor(Math.random() * gridHeight)
  };
}
// update 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++; // Incrementa il punteggio
  } else {
    // Rimuove la coda dello snake
    snake.pop();
  }

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

  // Cibo
  ctx.fillStyle = "#f00";
  ctx.fillRect(food.x * gridSize, food.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);
}

// pulsanti direzione
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);
    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 gioco
function resetGame() {
  snake = [
    { x: 2, y: 0 },
    { x: 1, y: 0 },
    { x: 0, y: 0 }
  ];
  direction = "right";
  food = createFood();
  score = 0;
  gameLoop = null;
  document.getElementById("playButton").style.display = "block"; 
}

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