盖房子优化3

来源：互联网发布：linux修改root密码编辑：程序博客网时间：2024/04/28 06:59

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<styletype="text/css">

.wrap{

width:800px;

height:500px;

border:1px solid black;

margin:0 auto;

position:relative;

overflow:hidden;

}

.row{

position:absolute;

bottom:0;

left:0;

}

.row>div{

width:20px;

height:20px;

border:1px solid deeppink;

background-color: mediumspringgreen;

float:left;

box-sizing:border-box;

}

.row>div.remove{

transform: translate(0,100px) rotate(360deg);

transition:all 3s;

opacity:0;

}

#score{

color: deepskyblue;

font-size:50px;

text-align: center;

}

</style>

</head>

<body>

<scripttype="text/javascript">

varwrap = document.querySelector(".wrap");

var scoreDiv = document.getElementById("score")

varbottom = 0;// 用于定位新生成的row的bottom值

vartime = 300;

varboxNum = 20;// 定义一个变量，保存方格数

functioncreateRow() {

// 使用js创建row和20个小div

varrow = document.createElement("div");

row.className = "row";

row.style.bottom= bottom + "px";

// 设置row的left值，应该是上一个row的offseLeft

// 找到新创建的row的上一行

varpreRow = wrap.lastElementChild;

if(preRow) {

row.style.left= preRow.offsetLeft + "px";

} else {

row.style.left= "0px";

}

row.style.width= 20 * boxNum + "px";

// 创建20个小方格

for(var i = 0; i< boxNum; i++) {

varbox = document.createElement("div");

row.appendChild(box);

}

// 将row添加为wrap的孩子节点

wrap.appendChild(row);

// 碰壁动画

varspeed = 20;

//做动画，过去的碰壁反弹

row.timer= setInterval(function() {

varmaxWidth = wrap.clientWidth - row.offsetWidth;

row.style.left= row.offsetLeft + speed + "px";

//碰壁判断

if(row.offsetLeft >= maxWidth) {

speed*= -1;

} else if (row.offsetLeft <= 0) {

speed*= -1;

}

}, time);

// 返回新创建row节点

return row;

}

// 调用createRow()函数，页面一加载，就有一行并且有动画了

createRow();

wrap.onclick= function() {

// 计分

scoreDiv.innerHTML= Number(scoreDiv.innerHTML) + 1;

// 高度的特殊处理

if(bottom>= 200){

bottom-= 20;

// 获取每一行的top+20

for(var h = 0; h< wrap.children.length; h++) {

wrap.children[h].style.top= wrap.children[h].offsetTop + 20 + "px";

}

// 点击后动画变快

time-= 20;

// 时间不能减成负值

if(time <= 50) {

time= 50;

}

// bottom每次增加20

bottom+= 20;

//获取当前停止的一行和上一行，计算offsetLeft差值

varstopRow = wrap.lastElementChild;

varqianyigeRow = stopRow.previousSibling;// 或者previouselementSibling

varleftCha = 0;

// 判断至少有两行，才做减法

if(qianyigeRow) {

leftCha= qianyigeRow.offsetLeft - stopRow.offsetLeft;

}

// 需要删除的方格数

varremoveNum = Math.abs(leftCha / 20);

// 更新新的方格数

boxNum-= removeNum;

if(boxNum <= 0) {

alert("Game Over!");

// 停止定时器

clearInterval(stopRow.timer);

}

// 删除后面小方格

if(leftCha < 0) {

// 设置要删除的小块的类为remove，用于动画效果

for(var i = 0; i< removeNum; i++) {

varbox = stopRow.children[(stopRow.children.length - 1) - i];

box.className= "remove";

}

setTimeout(function() {

for(var j = 0; j< removeNum; j++) {

stopRow.removeChild(stopRow.lastElementChild);

}

},1000);

}else if(leftCha> 0){

// 从前面删除小方格

// 为了动画处理

for(vara = 0; a < removeNum; a++){

stopRow.children[a].className= "remove";

}

// 从前面删除小方格

setTimeout(function(){

// 处理下新的style.left值

stopRow.style.left= stopRow.offsetLeft + 20* removeNum + "px";

for(var b = 0; b< removeNum; b++) {

stopRow.removeChild(stopRow.firstElementChild);

}

},1000);

}

// 每点击一次，就创建新的row

varnewRow = createRow();

// 让前一个row停止计时器，找到新添加的row的上一个兄弟节点

clearInterval(newRow.previousSibling.timer);//或者previouselementSibling

}

</script>

</body>

</html>

0 0