5803025055/Kelompok-7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
5803025011 2025-11-16 21:08:42 -05:00
commit 24936cd800
1 changed files with 206 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
a.html Normal file
View File

@ -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>