2025-03-25 15:22:55 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2025-03-25 15:57:27 -04:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
<meta name="mobile-web-app-capable" content="yes">
|
2025-03-25 15:22:55 -04:00
|
|
|
<title>3D Tetris</title>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="stars"></div>
|
|
|
|
|
<div class="twinkling"></div>
|
|
|
|
|
|
|
|
|
|
<h1 class="game-title">3D TETRIS</h1>
|
|
|
|
|
|
|
|
|
|
<div class="game-container">
|
|
|
|
|
<div class="score-container">
|
2025-03-25 16:58:54 -04:00
|
|
|
<div id="next-piece-preview">
|
|
|
|
|
<h3>Next</h3>
|
|
|
|
|
<canvas id="next-piece" width="120" height="120"></canvas>
|
|
|
|
|
</div>
|
2025-03-25 15:22:55 -04:00
|
|
|
<p>Score: <span id="score">0</span></p>
|
|
|
|
|
<p>Level: <span id="level">1</span></p>
|
|
|
|
|
<p>Lines: <span id="lines">0</span></p>
|
|
|
|
|
<button id="start-btn" class="game-btn">New Game</button>
|
|
|
|
|
<button id="pause-btn" class="game-btn">Pause</button>
|
|
|
|
|
<button id="shadow-btn" class="game-btn">Toggle Shadow</button>
|
|
|
|
|
<button id="options-btn" class="game-btn">Options</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="game-wrapper">
|
|
|
|
|
<canvas id="tetris" width="320" height="640"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="controls-info">
|
|
|
|
|
<h3>Keyboard Controls</h3>
|
|
|
|
|
<p><span class="key">A</span> / <span class="key">←</span> Move Left</p>
|
|
|
|
|
<p><span class="key">D</span> / <span class="key">→</span> Move Right</p>
|
|
|
|
|
<p><span class="key">S</span> / <span class="key">↓</span> Move Down</p>
|
2025-03-25 19:19:23 -04:00
|
|
|
<p><span class="key">↑</span> / <span class="key">Space</span> Hard Drop</p>
|
2025-03-25 15:22:55 -04:00
|
|
|
<p><span class="key">Q</span> Rotate Left</p>
|
|
|
|
|
<p><span class="key">E</span> Rotate Right</p>
|
|
|
|
|
<p><span class="key">W</span> Horizontal 3D</p>
|
|
|
|
|
<p><span class="key">X</span> Vertical 3D</p>
|
|
|
|
|
<p><span class="key">P</span> Pause Game</p>
|
|
|
|
|
<p><span class="key">H</span> Toggle Shadow</p>
|
|
|
|
|
|
|
|
|
|
<h3 class="mt-4">Controller</h3>
|
|
|
|
|
<div id="controller-status" class="controller-indicator disconnected">
|
|
|
|
|
No Controller Detected
|
|
|
|
|
</div>
|
|
|
|
|
<div id="controller-mapping" class="mt-2">
|
|
|
|
|
<p><span class="ctrl">D-Pad ←/→</span> Move Left/Right</p>
|
|
|
|
|
<p><span class="ctrl">D-Pad ↓</span> Move Down</p>
|
2025-03-25 19:19:23 -04:00
|
|
|
<p><span class="ctrl">D-Pad ↑</span> Hard Drop</p>
|
2025-03-25 15:22:55 -04:00
|
|
|
<p><span class="ctrl">A</span> Rotate Left</p>
|
|
|
|
|
<p><span class="ctrl">B</span> Rotate Right</p>
|
|
|
|
|
<p><span class="ctrl">Y</span> Horizontal 3D</p>
|
|
|
|
|
<p><span class="ctrl">X</span> Vertical 3D</p>
|
|
|
|
|
<p><span class="ctrl">Start</span> Pause Game</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Audio elements for game sounds -->
|
|
|
|
|
<audio id="move-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-video-game-retro-click-237.mp3" preload="auto"></audio>
|
|
|
|
|
<audio id="rotate-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-mechanical-bling-210.mp3" preload="auto"></audio>
|
|
|
|
|
<audio id="drop-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-retro-jumping-223.mp3" preload="auto"></audio>
|
|
|
|
|
|
|
|
|
|
<!-- Game Over Modal -->
|
|
|
|
|
<div id="game-over-modal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<h2>GAME OVER</h2>
|
|
|
|
|
<p>Your Score: <span id="final-score">0</span></p>
|
|
|
|
|
<button id="play-again-btn" class="game-btn">Play Again</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Options Modal -->
|
|
|
|
|
<div id="options-modal" class="modal">
|
|
|
|
|
<div class="modal-content">
|
2025-03-25 18:11:57 -04:00
|
|
|
<h2>Game Options</h2>
|
|
|
|
|
|
2025-03-25 15:22:55 -04:00
|
|
|
<div class="option-row">
|
2025-03-25 18:11:57 -04:00
|
|
|
<label for="toggle-3d-effects">Enable 3D Effects</label>
|
|
|
|
|
<input type="checkbox" id="toggle-3d-effects" checked>
|
2025-03-25 15:22:55 -04:00
|
|
|
</div>
|
2025-03-25 18:11:57 -04:00
|
|
|
|
2025-03-25 15:22:55 -04:00
|
|
|
<div class="option-row">
|
2025-03-25 18:11:57 -04:00
|
|
|
<label for="toggle-spin-animations">Enable Spin Animations</label>
|
|
|
|
|
<input type="checkbox" id="toggle-spin-animations" checked>
|
2025-03-25 15:22:55 -04:00
|
|
|
</div>
|
2025-03-25 18:11:57 -04:00
|
|
|
|
2025-03-25 15:22:55 -04:00
|
|
|
<div class="option-row">
|
2025-03-25 18:11:57 -04:00
|
|
|
<label for="animation-speed">Animation Speed</label>
|
|
|
|
|
<input type="range" id="animation-speed" min="0.01" max="0.1" step="0.01" value="0.05">
|
2025-03-25 15:22:55 -04:00
|
|
|
</div>
|
2025-03-25 18:11:57 -04:00
|
|
|
|
|
|
|
|
<div class="option-row mobile-only">
|
|
|
|
|
<label for="toggle-mobile-controls">Force Mobile Controls</label>
|
|
|
|
|
<input type="checkbox" id="toggle-mobile-controls">
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-03-25 15:57:27 -04:00
|
|
|
<div class="option-row">
|
2025-03-25 18:11:57 -04:00
|
|
|
<label for="toggle-mobile-performance">Performance Mode</label>
|
|
|
|
|
<input type="checkbox" id="toggle-mobile-performance">
|
|
|
|
|
<span class="tooltip">Reduces visual effects for better performance on mobile devices</span>
|
2025-03-25 15:57:27 -04:00
|
|
|
</div>
|
2025-03-25 18:11:57 -04:00
|
|
|
|
2025-03-25 23:16:19 -04:00
|
|
|
<div class="option-row">
|
|
|
|
|
<label for="starting-level">Starting Level</label>
|
|
|
|
|
<select id="starting-level">
|
|
|
|
|
<option value="1">Level 1</option>
|
|
|
|
|
<option value="2">Level 2</option>
|
|
|
|
|
<option value="3">Level 3</option>
|
|
|
|
|
<option value="4">Level 4</option>
|
|
|
|
|
<option value="5">Level 5</option>
|
|
|
|
|
<option value="6">Level 6</option>
|
|
|
|
|
<option value="7">Level 7</option>
|
|
|
|
|
<option value="8">Level 8</option>
|
|
|
|
|
<option value="9">Level 9</option>
|
|
|
|
|
<option value="10">Level 10</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="button-row">
|
|
|
|
|
<button id="options-apply-btn" class="game-btn">Apply</button>
|
|
|
|
|
<button id="options-close-btn" class="game-btn">Close</button>
|
|
|
|
|
</div>
|
2025-03-25 15:22:55 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="script.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
