H5实现俄罗斯方块(一)
2016-12-10 22:06
288 查看
这几天一直忙于公司的项目,涉及到流程问题,(有时间会写成博客的)。。。一直没有更新。。。为了更加巩固js的基础,自己封装类似于JQuery的操作库来对dom进行操作。一:前度页面的绘制。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>俄罗斯方块</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="start-container"> <p><button id="btn-start">开始游戏</button></p> <p><button id="btn-setting">设置</button></p> </div> <div class="game-container"> <div class="timer-panel"> <div class="panel-header"> 使用时间 </div> <div class="panel-body"> <canvas id="timer"></canvas> </div> </div> <div class="help-panel"> <div class="panel-body"> <p>↑ 翻转方块</p> <p>↓ 加速下落</p> <p>→ 向右移动</p> <p>← 向左移动</p> </div> </div> <div class="level-panel"> <div class="panel-header"> 当前级别 </div> <div class="panel-body"> <canvas id="level"></canvas> </div> </div> <div class="game-main-panel"> <canvas id="c_game_main"></canvas> </div> <div class="next-panel"> <div class="panel-header"> 下一方块 </div> <div class="panel-body"> <canvas id="nextshape"></canvas> </div> </div> <div class="setting-panel"> <div class="panel-body"> <button id="btn-game-pause">暂停</button><br><br><button id="btn-game-setting">设置</button> </div> </div> <div class="score-panel"> <div class="panel-header"> 当前得分 </div> <div class="panel-body"> <canvas id="score"></canvas> </div> </div> <div class="high-score-panel"> <div class="panel-header"> 最高得分 </div> <div class="panel-body"> <canvas id="highscore"></canvas> </div> </div> </div> <div class="modal-dialog"> <div class="modal-body"> <label for="ck-sound">启用声音</label> <input type="checkbox" id="ck-sound"> <br> <br> <button id="btn-dialog-close">关闭</button> </div> </div> <script src="vendor/howler.min.js"></script> <script src="js/config.js"></script> <script src="js/ResourceManager.js"></script> <script src="js/Canvas.js"></script> <script src="js/Keyboard.js"></script> <script src="js/Score.js"></script> <script src="js/Timer.js"></script> <script src="js/Level.js"></script> <script src="js/NextShape.js"></script> <script src="js/HighScore.js"></script> <script src="js/Block.js"></script> <script src="js/Shape.js"></script> <script src="js/Board.js"></script> <script src="js/Tetris.js"></script> <script src="js/app.js"></script> </body> </html>对应的css样式:
*{ box-sizing: border-box; } html,body,div{ margin: 0; padding: 0; } body{ background: #000; color: #fff; } .game-container, .start-container{ position: relative; box-sizing: content-box; height: 600px; width: 590px; margin: 0 auto; margin-top: 50px; border: 1px solid green; } .game-container{ display: none; } .start-container{ background: url(../images/bg_start.png); background-size: cover; width: 390px; padding-top: 280px; box-sizing: border-box; } .start-container p{ text-align: center; margin-top: 40px; } .start-container p button{ width: 200px; height: 50px; line-height: 50px; font-size: 20px; font-family: 微软雅黑; border: 0; border-radius: 50%; outline: none; cursor: pointer; background: lightblue; } .start-container p button:hover{ background: lightcoral; } .game-main-panel{ position: absolute; left: 100px; top: 0; width: 390px; height: 600px; border-left: 1px solid green; border-right: 1px solid green; } .timer-panel{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .help-panel{ position: absolute; top: 150px; left: 0; width: 100px; } .level-panel{ position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; } .next-panel{ position: absolute; right: 0; top: 0; width: 100px; height: 100px; } .setting-panel{ position: absolute; top: 150px; right: 0; width: 100px; } .score-panel{ position: absolute; right: 0; bottom: 120px; width: 100px; height: 100px; } .high-score-panel{ position: absolute; right: 0; bottom: 0; width: 100px; height: 100px; } .panel-header{ height: 30px; line-height: 30px; padding-left: 5px; font-size: 18px; color:#fff; background: lightsalmon; } .panel-body{ text-align: center; line-height: 70px; } .help-panel .panel-body, .setting-panel .panel-body{ line-height: normal; } .timer-panel, .next-panel, .score-panel{ border-bottom: 1px solid green; } .modal-dialog{ display: none; } .modal-dialog .modal-body{ position: fixed; height: 300px; width: 390px; top: 50%; margin-top: -150px; left: 50%; margin-left: -195px; background: #000; z-index: 100; text-align: center; } .modal-dialog::after{ content: ''; position: fixed; top:0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.3); }
相关文章推荐
- H5实现俄罗斯方块(二)
- H5实现俄罗斯方块(四)
- 通过俄罗斯方块浅谈游戏中的AI(三)AI实现代码框架
- 俄罗斯方块的接口实现
- [原创]MFC实现的俄罗斯方块
- 全位运算实现的俄罗斯方块-J2SE版
- canvas标签应用 简单俄罗斯方块游戏的实现
- 神舟1号stm32上实现俄罗斯方块
- 纯js实现俄罗斯方块[效率待优化]
- 关于C语言俄罗斯方块的基本实现!
- 俄罗斯方块的实现(有 源代码) 推荐
- 俄罗斯方块的简单实现
- 一个简单的俄罗斯方块的Win32 API实现
- JavaScript版俄罗斯方块Easy Tetris实现原理
- JavaScript版俄罗斯方块Easy Tetris实现原理
- MFC 实现 俄罗斯方块
- 第一次真正意义上的用VC++实现的一个完整的Win32程序-俄罗斯方块
- 大二时实现的俄罗斯方块
- 学习C#从俄罗斯方块开始(二)俄罗斯方块的规则和算法的简单实现
- XMOVE3.0手持终端——软件介绍(三):在2KB内存的单片机上实现的的俄罗斯方块 (原创)