俄罗斯方块如何用html5编辑
1、1打开HBuilder,点击文件+新建，输入项目名，点击完成
2、 index.html文件，首先导入css和js文件，以下是部分主页代码：
<div id="tetris">
<div id="info">
<div id="next_shape">asdfasdf</div>
<p id="level">Level: <span></span>
<p id="lines">Lines: <span></span>
<p id="score">Score: <span></span>
<p id="time">Time: <span></span>
</div>
<div id="canvas"></div>
</div>
<script type="text/javascript" src="tetris.js"></script>
<p style="color:red;font-size:18px;font-weight:bold">方向键进行移动和翻转
<div style="text-align:center;clear:both;">
3、编辑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、编辑index.js文件，以下是部分代码：
if(!Array.prototype.eachdo){
Array.prototype.eachdo = function(fn){
for (var i=0; i < this.length; i++){
fn.call(this[i], 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[i] === this[j]){ bool = false;}
}
if(bool === true){temp.push(this[i]);}
}
return temp;
}
}
5、5需要的代码，现在我们都写完了，把页面切换到index.html上点击工具栏上的运行，选择一种浏览器，就可以查看效果了
6、6测试正常，让我们来愉快的玩耍吧，如果需要完整代码，请留下联系方式，小编会把完整代码送上
