File size: 4,996 Bytes
07ab608
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic Falling Ball Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <div id="ball" class="ball"></div>
        <div id="platform" class="platform"></div>
        <div id="score">Score: 0</div>
        <div id="level">Level: 1</div>
        <div id="lives">
            <span class="life">♥️</span>
            <span class="life">♥️</span>
            <span class="life">♥️</span>
        </div>
    </div>

    <script>
        let ball = document.getElementById("ball");
        let platform = document.getElementById("platform");
        let score = document.getElementById("score");
        let levelDisplay = document.getElementById("level");
        let livesDisplay = document.getElementById("lives");

        let currentScore = 0;
        let level = 1;
        let platformX = window.innerWidth / 2 - 50;
        platform.style.left = platformX + "px";

        let remainingLives = 3;
        let ballY = -30;
        let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
        let ballSpeed = 3;  // Increased speed
        let isTouching = false;

        // Kontrol menggunakan Mouse
        document.addEventListener("mousemove", (e) => {
            platformX = e.clientX - platform.offsetWidth / 2;
            if (platformX < 0) platformX = 0;
            if (platformX > window.innerWidth - platform.offsetWidth) {
                platformX = window.innerWidth - platform.offsetWidth;
            }
            platform.style.left = platformX + "px";
        });

        // Kontrol menggunakan Sentuhan
        document.addEventListener("touchmove", (e) => {
            if (isTouching) {
                let touchX = e.touches[0].clientX;
                platformX = touchX - platform.offsetWidth / 2;
                if (platformX < 0) platformX = 0;
                if (platformX > window.innerWidth - platform.offsetWidth) {
                    platformX = window.innerWidth - platform.offsetWidth;
                }
                platform.style.left = platformX + "px";
            }
        }, { passive: false });

        document.addEventListener("touchstart", (e) => {
            isTouching = true;
        });

        document.addEventListener("touchend", (e) => {
            isTouching = false;
        });

        let updateLives = () => {
            let hearts = '';
            for (let i = 0; i < remainingLives; i++) {
                hearts += '♥️';
            }
            livesDisplay.innerHTML = hearts;
        };

        let updateBallPosition = () => {
            ballY += ballSpeed;

            // Update ball position directly with JavaScript
            ball.style.top = ballY + "px";
            ball.style.left = ballX + "px";

            let ballRect = ball.getBoundingClientRect();
            let platformRect = platform.getBoundingClientRect();

            if (ballY + 30 >= platformRect.top && ballY + 30 <= platformRect.bottom) {
                if (ballX + 30 >= platformRect.left && ballX <= platformRect.right) {
                    // Ball hits the platform
                    currentScore++;
                    if (currentScore % 10 === 0) {
                        level++;
                        levelDisplay.innerHTML = "Level: " + level;
                        ballSpeed += 0.2;  // Increase ball speed every 10 points
                    }
                    score.innerHTML = "Score: " + currentScore;
                    resetBall();
                }
            } else if (ballY >= window.innerHeight) {
                // Ball missed the platform
                if (remainingLives > 0) {
                    remainingLives--;
                    updateLives();
                    resetBall();
                }

                if (remainingLives <= 0) {
                    alert("Game Over! Your score is: " + currentScore);
                    resetGame();
                }
            }
        };

        let resetBall = () => {
            ballY = -30; // Reset ball to start position
            ballX = Math.floor(Math.random() * (window.innerWidth - 30)); // New random X position
            ball.style.top = ballY + "px";
            ball.style.left = ballX + "px";
        };

        let resetGame = () => {
            remainingLives = 3;
            currentScore = 0;
            level = 1;
            ballSpeed = 3;  // Start with a faster speed
            score.innerHTML = "Score: " + currentScore;
            levelDisplay.innerHTML = "Level: " + level;
            updateLives();
            resetBall();
        };

        let gameLoop = () => {
            updateBallPosition();
            requestAnimationFrame(gameLoop);  // Loop the game
        };

        gameLoop(); // Start the game loop
    </script>
</body>
</html>