46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>2048</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>2048</h1>
|
|
</div>
|
|
|
|
<div class="score-container">
|
|
<div class="score-box">
|
|
<div class="score-label">Score</div>
|
|
<div class="score-value" id="score">0</div>
|
|
</div>
|
|
<div class="score-box">
|
|
<div class="score-label">High</div>
|
|
<div class="score-value" id="high">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" id="newGameBtn">New Game</button>
|
|
<button class="btn" id="undoBtn">Undo</button>
|
|
</div>
|
|
|
|
<div class="game-board" id="gameBoard"></div>
|
|
|
|
<div class="instructions">
|
|
<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>
|
|
</html> |