867611ab45
- 使用 HTML + CSS + JavaScript 实现 - 实现完整的游戏逻辑：方块移动、旋转、消行、计分 - 支持等级系统和加速机制 - 响应式设计，支持移动端 - 下一个方块预览功能 - 游戏暂停/继续功能
61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<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">
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<div class="header">
|
|
<h1>🎮 俄罗斯方块</h1>
|
|
</div>
|
|
|
|
<div class="game-area">
|
|
<div class="info-panel">
|
|
<div class="info-box">
|
|
<h3>分数</h3>
|
|
<div id="score" class="info-value">0</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<h3>等级</h3>
|
|
<div id="level" class="info-value">1</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<h3>消除行数</h3>
|
|
<div id="lines" class="info-value">0</div>
|
|
</div>
|
|
<div class="info-box">
|
|
<h3>下一个</h3>
|
|
<canvas id="next-canvas" width="100" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-container">
|
|
<canvas id="game-canvas" width="300" height="600"></canvas>
|
|
<div id="game-over" class="game-over hidden">
|
|
<h2>游戏结束</h2>
|
|
<p>最终分数: <span id="final-score">0</span></p>
|
|
<button id="restart-btn" class="btn">重新开始</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-panel">
|
|
<h3>操作说明</h3>
|
|
<ul>
|
|
<li>← → 左右移动</li>
|
|
<li>↑ 旋转</li>
|
|
<li>↓ 加速下落</li>
|
|
<li>空格 直接落下</li>
|
|
<li>P 暂停/继续</li>
|
|
</ul>
|
|
<button id="start-btn" class="btn">开始游戏</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|