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

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

References

placeholderDefinisce un testo segnaposto per un elemento input o textarea
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
hreflangConsente di dichiarare la lingua del documento collegato.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
minlengthDetermina il numero minimo di caratteri per un elemento input

Users

Log in to search for users

Explore

Find inspiration

velocità scrittura

esercizio HTML modalità interna

Lezione 4 (seconda parte)

esercitazione 5

RoofTop Snipers

3 LS 29-01 IPERTESTI INTERNI

codice per verifica

Borsino politico(2)

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>