初始提交:网页版俄罗斯方块游戏

- 使用 HTML + CSS + JavaScript 实现
- 实现完整的游戏逻辑:方块移动、旋转、消行、计分
- 支持等级系统和加速机制
- 响应式设计,支持移动端
- 下一个方块预览功能
- 游戏暂停/继续功能
This commit is contained in:
OpenClaw Xiami
2026-02-28 15:56:49 +00:00
commit 867611ab45
3 changed files with 626 additions and 0 deletions

60
index.html Normal file
View File

@@ -0,0 +1,60 @@
<!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>