Indovina il Numero - Gioco by @filcreators060 - Codewith.it

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

Referenze

crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<ul>Usato per la creazione di liste non ordinate.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
multipart/form-dataCodifica dei caratteri di un form
<q>Indica una parte di testo come citazione breve

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il mio primo file HTML

Keep Your Emails on Target with Ma

Gesù nostro signore(2)

WEX prova HTML(2)

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>