盖房子优化3

Vivian_shuang

于 2016-07-13 08:38:27 发布

阅读量339

点赞数

分类专栏： JavaScript 文章标签：盖房子 js

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51894452

版权

JavaScript 专栏收录该内容

171 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

.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>

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

var scoreDiv = document.getElementById("score")

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

var time = 300;

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

function createRow() {

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

var row = document.createElement("div");

row.className = "row";

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

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

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

var preRow = 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++) {

var box = document.createElement("div");

row.appendChild(box);

}

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

wrap.appendChild(row);

// 碰壁动画

var speed = 20;

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

row.timer = setInterval(function() {

var maxWidth = 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差值

var stopRow = wrap.lastElementChild;

var qianyigeRow = stopRow.previousSibling;// 或者previouselementSibling

var leftCha = 0;

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

if (qianyigeRow) {

leftCha = qianyigeRow.offsetLeft - stopRow.offsetLeft;

}

// 需要删除的方格数

var removeNum = 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++) {

var box = 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(var a = 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

var newRow = createRow();

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

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

}

</script>

</body>

</html>

Vivian_shuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盖房子优化3

DOCTYPE html>html>head>metacharset="utf-8" />title>title>styletype="text/css">.wrap{width:800px;height:500px;border:1px solid black;margin:0 auto;position:r
复制链接

扫一扫