多语言展示
当前在线:523今日阅读:168今日分享:49

俄罗斯方块如何用html5编辑

俄罗斯方块如何用html5编辑?下面让我来简单介绍一下单纯使用html5+jquery+css的做法
工具/原料
1

电脑或手机

2

HBuilder

方法/步骤
1

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

2

index.html文件,首先导入css和js文件,以下是部分主页代码:

           
               
asdfasdf
               

Level:

               

Lines:

               

Score:

               

Time:

           
           
       
       

方向键进行移动和翻转

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测试正常,让我们来愉快的玩耍吧,如果需要完整代码,请留下联系方式,小编会把完整代码送上