H5实现俄罗斯方块（一）

H5实现俄罗斯方块（一）

这几天一直忙于公司的项目，涉及到流程问题，（有时间会写成博客的）。。。一直没有更新。。。

为了更加巩固js的基础，自己封装类似于JQuery的操作库来对dom进行操作。

一：前度页面的绘制。

对应的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);}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。