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

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

References

hrefDefinisce l'URL della risorsa/pagina di destinazione.
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<h4>Titolo di intestazione di quarto livello
<link>Collega il documento corrente con una risorsa esterna
animationDefinisce i parametri dell'animazione di un elemento o selettore
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input

Users

Log in to search for users

Explore

Find inspiration

La storia di Cappuccetto Rosso

spiaggia portobotte

Lista delle Attività

GoUp Fitness Il tuo percorso verso

Heads Or Tails Random Tally

inserimento immagini in un testo

form registrazione sportiva

effect6 bouncing

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