垒房子的小游戏，还没加上得分选项，这是自己的练习笔记，留作笔记随时查看。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垒房子</title>
<style type="text/css">
body,ul,li{
margin: 0;
padding:0;
}
#wrap{
600px;
height: 700px;
border: 1px solid red;
/*box-sizing: border-box;*/
margin: 20px auto;
position: relative;
background: greenyellow;
}
ul{
position: absolute;
/*box-sizing: border-box;*/
left: 0px;
bottom: 0;
}
ul:after{
content:'';
display: block;
clear: both;
}
li{
list-style: none;
20px;
height: 20px;
border: 1px solid white;
background: orange;
box-sizing: border-box;
float: left;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
//创建ul及li
var a = 0;//当前ul的bottom值
function createUl (a,num) {
var oul = document.createElement('ul');
for(var i = 0; i < num; i++){
var li = document.createElement('li');
oul.appendChild(li);
}
wrap.appendChild(oul);
console.log(oul.offsetHeight)
oul.style.bottom = a * oul.offsetHeight + 'px';
var timer;
oul.move = function() {
var offleft = oul.offsetLeft;
var b = 20;//每次移动的距离
timer = setInterval(function(){
oul.style.left = offleft + 'px';
offleft += b;
console.log(wrap.offsetWidth)
if (offleft == wrap.offsetWidth - oul.offsetWidth - 2) {
b *= -1;
}else if(offleft == 0){
b *= -1;
}
},300)
}
oul.move();
oul.stop = function() {
clearInterval(timer);
}
return oul;
}
function deletli (before,content) {
var offL = content.offsetLeft - before.offsetLeft;
//左边
if (offL < 0) {
var num = Math.floor(Math.abs(offL / 20));
if (num >= content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i < num; i++) {
content.children[0].remove();
}
content.style.left = num * 20 + content.offsetLeft + 'px';
}else{
var num = Math.floor(Math.abs(offL / 20));
if (num >= content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i < num; i++) {
content.children[0].remove();
}
}
}
var first = createUl(a,20)
a++;
wrap.onclick = function(){
first.stop();
var uls = document.querySelectorAll('ul');
if (uls.length > 1) {
deletli(uls[uls.length-2],first)
}
var myul = createUl(a,first.offsetWidth/20);
first = myul
a++;
}
</script>
</html>