Indovina il Numero - Gioco(2) by @filcreators060 - Codewith.it

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

Referenze

_selfApre collegamenti ipertestuali nella stessa pagina del browser
getDefinisce un metodo di invio di dati al server
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<embed>Tag per l'incorporamento di contenuti multimediali
hreflangConsente di dichiarare la lingua del documento collegato.
<aside>Definisce un contenuto separato dal testo perincipale

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esempio di scrittura HTML per esam

I Giornali sul Web

Neon Flux - Visual Design in Motio

prova che si muove

esercizio 1 esame

passi avanti regioni italiane

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>Indovina il Numero - Gioco</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            background-color: black;
            color: white;
            overflow: auto; /* Assicurati che la pagina possa scrollare */
        }
        .container {
            margin: 20px auto;
            width: 300px;
            background: rgba(255, 0, 0, 0.2);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px red;
        }
        h1, h3 {
            font-size: 2em;
            color: red;
        }
        p {
            font-size: 1.2em;
        }
        input {
            margin: 5px;
            padding: 8px;
            width: 120px;
            text-align: center;
            font-size: 1.2em;
            border: 2px solid red;
            background: black;
            color: white;
        }
        button {
            margin: 10px;
            padding: 10px;
            font-size: 1.2em;
            cursor: pointer;
            border-radius: 5px;
            transition: 0.3s;
        }
        .guess-btn {
            border: 2px solid lime;
            color: lime;
            background: black;
        }
        .guess-btn:hover {
            background: lime;
            color: black;
        }
        .surrender {
            border: 2px solid white;
            color: white;
            background: black;
        }
        .surrender:hover {
            background: white;
            color: black;
        }
        .new-game {
            border: 2px solid blue;
            color: blue;
            background: black;
        }
        .new-game:hover {
            background: blue;
            color: black;
        }
        .level-menu {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: black;
            border: 2px solid red;
            color: white; /* Scritta LIVELLI in bianco */
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.2em;
        }
        .level-options {
            display: none;
            position: absolute;
            top: 50px;
            left: 20px;
            background-color: rgba(255, 0, 0, 0.2);
            border: 2px solid red;
            color: white; /* Bottoni livelli in bianco */
            padding: 10px;
            border-radius: 5px;
        }
        .level-options button {
            border: 2px solid white;
            color: white;
            padding: 8px;
            margin: 5px;
            font-size: 1.2em;
            background: black;
        }
        .level-options button:hover {
            background: white;
            color: black;
        }
        #history {
            list-style-type: none;
            padding: 0;
            font-size: 1.2em;
        }
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            display: none;
            z-index: 1; /* Assicurati che il canvas stia dietro gli altri elementi */
        }
    </style>
</head>
<body>
    <h1>Indovina il Numero - Gioco</h1>

    <div class="level-menu" id="levelMenu" onclick="toggleLevelMenu()">LIVELLI</div>
    <div class="level-options" id="levelOptions">
        <button onclick="changeLevel(2)">2 Cifre</button>
        <button onclick="changeLevel(3)">3 Cifre</button>
        <button onclick="changeLevel(4)">4 Cifre</button>
        <button onclick="changeLevel(5)">5 Cifre</button>
        <button onclick="changeLevel(6)">6 Cifre</button>
    </div>

    <div class="container" id="start">
        <button onclick="startGame()">Inizia Gioco</button>
    </div>
    
    <div class="container" id="game" style="display: none;">
        <input type="text" id="guessInput" placeholder="Cifre" onkeydown="handleKeyPress(event)" />
        <button class="guess-btn" onclick="makeGuess()">Prova</button>
        <button class="surrender" onclick="surrender()">Arrenditi</button>
        <p id="feedback"></p>
        <h3>Tentativi precedenti:</h3>
        <ul id="history"></ul>
    </div>

    <div class="container" id="newGameBtn" style="display: none;">
        <button class="new-game" onclick="newGame()">Nuova Partita</button>
    </div>

    <canvas id="confettiCanvas"></canvas>

    <script>
        let secretNumber = "";
        let attempts = 0;
        let numDigits = 4; 

        function generateSecretNumber() {
            let digits = new Set();
            while (digits.size < numDigits) {
                digits.add(Math.floor(Math.random() * 9) + 1); // Le cifre valide sono solo 1-9 (escluso lo 0)
            }
            secretNumber = Array.from(digits).join("");
        }

        function startGame() {
            generateSecretNumber();
            document.getElementById("game").style.display = "block";
            document.getElementById("start").style.display = "none";
            document.getElementById("history").innerHTML = "";
            document.getElementById("feedback").innerText = "";
            document.getElementById("guessInput").value = "";
            document.getElementById("guessInput").setAttribute("maxlength", numDigits);
            document.getElementById("newGameBtn").style.display = "none";
            attempts = 0;
        }

        function makeGuess() {
            const guess = document.getElementById("guessInput").value;
            if (guess.length !== numDigits || isNaN(guess)) {
                alert(`Inserisci un numero valido di ${numDigits} cifre.`);
                return;
            }

            let correctPosition = 0;
            for (let i = 0; i < numDigits; i++) {
                if (guess[i] === secretNumber[i]) {
                    correctPosition++;
                }
            }

            attempts++;

            document.getElementById("feedback").innerText = `Tentativo #${attempts}: ${correctPosition} cifre giuste`;

            const history = document.getElementById("history");
            const li = document.createElement("li");
            li.innerText = `Tentativo: ${guess} - ${correctPosition} cifre corrette`;
            history.appendChild(li);

            if (guess === secretNumber) {
                alert(`Complimenti! Hai indovinato il numero in ${attempts} tentativi!`);
                startConfetti();
                document.getElementById("newGameBtn").style.display = "block";
            }
        }

        function surrender() {
            document.getElementById("feedback").innerText = `Ti sei arreso! Il numero segreto era: ${secretNumber}`;
            document.getElementById("newGameBtn").style.display = "block";
        }

        function newGame() {
            document.getElementById("confettiCanvas").style.display = "none";
            startGame();
        }

        function changeLevel(level) {
            numDigits = level;
            startGame();
            document.getElementById("levelMenu").innerText = `LIVELLO: ${level} Cifre`;
        }

        function toggleLevelMenu() {
            const levelOptions = document.getElementById("levelOptions");
            levelOptions.style.display = levelOptions.style.display === "none" ? "block" : "none";
        }

        function handleKeyPress(event) {
            if (event.key === "Enter") {
                makeGuess();
            }
        }

        function startConfetti() {
            const canvas = document.getElementById("confettiCanvas");
            const ctx = canvas.getContext("2d");
            canvas.style.display = "block";

            const particles = [];
            for (let i = 0; i < 200; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: 0, // I coriandoli partono dall'alto
                    radius: Math.random() * 4 + 1,
                    speedX: Math.random() * 6 - 3,
                    speedY: Math.random() * 6 + 2, // Velocità verso il basso
                    color: `hsl(${Math.random() * 360}, 100%, 50%)`,
                });
            }

            function animateConfetti() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (let i = 0; i < particles.length; i++) {
                    let p = particles[i];
                    p.x += p.speedX;
                    p.y += p.speedY;
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    ctx.fillStyle = p.color;
                    ctx.fill();
                }

                requestAnimationFrame(animateConfetti);
            }

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            animateConfetti();
        }
    </script>
</body>
</html>