Compare commits
No commits in common. "b7db68222c45fdf2c9a648918dbfacdef9ced6e2" and "bd4e739839324e52895f1628fa32cd2f31c98f36" have entirely different histories.
b7db68222c
...
bd4e739839
491
2048.html
491
2048.html
@ -1,383 +1,238 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<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>2048</title>
|
||||||
<link rel="stylesheet" href="2048.css" />
|
<link rel="stylesheet" href="2048.css">
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap"
|
</head>
|
||||||
rel="stylesheet"
|
<body>
|
||||||
/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Background Effects -->
|
<!-- Background Effects -->
|
||||||
<div class="particles" aria-hidden="true"></div>
|
<div class="particles" aria-hidden="true"></div>
|
||||||
<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 CONTROL - KIRI ATAS -->
|
<!-- SOUND CONTROL - KIRI ATAS -->
|
||||||
<div class="sound-control-container">
|
<div class="sound-control-container">
|
||||||
<!-- Main Sound Button -->
|
<!-- Main Sound Button -->
|
||||||
<button
|
<button class="icon-btn btn-sound-main" id="btn-sound-main" title="Sound Settings">
|
||||||
class="icon-btn btn-sound-main"
|
|
||||||
id="btn-sound-main"
|
|
||||||
title="Sound Settings"
|
|
||||||
>
|
|
||||||
<!-- Icon Full Sound (all ON) -->
|
<!-- Icon Full Sound (all ON) -->
|
||||||
<svg
|
<svg class="sound-full" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
class="sound-full"
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
viewBox="0 0 24 24"
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"/>
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
>
|
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
||||||
<path
|
|
||||||
d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
<!-- Icon Medium Sound (some muted) -->
|
<!-- Icon Medium Sound (some muted) -->
|
||||||
<svg
|
<svg class="sound-medium" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
class="sound-medium"
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
viewBox="0 0 24 24"
|
<path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
||||||
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
|
|
||||||
</svg>
|
</svg>
|
||||||
<!-- Icon Low Sound (mostly muted) -->
|
<!-- Icon Low Sound (mostly muted) -->
|
||||||
<svg
|
<svg class="sound-low" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
class="sound-low"
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
||||||
</svg>
|
</svg>
|
||||||
<!-- Icon Muted (all OFF) -->
|
<!-- Icon Muted (all OFF) -->
|
||||||
<svg
|
<svg class="sound-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="display: none;">
|
||||||
class="sound-muted"
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
|
||||||
viewBox="0 0 24 24"
|
<line x1="23" y1="9" x2="17" y2="15"/>
|
||||||
fill="none"
|
<line x1="17" y1="9" x2="23" y2="15"/>
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
|
|
||||||
<line x1="23" y1="9" x2="17" y2="15" />
|
|
||||||
<line x1="17" y1="9" x2="23" y2="15" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Volume Sliders Panel (Hidden by default) -->
|
<!-- Volume Sliders Panel (Hidden by default) -->
|
||||||
<div class="volume-panel" id="volume-panel" style="display: none">
|
<div class="volume-panel" id="volume-panel" style="display: none;">
|
||||||
<!-- Music Volume -->
|
<!-- Music Volume -->
|
||||||
<div class="volume-item">
|
<div class="volume-item">
|
||||||
<div class="volume-header">
|
<div class="volume-header">
|
||||||
<svg
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
class="volume-icon"
|
<path d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"/>
|
||||||
viewBox="0 0 24 24"
|
</svg>
|
||||||
fill="none"
|
<span class="volume-label">Music</span>
|
||||||
stroke="currentColor"
|
<span class="volume-value" id="vol-music-display">25%</span>
|
||||||
stroke-width="2"
|
</div>
|
||||||
>
|
<input type="range" class="volume-slider" id="vol-music" min="0" max="100" value="25">
|
||||||
<path
|
|
||||||
d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="volume-label">Music</span>
|
|
||||||
<span class="volume-value" id="vol-music-display">25%</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
class="volume-slider"
|
|
||||||
id="vol-music"
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
value="25"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pop SFX Volume -->
|
<!-- Pop SFX Volume -->
|
||||||
<div class="volume-item">
|
<div class="volume-item">
|
||||||
<div class="volume-header">
|
<div class="volume-header">
|
||||||
<svg
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
class="volume-icon"
|
<circle cx="12" cy="12" r="10"/>
|
||||||
viewBox="0 0 24 24"
|
<path d="M8 12h8M12 8v8"/>
|
||||||
fill="none"
|
</svg>
|
||||||
stroke="currentColor"
|
<span class="volume-label">Pop SFX</span>
|
||||||
stroke-width="2"
|
<span class="volume-value" id="vol-pop-display">90%</span>
|
||||||
>
|
</div>
|
||||||
<circle cx="12" cy="12" r="10" />
|
<input type="range" class="volume-slider" id="vol-pop" min="0" max="100" value="90">
|
||||||
<path d="M8 12h8M12 8v8" />
|
|
||||||
</svg>
|
|
||||||
<span class="volume-label">Pop SFX</span>
|
|
||||||
<span class="volume-value" id="vol-pop-display">90%</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
class="volume-slider"
|
|
||||||
id="vol-pop"
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
value="90"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Merge SFX Volume -->
|
<!-- Merge SFX Volume -->
|
||||||
<div class="volume-item">
|
<div class="volume-item">
|
||||||
<div class="volume-header">
|
<div class="volume-header">
|
||||||
<svg
|
<svg class="volume-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
class="volume-icon"
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||||||
viewBox="0 0 24 24"
|
</svg>
|
||||||
fill="none"
|
<span class="volume-label">Merge SFX</span>
|
||||||
stroke="currentColor"
|
<span class="volume-value" id="vol-merge-display">100%</span>
|
||||||
stroke-width="2"
|
</div>
|
||||||
>
|
<input type="range" class="volume-slider" id="vol-merge" min="0" max="100" value="100">
|
||||||
<path
|
|
||||||
d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span class="volume-label">Merge SFX</span>
|
|
||||||
<span class="volume-value" id="vol-merge-display">100%</span>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
class="volume-slider"
|
|
||||||
id="vol-merge"
|
|
||||||
min="0"
|
|
||||||
max="100"
|
|
||||||
value="100"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Top Right Controls -->
|
<!-- Top Right Controls -->
|
||||||
<div class="top-controls">
|
<div class="top-controls">
|
||||||
<button
|
<button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
|
||||||
class="icon-btn btn-tutorial"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
id="btn-tutorial"
|
<circle cx="12" cy="12" r="10"/>
|
||||||
title="How to Play"
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
||||||
>
|
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||||
<svg
|
</svg>
|
||||||
viewBox="0 0 24 24"
|
</button>
|
||||||
fill="none"
|
<button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game">
|
||||||
stroke="currentColor"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
stroke-width="2.5"
|
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
||||||
>
|
</svg>
|
||||||
<circle cx="12" cy="12" r="10" />
|
</button>
|
||||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
|
||||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="icon-btn btn-restart-icon"
|
|
||||||
id="btn-restart"
|
|
||||||
title="Restart Game"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Game Container -->
|
<!-- Game Container -->
|
||||||
<div class="game-container">
|
<div class="game-container">
|
||||||
<!-- Header: Title + Scores -->
|
<!-- Header: Title + Scores -->
|
||||||
<div class="game-header">
|
<div class="game-header">
|
||||||
<h1>2048</h1>
|
<h1>2048</h1>
|
||||||
<div class="score-container">
|
<div class="score-container">
|
||||||
<div class="score-box">
|
<div class="score-box">
|
||||||
<div class="score-label">SCORE</div>
|
<div class="score-label">SCORE</div>
|
||||||
<div class="score-value" id="score">0</div>
|
<div class="score-value" id="score">0</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="score-box">
|
<div class="score-box">
|
||||||
<div class="score-label">HIGH SCORE</div>
|
<div class="score-label">HIGH SCORE</div>
|
||||||
<div class="score-value" id="best-score">0</div>
|
<div class="score-value" id="best-score">0</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Game Board -->
|
<!-- Game Board -->
|
||||||
<div id="board"></div>
|
<div id="board"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tutorial Modal -->
|
<!-- Tutorial Modal -->
|
||||||
<div class="tutorial-overlay" id="tutorial-overlay" style="display: none">
|
<div class="tutorial-overlay" id="tutorial-overlay" style="display: none;">
|
||||||
<div class="tutorial-modal">
|
<div class="tutorial-modal">
|
||||||
<button class="modal-close" id="close-tutorial">
|
<button class="modal-close" id="close-tutorial">
|
||||||
<svg
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
viewBox="0 0 24 24"
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
fill="none"
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
stroke="currentColor"
|
</svg>
|
||||||
stroke-width="2.5"
|
</button>
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18" />
|
<h2 class="tutorial-title">How to Play</h2>
|
||||||
<line x1="6" y1="6" x2="18" y2="18" />
|
|
||||||
</svg>
|
<div class="tutorial-content">
|
||||||
</button>
|
<!-- PC Controls - Hidden on Mobile -->
|
||||||
|
<div class="tutorial-section pc-controls">
|
||||||
<h2 class="tutorial-title">How to Play</h2>
|
<h3>🖥️ PC Controls</h3>
|
||||||
|
<div class="keys-container">
|
||||||
<div class="tutorial-content">
|
<!-- WASD Keys -->
|
||||||
<!-- PC Controls - Hidden on Mobile -->
|
<div class="keys-group">
|
||||||
<div class="tutorial-section pc-controls">
|
<div class="keys-grid-wasd">
|
||||||
<h3>🖥️ PC Controls</h3>
|
<div class="key-empty"></div>
|
||||||
<div class="keys-container">
|
<div class="key-box">W</div>
|
||||||
<!-- WASD Keys -->
|
<div class="key-empty"></div>
|
||||||
<div class="keys-group">
|
<div class="key-box">A</div>
|
||||||
<div class="keys-grid-wasd">
|
<div class="key-box">S</div>
|
||||||
<div class="key-empty"></div>
|
<div class="key-box">D</div>
|
||||||
<div class="key-box">W</div>
|
</div>
|
||||||
<div class="key-empty"></div>
|
<p class="keys-label">WASD</p>
|
||||||
<div class="key-box">A</div>
|
</div>
|
||||||
<div class="key-box">S</div>
|
|
||||||
<div class="key-box">D</div>
|
<div class="keys-separator">or</div>
|
||||||
|
|
||||||
|
<!-- Arrow Keys -->
|
||||||
|
<div class="keys-group">
|
||||||
|
<div class="keys-grid-arrow">
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">↑</div>
|
||||||
|
<div class="key-empty"></div>
|
||||||
|
<div class="key-box">←</div>
|
||||||
|
<div class="key-box">↓</div>
|
||||||
|
<div class="key-box">→</div>
|
||||||
|
</div>
|
||||||
|
<p class="keys-label">Arrow Keys</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="keys-label">WASD</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="keys-separator">or</div>
|
<!-- Mobile Controls - Hidden on PC -->
|
||||||
|
<div class="tutorial-section mobile-controls">
|
||||||
<!-- Arrow Keys -->
|
<h3>📱 Mobile Controls</h3>
|
||||||
<div class="keys-group">
|
<div class="swipe-demo">
|
||||||
<div class="keys-grid-arrow">
|
<div class="swipe-icon">👆</div>
|
||||||
<div class="key-empty"></div>
|
<p>Swipe in any direction</p>
|
||||||
<div class="key-box">↑</div>
|
</div>
|
||||||
<div class="key-empty"></div>
|
|
||||||
<div class="key-box">←</div>
|
|
||||||
<div class="key-box">↓</div>
|
|
||||||
<div class="key-box">→</div>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="keys-label">Arrow Keys</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Controls - Hidden on PC -->
|
<div class="tutorial-section">
|
||||||
<div class="tutorial-section mobile-controls">
|
<h3>🎯 Objective</h3>
|
||||||
<h3>📱 Mobile Controls</h3>
|
<p class="objective-text">Combine tiles with the same numbers to reach <strong>2048</strong>!</p>
|
||||||
<div class="swipe-demo">
|
</div>
|
||||||
<div class="swipe-icon">👆</div>
|
|
||||||
<p>Swipe in any direction</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tutorial-section">
|
|
||||||
<h3>🎯 Objective</h3>
|
|
||||||
<p class="objective-text">
|
|
||||||
Combine tiles with the same numbers to reach
|
|
||||||
<strong>2048</strong>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Game Over Modal -->
|
<!-- Game Over Modal -->
|
||||||
<div class="game-over-overlay" id="game-over-overlay" style="display: none">
|
<div class="game-over-overlay" id="game-over-overlay" style="display: none;">
|
||||||
<div class="game-over-modal">
|
<div class="game-over-modal">
|
||||||
<!-- Close Button (X) -->
|
<!-- Close Button (X) -->
|
||||||
<button class="game-over-close" id="game-over-close">
|
<button class="game-over-close" id="game-over-close">
|
||||||
<svg
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||||||
viewBox="0 0 24 24"
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
fill="none"
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
stroke="currentColor"
|
</svg>
|
||||||
stroke-width="2.5"
|
|
||||||
>
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18" />
|
|
||||||
<line x1="6" y1="6" x2="18" y2="18" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="game-over-title">No More Moves!</div>
|
<div class="game-over-title">No More Moves!</div>
|
||||||
<div class="game-over-subtitle">Game Over</div>
|
<div class="game-over-subtitle">Game Over</div>
|
||||||
|
|
||||||
<!-- Score Section -->
|
<!-- Score Section -->
|
||||||
<div class="game-over-score">
|
<div class="game-over-score">
|
||||||
<div class="game-over-score-label">Your Score</div>
|
<div class="game-over-score-label">Your Score</div>
|
||||||
<div class="game-over-score-value" id="final-score">0</div>
|
<div class="game-over-score-value" id="final-score">0</div>
|
||||||
|
|
||||||
<!-- New High Score Badge - show if new record -->
|
<!-- New High Score Badge - show if new record -->
|
||||||
<div
|
<div class="new-high-score" id="new-high-score-badge" style="display: none;">
|
||||||
class="new-high-score"
|
New High Score
|
||||||
id="new-high-score-badge"
|
</div>
|
||||||
style="display: none"
|
|
||||||
>
|
<!-- Best Score Display - show if NOT new record -->
|
||||||
New High Score
|
<div class="best-score-display" id="best-score-display" style="display: none;">
|
||||||
</div>
|
<div class="best-score-label">High Score</div>
|
||||||
|
<div class="best-score-value" id="modal-best-score">0</div>
|
||||||
<!-- Best Score Display - show if NOT new record -->
|
</div>
|
||||||
<div
|
|
||||||
class="best-score-display"
|
|
||||||
id="best-score-display"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
<div class="best-score-label">High Score</div>
|
|
||||||
<div class="best-score-value" id="modal-best-score">0</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Action Buttons - ICON ONLY -->
|
<!-- Action Buttons - ICON ONLY -->
|
||||||
<div class="game-over-buttons">
|
<div class="game-over-buttons">
|
||||||
<!-- Restart Button -->
|
<!-- Restart Button -->
|
||||||
<button
|
<button class="btn-game-icon btn-restart-game" id="btn-play-again" title="Restart Game">
|
||||||
class="btn-game-icon btn-restart-game"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
id="btn-play-again"
|
<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
|
||||||
title="Restart Game"
|
</svg>
|
||||||
>
|
</button>
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
<!-- Home Button -->
|
||||||
fill="none"
|
<button class="btn-game-icon btn-home-game" id="btn-home" title="Back to Home">
|
||||||
stroke="currentColor"
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
stroke-width="2.5"
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||||
stroke-linecap="round"
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||||
stroke-linejoin="round"
|
</svg>
|
||||||
>
|
</button>
|
||||||
<path
|
|
||||||
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Home Button -->
|
|
||||||
<button
|
|
||||||
class="btn-game-icon btn-home-game"
|
|
||||||
id="btn-home"
|
|
||||||
title="Back to Home"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
||||||
<polyline points="9 22 9 12 15 12 15 22" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="Score_Request.js"></script>
|
</div>
|
||||||
<script src="2048.js"></script>
|
<script src="2048.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
13
2048.js
13
2048.js
@ -591,16 +591,6 @@ function goHome() {
|
|||||||
------------------------ */
|
------------------------ */
|
||||||
function showGameOver() {
|
function showGameOver() {
|
||||||
const finalScore = currentScore;
|
const finalScore = currentScore;
|
||||||
|
|
||||||
// --- TAMBAHKAN BAGIAN INI (MULAI) ---
|
|
||||||
// Mengecek apakah fungsi saveScore ada (dari file Score_Request.js)
|
|
||||||
if (typeof saveScore === 'function') {
|
|
||||||
console.log("Mengirim skor ke database:", finalScore); // Debugging
|
|
||||||
saveScore(finalScore);
|
|
||||||
} else {
|
|
||||||
console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
|
|
||||||
}
|
|
||||||
|
|
||||||
const isNewHighScore = finalScore >= bestScore && finalScore > 0;
|
const isNewHighScore = finalScore >= bestScore && finalScore > 0;
|
||||||
|
|
||||||
const finalScoreEl = document.getElementById('final-score');
|
const finalScoreEl = document.getElementById('final-score');
|
||||||
@ -982,4 +972,5 @@ function getTileColor(value) {
|
|||||||
2048: '#ffd700'
|
2048: '#ffd700'
|
||||||
};
|
};
|
||||||
return colors[value] || '#00eaff';
|
return colors[value] || '#00eaff';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
CREATE DATABASE IF NOT EXISTS web;
|
CREATE DATABASE IF NOT EXISTS game_2048;
|
||||||
USE web;
|
USE game_2048;
|
||||||
|
|
||||||
CREATE TABLE IF NOT EXISTS users (
|
CREATE TABLE IF NOT EXISTS users (
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
header('Content-Type: application/json');
|
header('Content-Type: application/json');
|
||||||
require 'Connection.php';
|
require 'Koneksi.php';
|
||||||
|
|
||||||
$query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
|
$query = "SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 10";
|
||||||
$result = $conn->query($query);
|
$result = $conn->query($query);
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
function saveScore(score) {
|
function saveScore(score) {
|
||||||
fetch('Score.php', {
|
fetch('Save_Score.php', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/x-www-form-urlencoded'
|
'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user