垒房子的小游戏，还没加上得分选项，这是自己的练习笔记，留作笔记随时查看。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>垒房子</title>
        <style type="text/css">
            body,ul,li{
                margin: 0;
                padding:0;
            }
            #wrap{
                width: 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;
                width: 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>

// = content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i = content.children.length) {
alert('结束')
renturn;
}
for (var i = 0; i 1) {
deletli(uls[uls.length-2],first)
}
var myul = createUl(a,first.offsetWidth/20);
first = myul
a++;
}

// ]]>

JS--垒房子的更多相关文章

  1. Kafka消费异常处理

    org.apache.kafka.clients.consumer.CommitFailedException: Commit cannot be completed since the group ...

  2. html-css-js基本理解和简单总结

    目录 一.对于网页的基本理解 1.网页是一种数据展示和信息交互的载体 2.网页组成部分 3.支撑一个网页的技术模块 二.html的理解和技术笔记 1.html理解 2.html技术笔记-html标签 ...

  3. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  4. JS入门学习，编写一个简易月历

    //今天最头疼的地方在于 getElementsByClassName()的 [] ~~ //错了N遍后只能说有点点头绪,如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class < ...

  5. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  7. js 简繁体字转换

    有些项目需要用到简体和繁体两种字体,在js前台进行转换比较方便而且显示速度没有延时 是一个比较好的解决方案. var _isFT_CS = 0// 简体 var _isFT_CT = 1// 繁体 v ...

  8. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  9. 通过JS实现网站繁体简体互换

    html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. 学习FFmpeg API

    ffmpeg是编解码的利器,用了很久,以前看过dranger 的教程,非常精彩,受益颇多,是学习ffmpeg api很好的材料.可惜的是其针对的ffmpeg版本已经比较老了,而ffmpeg的更新又很快 ...

  2. java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

    报这个错是因为加的struts的jar包有问题... 另外,jar包应该放在WEB-INF下的lib文件夹里面,且不必Add to build path,该目录下的jar包会自动引入 使用struts ...

  3. Mysql字符类型比较

    一. binary和char比较: binary 字节为单位,char字符为单位,字符占几个字节取决于字符集 binary  比较规则基于字节值,char基于字符,即使是_bin的比较规则 范围都0- ...

  4. U盘FAT32文件系统转换成NTFS文件系统

    首先 点击-开始--运行---输入CMD ----输入convert X:/FS:NTFS 其中 X是U盘所在的盘符

  5. 笔试常考的Linux命令大全

    1. wc -l 统计一个文件的行数.l-line.-c是字节数,-m是字符数,mc不能同时使用.-L打印最长行的长度. 2. 查看系统进程的命令:ps,查看CPU占用命令:top.df:查看磁盘使用 ...

  6. jsvascript—谜之this？

    原文:Gentle explanation of ‘this’ keyword in JavaScript 1. 迷之 this 对于刚开始进行 JavaScript 编程的开发者来说,this 具有 ...

  7. JS原型和继承

    //所有的函数都有一个prototype属性 function aa() { } console.info(aa.prototype); //这个prototype属性引用了一个对象,即原型,初始化时 ...

  8. Chrome54安装最新版Flash版本办法

    从 Chrome54 版本开始,flash默认已经不能使用了.打开机器上的C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Pe ...

  9. 学习制作第一个 openfire 插件

    本文地址:http://www.cnblogs.com/jying/p/3683409.html 蛋疼的自学路~~~ 开始想法是修改openfire源码,但修改后发现不好测试,不会发布,不会使用,各种 ...

  10. Flex 中画图工具（drawTool）失效

    做项目的时候画图工具突然失效,解决了半天都不行,最后将画图结束的函数map_drawEndHandler写在方法里面的时候,运行却能够画图了,不知道是什么原理,比较头疼,左思右想,都感觉有点怪怪的,虽 ...