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

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

Referenze

<label>Mostrare un testo di etichetta per un elemento di input.
_parentApre collegamenti ipertestuali nell'elemento genitore
<table>Tag primario per la creazione di tabelle
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
methodDetermina il metodo di invio dei dati di un form al server
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio esame \"if else\" in html

DEMO: Hi-Lo Game

pag. 6 progetto inf

copia da paragrafo

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>