Keskustelu: Koodit: Klikkaa putkaa

PetriKeckman [17.10.2023 14:38:13]

Koodin teossa auttoi ChatGPT.
Peli ei tarvinne manuaalia: https://www.petke.info/putka.html
Vähän samanlainen peli oli aiemmin, mutta nyt PUTKAt liikkuvat.
<!DOCTYPE html>
<html>
<head>
	<title>Löydä PUTKA ajoissa</title>
    <style>
        .permutation {
            position: absolute;
            display: inline-block;
            cursor: pointer;
        }

    </style>
</head>
<body>
	<h2>Löydä putka</h2>
    <div id="game-container" style="position: relative; width: 100%; height: 100vh;"></div>
    <div id="timer" style="position: absolute; top: 10px; right: 10px; font-size: 24px;"></div>

    <script>
        // Lista "RUNO" sanan permutaatioista
        const permutations = [
"APKUT","UPTAK","PATUK","PKATU","APTUK","UATPK","TKUAP","AUKPT","KUTAP","KUPAT","KTPAU","PKUTA","ATKPU","KUPTA",
"KTUAP","TPKAU","AKUTP","TAKPU","UTPKA","UTKPA","UTAKP","AKTPU","UPATK","UKAPT","KUAPT","AKPTU","ATPUK","APUTK",
"PTUKA","KTAUP","TAUPK","PKTUA","KPTAU","TAPUK","PUTKA","KTUPA","KPTUA","TPUAK","AUKTP","KATPU","PTAUK","PAKUT",
"KATUP","UKATP","TKUPA","UKTAP","TAKUP","PKAUT","PUTAK","UPAKT","TUKPA","UAPTK","TPAKU","KTPUA","TPUKA","PUKTA",
"KUATP","KAPTU","TKAUP","PUKAT","PTUAK","TUPKA","ATPKU","PTKAU","AUPTK","PUATK","ATUKP","AUPKT","PKTAU","TAPKU",
"TUAKP","TPKUA","AKUPT","KPUTA","KAPUT","AKTUP","TPAUK","KPUAT","KPATU","UPKTA","UPKAT","APKTU","UTKAP","PAUTK",
"TAUKP","UPTKA","TUPAK","UAKPT","UATKP","AUTPK","APUKT","UKTPA","PTAKU","APTKU","UAKTP","KAUPT","AKPUT","UKPTA",
"PKUAT","PTKUA","UKPAT","TKPAU","TUAPK","UTPAK","ATUPK","AUTKP","PAUKT","KTAPU","KPAUT","PAKTU","UTAPK","TKPUA",
"KAUTP","TKAPU","UAPKT","PATKU","KUTPA","TUKAP","PUAKT","ATKUP"

        ];

        const gameContainer = document.getElementById('game-container');
        const timerElement = document.getElementById('timer');

        let timeLeft = 120;
        let timerInterval;

        // Luodaan jokaiselle permutaatiolle div-elementti
        const divs = [];
        for (let i = 0; i < permutations.length; i++) {
            const permutation = permutations[i];
            const div = document.createElement('div');
            div.innerText = permutation;
            div.className = 'permutation';
            div.style.top = `${Math.random() * (window.innerHeight - 150)}px`;  // Sijoitellaan satunnaisesti ikkunan sisällä
            div.style.left = `${Math.random() * (window.innerWidth - 150)}px`;
            gameContainer.appendChild(div);
            divs.push(div);
        }

        // Käynnistetään animaatio
        animateDivs();
        startTimer();

        // Käynnistää sanojen animaation
        function animateDivs() {
            divs.forEach((div) => {
                moveDiv(div);
            });
        }

        // Liikuttaa div-elementtiä sattumanvaraisesti
        function moveDiv(div) {
            const containerWidth = window.innerWidth;
            const containerHeight = window.innerHeight;

            const speed = 1 + Math.random() * 2; // Sattumanvarainen nopeus

            const xDirection = Math.random() < 0.5 ? 1 : -1;
            const yDirection = Math.random() < 0.5 ? 1 : -1;

            const x = parseFloat(div.style.left);
            const y = parseFloat(div.style.top);

            const newX = x + speed * xDirection;
            const newY = y + speed * yDirection;

            // Tarkistetaan, ettei div mene ikkunan ulkopuolelle
            if (newX >= 0 && newX <= containerWidth - div.clientWidth) {
                div.style.left = newX + 'px';
            }
            if (newY >= 0 && newY <= containerHeight - div.clientHeight) {
                div.style.top = newY + 'px';
            }

            // Asetetaan seuraava animaatiokeikka
            requestAnimationFrame(() => moveDiv(div));
        }

        // Käynnistää peliajan laskennan
        function startTimer() {
            timerInterval = setInterval(function() {
                timeLeft--;
                timerElement.textContent = 'Aika: ' + timeLeft + ' s';

                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    alert('Aika loppui, hävisit!');
                    location.reload(); // Lataa sivu uudelleen
                }
            }, 1000);
        }

        // Lisätään klikkaustapahtumankäsittelijä
        divs.forEach((div) => {
            div.addEventListener('click', () => {
                if (div.innerText === 'PUTKA') {
                    clearInterval(timerInterval);
                    alert('Voitit!');
                    location.reload(); // Lataa sivu uudelleen
                }
            });
        });
    </script>
</body>
</html>
TapaniS [18.10.2023 09:05:24]

Tämä toimii hienosti! :)
Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.
Kirjautuminen

Haku

Tehtävät

Kilpailu

Keskustelu: Koodit: Klikkaa putkaa

PetriKeckman [17.10.2023 14:38:13]

TapaniS [18.10.2023 09:05:24]

Vastaus
