Snake game by @Codewith.it - Codewith.it

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

References

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<h6>Titolo di intestazione di sesto livello
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<textarea>Area di testo libero espandibile per form HTML
<ul>Usato per la creazione di liste non ordinate.
<aside>Definisce un contenuto separato dal testo perincipale

Users

Log in to search for users

Explore

Find inspiration

LB Campodarsego(2)(2)(2)

esercitazione 5

Tabella esercizi

Esercizio 1 3ASC

Titolo della pagina

Lola Harrel Project 2

Pagina HTML prova

Tabella esercitazione esame

Esercitazione WD

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