<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>俄罗斯方块_横向</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div align="center">
<div id="board"></div>
</div>
<div id="box_console">
<div id="box_level">
<span>等级:</span>
<span id="cur_lv">0</span>
</div>
<table id="score" align="center">
<tr>
<td>当前分数:</td>
<td id="cur_sco">0</td>
</tr>
<tr>
<td>已消列数:</td>
<td id="cnt_row">0</td>
</tr>
<tr>
<td>砖块数:</td>
<td id="cnt_brk">0</td>
</tr>
<tr>
<td>最高分:</td>
<td id="max_sco">0</td>
</tr>
<tr>
<td>平均分:</td>
<td id="avg_sco">0.00</td>
</tr>
</table>
<div id="box_set_shadow">
<input type="checkbox" id="check_shadow"/>显示影子(<u>H</u>)
</div>
<div align="center">
<button id="btn">开 始</button>
</div>
</div>
<div id="box_hint">
<div id="hint_title">下个形状:</div>
<div id="hint_screen">
<div id="div_hint"></div>
</div>
<div class="Btn_container">
<button onclick="showHelp();">帮 助</button>
</div>
</div>
<div id="msgBox_container" style="display: none;"></div>
<script type="text/javascript" src="js/horizontal_tetris.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
使用 HTML + CSS + JS 实现横向的俄罗斯方块游戏,解压后在浏览器里打开 index.html 文件即可运行。 对于学习前端的同学们来说,俄罗斯方块是一个很好的练习项目。为了方便阅读,我在代码中添加了注释。为了提高对不同浏览器的兼容性,本项目没有使用 canvas 控件,而是采用 div 元素实现。 与普通的俄罗斯方块不同的是,横向俄罗斯方块的砖块从左侧开始运动,使用上下方向键调整位置,使用向左的方向键旋转砖块,使用向右的方向键加速下落。有问题可以点击页面右侧的"帮助"按钮,或者按键盘的 F1 键。 砖块包括 C形,T形,Z形,L形,1x1正方形,2x2正方形,4x1长方形,其中,1x1 的砖块是为了降低难度而存在的,如果不需要则可以去掉。
资源推荐
资源详情
资源评论
收起资源包目录
俄罗斯方块_横向.zip (3个子文件)
horizontal_Tetris
js
horizontal_tetris.js 23KB
css
style.css 1KB
index.html 1KB
共 3 条
- 1
资源评论
Cat_贰龄依旧
- 粉丝: 3
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功