订阅俄罗斯方块如何用html5编辑
来源：网络收集 点击： 时间：2024-04-301打开HBuilder,点击文件+新建，输入项目名，点击完成
2/6index.html文件，首先导入css和js文件，以下是部分主页代码：
div id=tetris
div id=info
div id=next_shapeasdfasdf/div
p id=levelLevel: span/span/p
p id=linesLines: span/span/p
p id=scoreScore: span/span/p
p id=timeTime: span/span/p
/div
div id=canvas/div
/div
script type=text/javascript src=tetris.js/script
p style=color:red;font-size:18px;font-weight:bold方向键进行移动和翻转/p
div style=text-align:center;clear:both;
3/6编辑style.css样式文件，以下是部分详细代码：
body {
overflow: hidden;
background: #d7d7d7;
}
#tetris {
width: 360px;
border: 1px solid black;
padding: 20px;
}
#canvas {
width: 200px;
height: 440px;
background-color: #000;
position: relative;
color: #fff;
}
#canvas h1 {
margin: 0;
padding: 0;
text-align: center;
font-size: 30px;
padding-top: 200px;
}
.piece {
border: 1px solid white;
position: absolute;
}
.square {
position: absolute;
width: 19px;
height: 19px;
border: 1px solid white;
}
.type0 { background-color: #A000F0;}
.type1 { background-color: #00F0F0;}
.type2 { background-color: #F0A000;}
.type3 { background-color: #0000F0;}
.type4 { background-color: #00F000;}
.type5 { background-color: #F00000;}
.type6 { background-color: #F0F000;}
#next_shape {
position: relative;
background-color: #000;
border: 1px solid white;
width: 110px;
height: 110px;
}
#info {
background-color: #000;
color: #fff;
float: right;
width: 110px;
height: 420px;
padding: 10px;}
4/6编辑index.js文件，以下是部分代码：
if(!Array.prototype.eachdo){
Array.prototype.eachdo = function(fn){
for (var i=0; i this.length; i++){
fn.call(this, i);
}
};
}
if(!Array.prototype.remDup){
Array.prototype.remDup = function(){
var temp = ;
for(var i =0; i this.length; i++){
var bool = true;
for (var j = i+1; j this.length; j++){
if(this === this){ bool = false;}
}
if(bool === true){temp.push(this);}
}
return temp;
}
}
5/65需要的代码，现在我们都写完了，把页面切换到index.html上点击工具栏上的运行，选择一种浏览器，就可以查看效果了
6/66测试正常，让我们来愉快的玩耍吧，如果需要完整代码，请留下联系方式，小编会把完整代码送上
俄罗斯方块用HTML5编辑 版权声明：
1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。
2、本站仅提供信息发布平台，不承担相关法律责任。
3、若侵犯您的版权或隐私，请联系本站管理员删除。
4、文章链接：http://www.1haoku.cn/art_632182.html
