Snake Game by @Caimano73 - Codewith.it

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

Referenze

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
formnovalidateImpedisce la convalida di un singolo elemento input
formmethodDefinisce il metodo di invio dei dati oltre a method
hreflangConsente di dichiarare la lingua del documento collegato.
classDefinisce una o più classi per elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Elder & Volunteer Matching

Geyser NEW 4/12 Litri

Template prodotti Meguiar

pag. 5 progetto inf

Esercizio LISTA

Heads and Tails

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 lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            background-color: #005;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .game-over {
            display: none;
            text-align: center;
            font-size: 30px;
            color: #ff0000;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div id="gameOverMessage" class="game-over">
        <p id="finalScore"></p>
        <button id="restartButton">Ricomincia</button>
    </div>
    <canvas id="gameCanvas" width="750" height="500"></canvas>
    <button id="pauseButton">Pausa</button>
    <script>
        // Definire le variabili globali
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const pauseButton = document.getElementById("pauseButton");
        const gameOverMessage = document.getElementById("gameOverMessage");
        const restartButton = document.getElementById("restartButton");
        const finalScore = document.getElementById("finalScore");

        const snakeSize = 10;
        let snake = [{ x: 50, y: 50 }];
        let food = { x: 0, y: 0 };
        let direction = 'RIGHT';
        let score = 0;
        let gamePaused = false; // Stato del gioco (in pausa o in esecuzione)

        // Funzione per generare la posizione casuale del cibo
        function spawnFood() {
            food.x = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
            food.y = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
        }

        // Funzione per disegnare la testa e il corpo del serpente
        function drawSnake() {
            snake.forEach((segment, index) => {
                ctx.fillStyle = index === 0 ? "#00FF00" : "#00FF00";  // Corretto il colore del corpo
                ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
            });
        }

        // Funzione per disegnare il cibo
        function drawFood() {
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(food.x, food.y, snakeSize, snakeSize);  // Corretto l'errore di sintassi
        }

        // Funzione per aggiornare la posizione del serpente
        function updateSnake() {
            let head = { x: snake[0].x, y: snake[0].y };

            switch (direction) {
                case 'LEFT':
                    head.x -= snakeSize;
                    break;
                case 'RIGHT':
                    head.x += snakeSize;
                    break;
                case 'UP':
                    head.y -= snakeSize;
                    break;
                case 'DOWN':
                    head.y += snakeSize;
                    break;
            }

            snake.unshift(head);
            // Se il serpente mangia il cibo
            if (head.x === food.x && head.y === food.y) {
                score++;
                spawnFood();
            } else {
                snake.pop();
            }
        }

        // Funzione per controllare se il serpente ha colpito se stesso o i bordi
        function checkCollisions() {
            let head = snake[0];

            // Collisione con i bordi
            if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
                return true;
            }

            // Collisione con se stesso
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }

            return false;
        }

        // Funzione per disegnare il punteggio
        function drawScore() {
            ctx.fillStyle = "#FFFFFF";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 20);
        }

        // Funzione principale del gioco
        function gameLoop() {
            if (gamePaused) return; // Se il gioco è in pausa, esci dalla funzione

            ctx.clearRect(0, 0, canvas.width, canvas.height); // Pulisce lo schermo

            updateSnake();
            if (checkCollisions()) {
                showGameOver();
                return;
            }

            drawSnake();
            drawFood();
            drawScore();
            setTimeout(gameLoop, 100); // Controlla il gioco ogni 10 millisecondi
        }

        // Funzione per mostrare la schermata "Game Over" senza la scritta
        function showGameOver() {
            gameOverMessage.style.display = "block"; // Mostra la schermata di Game Over
            finalScore.innerHTML = "Punteggio finale: " + score;
            gamePaused = true; // Ferma il gioco
        }

        // Funzione per resettare il gioco
        function resetGame() {
            snake = [{ x: 50, y: 50 }];
            direction = 'RIGHT';
            score = 0;
            spawnFood();
            gameOverMessage.style.display = "none"; // Nasconde la schermata "Game Over"
            gamePaused = false; // Riprendi il gioco
            gameLoop(); // Avvia il gioco
        }

        // Gestire la direzione tramite i tasti freccia
        document.addEventListener('keydown', function(event) {
            if (gamePaused) return; // Non cambia direzione se il gioco è in pausa
            switch (event.key) {
                case 'ArrowLeft':
                    if (direction !== 'RIGHT') direction = 'LEFT';
                    break;
                case 'ArrowRight':
                    if (direction !== 'LEFT') direction = 'RIGHT';
                    break;
                case 'ArrowUp':
                    if (direction !== 'DOWN') direction = 'UP';
                    break;
                case 'ArrowDown':
                    if (direction !== 'UP') direction = 'DOWN';
                    break;
            }
        });

        // Funzione per mettere in pausa o riprendere il gioco
        pauseButton.addEventListener('click', function() {
            gamePaused = !gamePaused; // Cambia lo stato di pausa
            if (!gamePaused) gameLoop(); // Se il gioco non è in pausa, avvia il ciclo del gioco
        });

        // Gestire il pulsante "Ricomincia" per riprendere il gioco
        restartButton.addEventListener('click', resetGame);

        // Avvia il gioco
        spawnFood();
        gameLoop();
    </script>
</body>
</html>