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>