"Spread the Plague"

html Code

    &html lang="en"&
    &head&
        &meta charset="UTF-8" /&
        &meta name="viewport" content="width=device-width, initial-scale=1.0" /&
        &link rel="icon" type="image/svg+xml" href="favicon.svg" /&

        &title& spread the plague! &/title&
    &style&
    *{
        box-sizing: boder-box;
        padding: 0;
        margin: 0;
    }
    h1{
        margin:50px;
        font-size:3.5em;
    }
    h2{
        margin:50px;
        font-size:1.7em;
    }
    h1, h2, h3{
        text-align:center;
    }
    button{
        padding: 10px 30px;
        cursor: pointer;
    }

    html, body{
        background: #f9e79f;
        height: 100%;
        height:100vw;
        width:100vw;
        margin:0 auto;
        justify-content: center;
        align-items: center;
    }
    canvas{
        cursor: url("data:image/svg+xml;utf8,🐀") 16 0,auto;
    }
    &/style&
    &/head&
&header&
    &h1&  Spread the Plague! &/h1&
    &h2&Beiße jeden Käsekrümel an bevor es zu spät ist!&/h2&
    &style& /*hätte auch in js und css*/
     
        canvas { /*käseteller*/
            border: 5px solid #f2ba38;
            background:#f2ba38;
            display: block;
            margin: 20px auto;
        }
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border: 2px solid black;
            text-align: center;
        }
        
        #popup img { /*bildchen für popup*/
            width: 150px; /* bildgröße anpassen */
            height: auto;
            margin-top: 20px;
        }
    &/style&
&/header&
&body&
    &canvas id="gameCanvas" width="500" height="500"&/&canvas&
    &div id="popup"&
        &p&Willst du mehr Käse?&/p&
        &img id="popupImage" src="" alt="" /&
        &button onclick="generateCheese()"&JA BITTE!&/button&
    &/div&
 
    &script&
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const popup = document.getElementById('popup');
        const popupImage = document.getElementById('popupImage');
        let cheeseCount = 5;
        let timer;
        let timeLeft = 5; //sekunden
        let cheesePositions = []; // array für käsekrümel position - speichert position

        function drawCheese(x, y) {
            ctx.fillStyle = '#ffd663';
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, Math.PI * 2);
            ctx.fill();
            cheesePositions.push({ x, y });
        }
        
        function startTimer() {
            timeLeft = 8;
            const timerElement = document.createElement('div');
            timerElement.id = 'timer';
            timerElement.style.position = 'absolute';
            timerElement.style.top = '10px';
            timerElement.style.right = '10px';
            timerElement.style.backgroundColor = '#ffc72b';
            timerElement.style.border = '2px solid black';
            timerElement.style.padding = '15px 30px';

            document.body.appendChild(timerElement);

            timer = setInterval(() => {
                timeLeft--;
                timerElement.textContent = `Zeit:${timeLeft}s`;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    if (cheeseCount > 0) {
                        endGame(false);
                    }
                    document.body.removeChild(timerElement);
                }
            }, 1000);
        }

        function generateCheese() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            cheeseCount = 7;
            cheesePositions = [];
            for (let i = 0; i < cheeseCount; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                drawCheese(x, y);
            }
            popup.style.display = 'none';
            startTimer();
        }

        canvas.addEventListener('click', (event) => {
            const rect = canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

            for (let i = 0; i < cheesePositions.length; i++) { 
                const cheese = cheesePositions[i];
                const distance = Math.sqrt(Math.pow(mouseX - cheese.x, 2) + Math.pow(mouseY - cheese.y, 2));
                if (distance <= 20) {
                    ctx.clearRect(cheese.x - 20, cheese.y - 20, 40, 40);
                    cheesePositions.splice(i, 1);
                    cheeseCount--;
                    if (cheeseCount === 0) {
                        endGame(true);
                    }
                    break;
                }
            }
        });

        function endGame(won) {
            clearInterval(timer);
            popup.style.display = 'block';
            popup.querySelector('p').textContent = won
                ? "Jeder Käse wurde angebissen! Mehr Käse?"
                : "Zeit abgelaufen! Du bist verhungert! Neuer Versuch?";

            if (won) {
                popupImage.src = "https://i.pinimg.com/736x/c4/3a/5b/c43a5b2295d3b95753230a76aeedcf13b.jpg";
            } else {
                popupImage.src = "https://i.pinimg.com/736x/de/f1/a3/def1a341afcb1a2818168e6a69b8d53b.jpg";
            }
        }

        generateCheese();
    &/script&
    &h3&&/h3&
&/body&
&/html&