66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tetris</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="main.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<div class="info-panel">
|
|
<div class="info-section">
|
|
<h3>Hold</h3>
|
|
<canvas id="holdCanvas" class="hold-canvas" width="80" height="80"></canvas>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h3>Next</h3>
|
|
<canvas id="nextCanvas" class="next-canvas" width="80" height="320"></canvas>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<div class="score-info">
|
|
<div>Score<br><span id="score">0</span></div>
|
|
<div>Level<br><span id="level">1</span></div>
|
|
<div>Lines<br><span id="lines">0</span></div>
|
|
<div>Goal<br><span id="goal">5</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status">
|
|
<div>Status: <span id="connectionStatus" class="connection-status">Connecting...</span></div>
|
|
<div>Game: <span id="gameStatus">Not Started</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-game">
|
|
<canvas id="gameCanvas" width="300" height="600"></canvas>
|
|
|
|
<div class="controls">
|
|
<button onclick="startGame()">Start Game</button>
|
|
<button onclick="location.reload()">Refresh</button>
|
|
|
|
<h3>Controls</h3>
|
|
<p>← → Move</p>
|
|
<p>↓ Soft Drop</p>
|
|
<p>Space Hard Drop</p>
|
|
<p>Z Rotate Left</p>
|
|
<p>X Rotate Right</p>
|
|
<p>C Hold</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gameOver" class="game-over" style="display: none;">
|
|
<h2>Game Over</h2>
|
|
<p>Final Score: <span id="finalScore">0</span></p>
|
|
<p>Level Reached: <span id="finalLevel">1</span></p>
|
|
<p>Lines Cleared: <span id="finalLines">0</span></p>
|
|
<button onclick="startGame()">Play Again</button>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |