Update index.html

index.html

@@ -11,16 +11,30 @@
         <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>
+
+    <!-- Adding sound effects -->
+    <audio id="bounce-sound" src="bounce-sound.mp3" preload="auto"></audio>
+    <audio id="game-over-sound" src="game-over.mp3" preload="auto"></audio>
+
     <script>
         let ball = document.getElementById("ball");
         let platform = document.getElementById("platform");
         let score = document.getElementById("score");
-        let currentScore = 0;
+        let levelDisplay = document.getElementById("level");
+        let bounceSound = document.getElementById("bounce-sound");
+        let gameOverSound = document.getElementById("game-over-sound");
 
+        let currentScore = 0;
+        let level = 1;
+        let fallSpeed = 3;  // Initial fall speed (seconds)
         let platformX = window.innerWidth / 2 - 50;
         platform.style.left = platformX + "px";
 
+        let isTouching = false;
+
+        // Kontrol menggunakan Mouse
         document.addEventListener("mousemove", (e) => {
             platformX = e.clientX - platform.offsetWidth / 2;
             if (platformX < 0) platformX = 0;
@@ -30,10 +44,31 @@
             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 dropBall = () => {
             let ballX = Math.floor(Math.random() * (window.innerWidth - 30));
             ball.style.left = ballX + "px";
-            ball.style.animation = "fall 3s linear infinite";
+            ball.style.animation = `fall ${fallSpeed}s linear infinite`;
         };
 
         ball.addEventListener("animationiteration", () => {
@@ -43,12 +78,23 @@
             if (ballPosition.bottom >= platformPosition.top &&
                 ballPosition.left >= platformPosition.left &&
                 ballPosition.right <= platformPosition.right) {
+                bounceSound.play();  // Play bounce sound
                 currentScore++;
+                if (currentScore % 10 === 0) {
+                    level++;
+                    levelDisplay.innerHTML = "Level: " + level;
+                    fallSpeed -= 0.2;
+                    dropBall(); // Drop ball again with updated speed
+                }
                 score.innerHTML = "Score: " + currentScore;
                 dropBall();
             } else if (ballPosition.bottom >= window.innerHeight) {
+                gameOverSound.play();  // Play game over sound
                 currentScore = 0;
+                level = 1;
+                fallSpeed = 3;  // Reset fall speed
                 score.innerHTML = "Score: " + currentScore;
+                levelDisplay.innerHTML = "Level: " + level;
                 dropBall();
             }
         });