用html制作房产,盖房子.html

盖房子

* {

padding: 0;

margin: 0;

}

.wrap {

width: 800px;

height: 500px;

border: 1px solid red;

position: relative;

}

ul,

li {

list-style: none;

}

ul {

position: absolute;

bottom: 0;

}

li {

width: 20px;

height: 20px;

border: 1px solid black;

background-color: cyan;

float: left;

box-sizing: border-box;

transition: all 1s;

transform: translate(0, 0) rotate(0);

opacity: 1;

}

.remove {

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

opacity: 0;

}

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

var liNum = 20;

var ulBot = 0;

var timerGap = 500;

function createUl() {

var ul = document.createElement("ul");

divWrap.appendChild(ul);

ul.style.bottom = ulBot + "px";

ul.timer = null;

//创建li

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

var li = document.createElement("li");

ul.appendChild(li);

}

var maxDis = divWrap.clientWidth - ul.offsetWidth;

var speed = 20;

ul.timer = setInterval(function () {

var offleft = ul.offsetLeft;

offleft += speed;

ul.style.left = offleft + "px";

if (offleft >= maxDis || offleft <= 0) {

speed *= -1;

}

}, timerGap);

}

createUl();

divWrap.onclick = function () {

var uls = document.getElementsByTagName("ul");

var currentUl = uls[uls.length - 1];

clearInterval(currentUl.timer);

currentUl.timer = null;

//切掉多余的

if (uls.length != 1) {

var preUl = uls[uls.length - 2];

//获取俩个ul的左翩亮的差值

var distance = currentUl.offsetLeft - preUl.offsetLeft;

var removeNum = parseInt(Math.abs(distance) / 20);

liNum -= removeNum;

if (liNum <= 0) {

alert("game over");

return;

}

var lis = currentUl.getElementsByTagName("li");

if (distance > 0) {

//右侧开始删除li

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

lis[lis.length - i - 1].className = "remove";

lis[lis.length - i - 1].timerout = null;

}

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

lis[lis.length - 1].timerout = setTimeout(function () {

lis[lis.length - 1].remove();

}, 1000);

}

} else {

//从左边开始删除li

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

lis[i].className = "remove";

lis[i].timerout = null;

}

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

lis[0].timerout = setTimeout(function () {

lis[0].remove();

currentUl.style.left = currentUl.offsetLeft + lis[0].offsetWidth + "px";

}, 1000);

}

}

}

ulBot += currentUl.offsetHeight;

if (timerGap > 50) {

timerGap -= 50;

} else {

timerGap = 50;

}

createUl();

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史