HTML
CSS
JS
Edit on Codewith.it
<!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);