Upload files to "/"

2025-11-16 21:08:42 -05:00 · 2025-11-16 21:08:42 -05:00 · 24936cd800
commit 24936cd800
1 changed files with 206 additions and 0 deletions
--- a/a.html
+++ b/a.html
@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Rhythm Game</title>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<style>
+    body {
+        margin: 0;
+        
+        overflow: hidden;
+        background-color: #111;
+    }
+
+    #game-area {
+        position: relative;
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        
+    }
+
+
+
+    
+    .tap-area {
+        position: absolute;
+        bottom: 40px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        gap : 10px;
+        z-index: 1;
+    }
+
+    .tap-item {
+        width: 100px;
+        height: 100px;
+        border-radius: 12px;
+        background-color: #333;
+        box-shadow: 0 0 10px rgba(255,255,255,0.2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        color: white;
+        transition: 0.1s;
+    }
+
+    .active {
+        transform: scale(0.9);
+        background-color: gold;
+        box-shadow: 0 0 20px gold;
+    }
+
+    .score-area{
+        color :white;
+        position: fixed;
+        top: 50px;
+        left:50px;
+        font-size: 24px;
+    }
+
+    .line {
+        display:flex;
+
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+        height: 100%;
+
+    }
+
+    .line>div{
+        position: relative;
+        width: 100px;
+        height: 100%;
+    }
+
+    #line1 {
+        width: 100px;
+        height: 100%;
+        background-color: darkblue;
+    }
+
+    #line2 {
+        width: 100px;
+        height: 100%;
+        background-color: darkgreen;
+    }
+
+    #line3 {
+        width: 100px;
+        height: 100%;
+        background-color: darkred;
+    }
+
+    #line4 {
+        width: 100px;
+        height: 100%;
+        background-color: purple;
+    }
+    
+    .note {
+        position: absolute;
+        width: 100px;
+        height: 10px;
+        background-color: yellow;
+        top: 0;
+        z-index: 2;
+    }
+
+    .deadzone{
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100px;
+        height: 40px;
+        background-color: red;
+    }
+</style>
+</head>
+<body>
+
+<div id="game-area">
+    <div class ="score-area">Score : 0</div>
+    <div class="line">
+        <div id="line1"><div class="deadzone"></div></div>
+        <div id="line2"><div class="deadzone"></div></div>
+        <div id="line3"><div class="deadzone"></div></div>
+        <div id="line4"><div class="deadzone"></div></div>
+    </div>
+
+    <div class="tap-area">
+        <div class="tap-item" data-key="s">S</div>
+        <div class="tap-item" data-key="d">D</div>
+        <div class="tap-item" data-key="j">J</div>
+        <div class="tap-item" data-key="k">K</div>
+    </div>
+
+    
+</div>
+
+<script>
+    $(document).ready(function() {
+        let score = 0
+
+        
+
+        $(document).on("keydown", function(e) {
+            const key = e.key.toLowerCase();
+            const $item = $(`.tap-item[data-key="${key}"]`);
+            if (!$item.length) return;
+
+            $item.addClass("active");
+
+            let laneIndex = $(".tap-item").index($item); // 0 = S, 1 = D, 2 = J, 3 = K
+            let $lane = $(".line").children().eq(laneIndex);
+
+            // Cari note yang paling bawah di lane itu
+            let $notes = $lane.find(".note");
+            if ($notes.length === 0) return;
+
+            let $closest = $notes.last(); // note terbawah
+            let noteTop = parseInt($closest.css("top"));
+
+            // Jika note dekat area tap (misalnya > 80%)
+            if (noteTop > window.innerHeight * 0.75) {
+                score+=10;
+                $(".score-area").text("Score : " + score);
+                $closest.remove(); // hapus note
+            }
+            
+            });
+
+        $(document).on("keyup", function(e) {
+            const key = e.key.toLowerCase();
+            const $item = $(`.tap-item[data-key="${key}"]`);
+            if ($item.length) {
+                $item.removeClass("active");
+            }
+        });
+
+        
+        function spawnNote(lane, delay, fall) {
+                setTimeout(function() {
+                    let $newNote = $("<div>", { class: "note" });
+                    $(lane).append($newNote);
+                    $newNote.css("top", "0px")
+                    $newNote.animate({ top: "98%" }, fall);
+                }, delay);
+            }
+        spawnNote("#line1", 0, 3000);      
+        spawnNote("#line2", 800, 3000);    
+        spawnNote("#line3", 1600, 3000);   
+        spawnNote("#line4", 2400, 3000);
+
+        }); 
+        
+</script>
+
+</body>
+</html>