html iigra block – Edu Plus

```html
<!DOCTYPE html>
<html lang="bs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UhvatI Kvadrat</title>

<style>
    body{
        margin:0;
        font-family:Arial, sans-serif;
        background:#1e293b;
        color:white;
        text-align:center;
    }

    h1{
        margin-top:20px;
    }

    #game{
        width:600px;
        height:400px;
        background:white;
        margin:20px auto;
        position:relative;
        border-radius:15px;
        overflow:hidden;
        border:5px solid #0f172a;
    }

    #box{
        width:60px;
        height:60px;
        background:red;
        position:absolute;
        top:100px;
        left:100px;
        border-radius:10px;
        cursor:pointer;
        transition:0.1s;
    }

    #score{
        font-size:24px;
        font-weight:bold;
    }

    button{
        padding:10px 20px;
        font-size:18px;
        border:none;
        border-radius:10px;
        cursor:pointer;
        background:#22c55e;
        color:white;
    }

    button:hover{
        background:#16a34a;
    }
</style>
</head>
<body>

<h1>🎮 Uhvati Kvadrat!</h1>

<div id="score">Poeni: 0</div>

<button onclick="startGame()">Pokreni Igru</button>

<div id="game">
    <div id="box"></div>
</div>

<script>
    let score = 0;
    let gameStarted = false;

    const box = document.getElementById("box");
    const scoreText = document.getElementById("score");
    const game = document.getElementById("game");

    function randomPosition() {
        const maxX = game.clientWidth - box.clientWidth;
        const maxY = game.clientHeight - box.clientHeight;

        const randomX = Math.floor(Math.random() * maxX);
        const randomY = Math.floor(Math.random() * maxY);

        box.style.left = randomX + "px";
        box.style.top = randomY + "px";
    }

    box.addEventListener("click", () => {
        if(gameStarted){
            score++;
            scoreText.innerText = "Poeni: " + score;

            randomPosition();

            const randomColor =
                "#" + Math.floor(Math.random()*16777215).toString(16);

            box.style.background = randomColor;
        }
    });

    function startGame(){
        score = 0;
        gameStarted = true;
        scoreText.innerText = "Poeni: 0";

        randomPosition();

        setTimeout(() => {
            gameStarted = false;
            alert("⏰ Kraj igre! Osvojio si " + score + " poena!");
        }, 20000);
    }
</script>

</body>
</html>
```
Leave a Comment Cancel Reply
