JavaScript学习之自定义对象--小游戏别踩白块儿

js代码：

<script type="text/javascript">
            var sum = 0;
            var Box;
            var Fk;
            //创建一个div标签名为obox
            var obox = document.createElement("div");
            //自定义函数造地图
            function box() {
                this.creatbox = function() {
                    var ospan = document.getElementById("ospan");
                    ospan.innerHTML = "分数：0"
                    var obox = document.createElement("div");
                    obox.className = "box1";
                    obox.style.width = 368 + "px";
                    obox.style.height = 510 + "px";
                    obox.style.margin = "0 auto";
                    obox.style.backgroundColor = "pink";
                    //obox.style.border="1px soild black";
                    document.body.appendChild(obox);
                };
            };
            //自定义函数造方块相关属性
            function fk() {
                this.width = 90;
                this.height = 100;
                //this.border = "1px soild black";
                this.backcolor = "white";
                this.lineHeight1="100px";
                this.color="white";
                this.txt="center";
                this.fontsize1="28px";
                this.float = "left";
                this._fk = [
                    [null, null, null, null],
                    [null, null, null, null],
                    [null, null, null, null],
                    [null, null, null, null],
                    [null, null, null, null]
                ];
                //造方块
                this.creatfk = function() {
                    for(var i = 0; i < this._fk.length; i++) {
                    var num = Math.floor(Math.random() * 4);
                        for(var j = 0; j < this._fk[i].length; j++) {
                            if(this._fk[i][j] == null) {
                                this._fk[i][j] = document.createElement("div");
                                this._fk[i][j].className = "xfk";
                                this._fk[i][j].style.width = this.width + "px";
                                this._fk[i][j].style.height = this.height + "px";
                                this._fk[i][j].style.color=this.color;
                                this._fk[i][j].style.textAlign=this.txt;
                                this._fk[i][j].style.fontSize=this.fontsize1;
                                this._fk[i][j].style.backgroundColor = this.backcolor;
                                this._fk[i][j].style.lineHeight=this.lineHeight1;
                                this._fk[i][j].style.float = this.float;
                                if(j == num) {
                                    this._fk[i][j].style.backgroundColor = "black";
                                } else {
                                    this._fk[i][j].style.backgroundColor = "white";
                                };
                            };
                            document.getElementsByClassName("box1")[0].appendChild(this._fk[i][j]);
                        };
                    };
                this._fk[4][num].innerHTML="开始";
                };
                //点击事件
                this.clickinfo = function() {
                    for(var i = 0; i < 4; i++) {
                        this._fk[4][i].onclick = function() {
                            sum += 100;
                            var ospan = document.getElementById("ospan");
                            ospan.innerHTML = "分数：" + sum;
                            if(this.style.backgroundColor == "black") {
                                //alert(1)
                                Fk.move();
                            } else {
                                alert("你失败了！")
                            };
                        };
                    };
                };
                //方块移动
                this.move = function() {
                    for(var j = 4; j > 0; j--) {
                        for(var k = 0; k < 4; k++) {
                            if(this._fk[j][k].innerHTML!=""){
                                this._fk[j][k].innerHTML="";
                            }
                            this._fk[j][k].style.backgroundColor = this._fk[j - 1][k].style.backgroundColor;
                        };
                    };
                    var num = Math.floor(Math.random() * 4);
                    var ran_num = Math.floor(Math.random() * 4);
                    for(var i = 0; i < 4; i++) {
                        if(i == ran_num) {
                            this._fk[0][i].style.backgroundColor = "black";
                        } else {
                            this._fk[0][i].style.backgroundColor = "white";
                        };
                    };
//                  this.creatfk();
//                  this.clickinfo();
                };
            };
            //当窗体加载完成之后执行下列函数
            window.onload = function() {
                Box = new box();
                Box.creatbox();
                Fk = new fk();
                Fk.creatfk();
                Fk.clickinfo();
            };
        </script>

css代码：

      .box1 {
                border: 1px solid black;
            }

            .xfk {
                border: 1px solid black;
            }

            #ospan {
                margin: 0 auto;
                display: block;
                width: 100px;
                height: 40px;
            }

html代码：

<span id="ospan"></span>