初始提交:网页版俄罗斯方块游戏
- 使用 HTML + CSS + JavaScript 实现 - 实现完整的游戏逻辑:方块移动、旋转、消行、计分 - 支持等级系统和加速机制 - 响应式设计,支持移动端 - 下一个方块预览功能 - 游戏暂停/继续功能
This commit is contained in:
60
index.html
Normal file
60
index.html
Normal 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>
|
||||
Reference in New Issue
Block a user