Snake game by @Codewith.it - Codewith.it

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

Referenze

formSpecifica a quale form appartiene un elemento.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<map>Inserisce immagini mappa cliccabili in un documento
<tbody>Definisce il contenuto principale di una tabella.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
downloadConsente di scaricare file al click di collegamento ipertestuale.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

portfolio_marco_mantovani.html

Navbar Example 1

PROVA SITO ALEX

Tabella con ricerca

altro esercizio tabella

UFFICIALE SITO REGIONI

Il bambino e le stelle ma(2)

Caps Lock Checker

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