Upload files to "/"

game.js

@@ -0,0 +1,65 @@
+const player = document.getElementById("player");
+const block = document.getElementById("block");
+const scoreText = document.getElementById("scoreText");
+
+let score = 0;
+let playerX = 180;
+
+// KECEPATAN (DIUBAH)
+let speed = 1;             
+let speedIncrease = 0.6;   
+let maxSpeed = 12;         
+
+document.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft" && playerX > 0) {
+        playerX -= 20;
+    }
+    if (e.key === "ArrowRight" && playerX < 360) {
+        playerX += 20;
+    }
+    player.style.left = playerX + "px";
+});
+
+function moveBlock() {
+    let blockY = -40;
+    let blockX = Math.floor(Math.random() * 360);
+    block.style.left = blockX + "px";
+
+    let fall = setInterval(() => {
+        blockY += speed;
+        block.style.top = blockY + "px";
+
+        // TABRAKAN
+        if (
+            blockY > 450 &&
+            blockX < playerX + 40 &&
+            blockX + 40 > playerX
+        ) {
+            alert("Game Over! Score: " + score);
+            score = 0;
+            speed = 1; // reset ke pelan (DIUBAH)
+            scoreText.textContent = "Score: 0";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+        // BLOCK LOLOS
+        if (blockY > 500) {
+            score++;
+            scoreText.textContent = "Score: " + score;
+
+            // NAIK BERTAHAP (TERASA)
+            if (speed < maxSpeed) {
+                speed += speedIncrease;
+            }
+
+            blockY = -40;
+            block.style.top = "-40px";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+    }, 16); // DIUBAH: lebih smooth (60 FPS)
+}
+
+moveBlock();

style.css

@@ -0,0 +1,196 @@
+/* ============================
+   GLOBAL STYLE
+============================ */
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #1b1b1b, #2a2a2a);
+    color: #f5f5f5;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+/* ============================
+   AUTH BOX (Login / Register)
+============================ */
+.box {
+    background: #1f1f1f;
+    margin: 100px auto;
+    width: 350px;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0px 0px 20px rgba(0, 150, 255, 0.2);
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+.box h2 {
+    margin-bottom: 20px;
+    color: #00aaff;
+    letter-spacing: 1px;
+}
+
+input, button {
+    padding: 12px;
+    margin: 8px 0;
+    width: 90%;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    font-size: 15px;
+}
+
+input {
+    background: #2e2e2e;
+    color: white;
+}
+
+button {
+    background: #007bff;
+    color: white;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+button:hover {
+    background: #005fcc;
+    transform: scale(1.03);
+}
+
+/* ============================
+   GAME AREA
+============================ */
+#gameArea {
+    width: 400px;
+    height: 500px;
+    background: #111;
+    border-radius: 15px;
+    margin: 30px auto;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid #00aaff;
+    box-shadow: 0px 0px 25px rgba(0, 170, 255, 0.4);
+    animation: fadeIn 0.8s;
+}
+
+/* Player */
+#player {
+    width: 40px;
+    height: 40px;
+    background: cyan;
+    position: absolute;
+    bottom: 10px;
+    left: 180px;
+    border-radius: 8px;
+}
+
+
+/* Falling Block */
+#block {
+    width: 45px;
+    height: 45px;
+    background: linear-gradient(135deg, #ff4d4d, #ff0000);
+    border-radius: 10px;
+    position: absolute;
+    top: -50px;
+    left: 180px;
+    box-shadow: 0 0 12px rgba(255, 50, 50, 0.8);
+}
+
+/* ============================
+   TOP BAR (Game Page)
+============================ */
+.top-bar {
+    margin-top: 20px;
+    background: #1f1f1f;
+    width: 100%;
+    padding: 15px 0;
+    color: #00d0ff;
+    font-size: 18px;
+    box-shadow: 0 3px 15px rgba(0, 150, 255, 0.2);
+}
+
+.top-bar a {
+    color: #ff5252;
+    margin-left: 15px;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+.top-bar a:hover {
+    color: #ff7777;
+}
+
+/* ================= POPUP GAME OVER ================= */
+#gameOverPopup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup-box {
+    background: #1e1e1e;
+    padding: 30px;
+    width: 300px;
+    text-align: center;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.5);
+    animation: popIn 0.25s ease-out;
+}
+
+.popup-box h2 {
+    margin-bottom: 10px;
+}
+
+.popup-box button {
+    width: 130px;
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin: 5px;
+}
+
+#btnRestart {
+    background: #0aa4ff;
+    color: white;
+}
+
+#btnMenu {
+    background: #00d37e;
+    color: white;
+}
+#btnMenu:hover {
+    background: #00b86b;
+}
+
+@keyframes popIn {
+    from { transform: scale(0.6); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+/* ============================
+   SCORE TEXT
+============================ */
+#scoreText {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 10px;
+    color: #00eaff;
+    text-shadow: 0px 0px 10px rgba(0, 200, 255, 0.7);
+}
+
+/* ============================
+   ANIMATIONS
+============================ */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}