俄罗斯方块如何用html5编辑

1、1打开HBuilder,点击文件+新建，输入项目名，点击完成

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;}

5、5需要的代码，现在我们都写完了，把页面切换到index.html上点击工具栏上的运行，选择一种浏览器，就可以查看效果了