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

<!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. 《疯狂Java讲义》(三) ---- JDK&JRE&JVM&CLASSPATH

    JDK: Java SE Development Kit, Java标准版开发包.包括Java编译器,JRE,以及常用的Java类库等. JRE: Java Runtime Environment,运 ...

  2. MySQL的数据库，数据表，数据的操作

    数据库简介 概念 什么是数据库?简单来说,数据库就是存储数据的"仓库", 但是,光有数据还不行,还要管理数据的工具,我们称之为数据库管理系统! 数据库系统 = 数据库管理系统 + ...

  3. NHibernate系列文章二十三：NHibernate查询之Criteria查询（附程序下载）

    摘要 上一篇文章介绍了NHibernate HQL,他的缺点是不能够在编译时发现问题.如果数据库表结构有改动引起了实体关系映射的类有改动,要同时修改这些HQL字符串.这篇文章介绍NHibernate面 ...

  4. vs默认VS Development Sever和用IIS Web Server的一点差别

    关于VS Development Server(vs调试默认运行环境)和IIS Web Server 做运行服务器时,请求处理的一点区别. 将请求粗略分为两类:静态资源请求和动态资源请求. 静态资源请 ...

  5. Python自动化 【第十八篇】：JavaScript 正则表达式及Django初识

    本节内容 JavaScript 正则表达式 Django初识 正则表达式 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  6. CSS3基础03（3D②） 求粉丝

    3 D (3.1)rotateY 围绕着Y轴进行旋转 (1)正数是(站在右边推),负数是(站在左边推) (2.1)定义元素背过去是否可见 backface-visibility: visible|hi ...

  7. zookeeper dubbo 问题解决录

    问题1: 运行起来不报错,不过在Console没有zookeeper的心跳信息,也就是说没有配置上zookeeper,而出错的原因是下面蓝色这段解析不了 spring-dubbo-provider.x ...

  8. 《跑跑跑》（五）——添加障碍物，Tiled障碍层的使用

    [转]http://blog.csdn.net/u010778159/article/details/44036365 首先利用TiledMap在原来的地图上添加上障碍物,先新建两个图层,分别叫bar ...

  9. SQL Server 的表数据简单操作（表数据查询）

    --表数据查询----数据的基本查询-- --数据简单的查询--select * | 字段名[,字段名2, ...] from 数据表名 [where 条件表达式] 例: use 商品管理数据库 go ...

  10. Java:基于LinkedList实现栈和队列

    1.提供一组栈的接口,其底层关联到一个LinkedList(双端队列)实例.由于只暴露部分基于栈实现的接口,所以可以提供安全的栈实现. package junit; import java.util. ...