2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage

Browse Source
This commit is contained in:
Jevinca Marvella 2025-12-01 10:12:19 +07:00
parent 7b532af758
commit 0b4ca95aa8
5 changed files with 613 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
2048.html
View File

@ -15,7 +15,6 @@
<div class="starfield" aria-hidden="true"></div> <div class="starfield" aria-hidden="true"></div>
<div class="cursor-light" aria-hidden="true"></div> <div class="cursor-light" aria-hidden="true"></div>
<!-- SOUND CONTROLS - KIRI ATAS -->
<!-- SOUND CONTROL - KIRI ATAS --> <!-- SOUND CONTROL - KIRI ATAS -->
<div class="sound-control-container"> <div class="sound-control-container">
<!-- Main Sound Button --> <!-- Main Sound Button -->

2
2048.js
View File

@ -14,7 +14,7 @@ let mergesInCurrentMove = 0;
Audio Setup Audio Setup
------------------------ */ ------------------------ */
const audio = { const audio = {
bg: new Audio("Bgmusic.mp3"), bg: new Audio("Background_Music.mp3"),
pop: new Audio("Pop.mp3"), pop: new Audio("Pop.mp3"),
merge: new Audio("Merge.mp3") merge: new Audio("Merge.mp3")
}; };

0
Bgmusic.mp3 → Background_Music.mp3
View File

839
Homepage.css
View File

File diff suppressed because it is too large Load Diff

50
Homepage.html
View File

@ -3,44 +3,32 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title> <title>Homepage - 2048</title>
<link rel="stylesheet" href="Homepage.css">
</head> </head>
<body> <body>
<div class="container"> <!-- Neon Particles Background -->
<div class="header"> <div id="particles"></div>
<h1>2048</h1>
</div>
<div class="score-container"> <!-- Header -->
<div class="score-box"> <header>
<div class="score-label">Score</div> <div class="logo">2048</div>
<div class="score-value" id="score">0</div> <div class="nav-buttons">
</div> <a href="Login.html" class="btn btn-secondary">Login</a>
<div class="score-box">
<div class="score-label">High</div>
<div class="score-value" id="high">0</div>
</div>
</div> </div>
</header>
<div class="controls"> <!-- Hero Section -->
<button class="btn" id="newGameBtn">New Game</button> <section class="hero">
<button class="btn" id="undoBtn">Undo</button> <div class="hero-title">2048</div>
<p class="hero-subtitle">Join the tiles, reach 2048</p>
<div class="cta-buttons">
<a href="2048.html" class="btn btn-cta btn-play">Play</a>
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
</div> </div>
</section>
<div class="game-board" id="gameBoard"></div>
<div class="instructions"> <script src="Animation_Homepage.js"></script>
<h3>How to Play</h3>
<p>Use arrow keys (↑ ↓ ← →) or swipe to move tiles. When two tiles with the same number touch, they merge into one! Join the numbers to reach the <strong>2048 tile</strong>!</p>
</div>
</div>
<div class="game-over" id="gameOver">
<div class="game-over-content">
<h2 id="gameOverTitle">Game Over!</h2>
<p id="gameOverMessage">Your score: <span id="finalScore">0</span></p>
<button class="btn" id="tryAgainBtn">Try Again</button>
</div>
</div>
</body> </body>
</html> </html>