Snake game by @dintromat06 - Codewith.it

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

References

maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
listCollega un elemento input con una lista di opzioni datalist
<h6>Titolo di intestazione di sesto livello
<h5>Titolo di intestazione di quinto livello
<li>Inserisce voci all'interno di una lista
<meta>Definisce i meta dati di una pagina web.

Users

Log in to search for users

Explore

Find inspiration

Navbar Example 3

Esercizi 01/03/2024 es2

Chronē — Orologi d\'autore •

pag. 6 progetto inf

RadioTorchiarolo:NUOVO SITO - Home

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