gen-browser-games/game-01.html at main · vreyespue/gen-browser-games · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click the Fruit Game</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        #game-container {
            position: relative;
            width: 90vw; /* Adjusted for mobile view */
            height: 90vw; /* Adjusted for mobile view */
            max-width: 400px;
            max-height: 400px;
            border: 2px solid black;
            margin: 20px auto;
        }
        #box {
            width: 12.5vw; /* Adjusted for mobile view */
            height: 12.5vw; /* Adjusted for mobile view */
            max-width: 50px;
            max-height: 50px;
            position: absolute;
            cursor: pointer;
            background-position: center;
            background-repeat: no-repeat;
        }
        #coolspot {
            position: relative;
            margin: 20px auto;
            width: 250px;
            height: 250px;
            background-image: url('img/coolspot_b.png');
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h1>Click the Fruit!</h1>
    <p>Score: <span id="score">0</span></p>
    <p>Time Left: <span id="time">30</span>s</p>
    <div id="game-container">
        <div id="box"></div>
    </div>
    <div id="coolspot"></div>
    <script>
        let score = 0;
        let timeLeft = 30;
        const scoreDisplay = document.getElementById("score");
        const timeDisplay = document.getElementById("time");
        const box = document.getElementById("box");
        const gameContainer = document.getElementById("game-container");

        const images = [
            'img/banana.png',
            'img/apple.png',
            'img/cherry.png',
            'img/pear.png',
            'img/pineapple.png',
            'img/strawberry.png'
        ];

        function moveBox() {
            const maxX = gameContainer.clientWidth - box.clientWidth;
            const maxY = gameContainer.clientHeight - box.clientHeight;
            const randomX = Math.floor(Math.random() * maxX);
            const randomY = Math.floor(Math.random() * maxY);
            const randomImage = images[Math.floor(Math.random() * images.length)];
            box.style.left = `${randomX}px`;
            box.style.top = `${randomY}px`;
            box.style.backgroundImage = `url(${randomImage})`;
            box.style.backgroundSize = 'contain';
        }

        box.addEventListener("click", () => {
            if (timeLeft > 0) {
                score++;
                scoreDisplay.textContent = score;
                moveBox();
            }
        });

        const timer = setInterval(() => {
            timeLeft--;
            timeDisplay.textContent = timeLeft;
            if (timeLeft <= 0) {
                clearInterval(timer);
                alert(`Game Over! Your score: ${score}`);
            }
        }, 1000);

        moveBox();
    </script>
</body>
</html>