Snake Game by @Caimano73 - Codewith.it

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

Referenze

requiredRende obbligatorio un campo di input
valueValore alfanumerico o booleano contenuto in un elemento
<caption>Definisce didascalie all'interno di una tabella
<nav>Definisce un menu di navigazione
animationDefinisce i parametri dell'animazione di un elemento o selettore
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

jeanson ancheta

Nuovo sito travel

UFFICIALE SITO REGIONI

Password validator

copia da paragrafo

basicStructure 2

mental breackdown

Costruzione di tabella con html5

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>