一、 在指定容器内的碰壁反弹

<!DOCTYPE HTML>

<html>

    <head>

        <title></title>

        <meta charset="UTF-8"/>

        <style type="text/css">

            .ball{

                height: 60px;

                width: 60px;

                background: blue;

                border-radius: 50%;

                position: absolute;

                top: 0;

                left: 0;

            }

        </style>

    </head>

    <body>

        <div class="ball">

        </div>

        <p style="width: 100%;height: auto;">

            offsetWidth       //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） <br />

            offsetHeight      //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）<br />

            clientWidth        //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）<br />

            clientHeight       //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）<br />

            style.width         //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）<br />

            style.height       //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）<br />

            scrollWidth       //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同<br />

            scrollHeigh       //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同<br />

            offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。

        所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。<br />

            offsetLeft //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。<br />

            scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。<br />

            scrollTop   //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 返回值是一个整数，单位是像素。此属性是可读写的。

        </p>

    </body>

    <script type="text/javascript">

        var ball = document.querySelector('.ball');

        setInterval(scroll,50);

        //全局变量，避免进入函数每次都需要重新声明一次

        var stepX = 5;

        var stepY = 5;

        function scroll(){

            var scrollW = ball.offsetLeft + stepX;

            var scrollH = ball.offsetTop + stepY;

            if(scrollW >= 800){

                stepX *= -1;

            }else if(scrollW <= 0){

                stepX *= -1;

            }

            if(scrollH >= 400){

                stepY = -stepY;

            }else if(scrollH <= 0){

                stepY = -stepY;

            }

            ball.style.left = scrollW + "px";

            ball.style.top = scrollH + "px";

        }

    </script>

</html>
二、 整个浏览器可视区域的碰壁反弹

<!DOCTYPE HTML>

<html>

    <head>

        <title></title>

        <meta charset="UTF-8"/>

        <style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            #bounce{

                height: 50px;

                width: 50px;

                border-radius: 50%;

                /*background: yellow;*/

                position: absolute;

                left: 0;

                top: 0;

            }

        </style>

    </head>

    <body>

        <div id="bounce">

        </div>

    </body>

    <script type="text/javascript">

        //获取元素

        var container = gt("con");//小球所在容器

        var bounce = gt("bounce");//反弹的小球

        //设置小球随机背景颜色

        bounce.style.background = ranColor();

        //获取小球在可视区域的滚动范围

        //获取可视区域的宽高（不含任务栏）

        var aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

        var aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

        console.log("可视区域不含任务栏的范围：w："+aWidth + "===h："+aHeight);

        //减去小球的宽高即为活动范围,此处不加单位，方便moveDistance()方法内if条件判断

        var scrollMaxX = (aWidth - bounce.offsetWidth);

        var scrollMaxY = (aHeight - bounce.offsetHeight);

        console.log("小球可滚动的范围：x："+scrollMaxX+"===y："+scrollMaxY);

        //设置小球滚动，每隔几秒滚动一段距离

//        var timer = setInterval(function(){alert("haha")},1000);

        var timer = setInterval(moveDistance,30);

        //设置小球移动

        var stepX = 5;

        var stepY = 5;

        function moveDistance(){

//            console.log("进入moveDistance")

            var currentLeft = bounce.offsetLeft + stepX;

            var currentTop = bounce.offsetTop + stepY;

            //判断小球是否滚动到最大的宽度、高度，如果滚动到最大宽度、高度，设置反弹滚动  *(-1)

            if(currentLeft >= scrollMaxX){

                currentLeft = scrollMaxX;

                stepX *= -1;

                bounce.style.background = ranColor();

            }else if(currentLeft <= 0){

                currentLeft = 0;

                stepX *= -1;

                bounce.style.background = ranColor();

            }

            if(currentTop >= scrollMaxY){

                currentTop = scrollMaxY;

                stepY *= -1;

                bounce.style.background = ranColor();

            }else if(currentTop <= 0){

                currentTop = 0;

                stepY *= -1;

                bounce.style.background = ranColor();

            }

            bounce.style.left = currentLeft + 'px';

            bounce.style.top = currentTop + 'px';

            console.log(bounce.style.left);

//            console.log("离开moveDistance");

        }

        //设置窗口改变监听器;onresize 事件会在窗口或框架被调整大小时发生。

        //当浏览器窗口发生改变时，重新获取浏览器当前可视化窗口的尺寸，重新计算小球能移动的最大宽度和高度

        window.onresize = function(){

            aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;

            aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;

            scrollMaxX = (aWidth - bounce.offsetWidth);

            scrollMaxY = (aHeight - bounce.offsetHeight);

        }

        //设置小球随机颜色方法

        function ranColor(){

            var red = parseInt(Math.random()*255);

            var green = parseInt(Math.random()*255);

            var blue = parseInt(Math.random()*255);

            return "RGB(" + red + "," + green + "," + blue + ")";

        }

        //设置通过id获取元素的函数

        function gt(e){

            return document.getElementById(e);

        }

    </script>

</html>

js中小球碰壁反弹的更多相关文章

  1. (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 前一篇博文介绍了物理对象中小球与砖块的碰撞处理,在这一篇中我们再 ...

  2. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  3. js实现div的碰壁反弹效果

    文章地址 https://www.cnblogs.com/sandraryan/ 需求: 写一个div,让div在父级进行匀速运动,碰到父级上下左右的边框,就向反方向运动. 碰壁反弹在游戏制作中很常用 ...

  4. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  5. 拾取模型的原理及其在THREE.JS中的代码实现

    1. Three.js中的拾取  1.1. 从模型转到屏幕上的过程说开 由于图形显示的基本单位是三角形,那就先从一个三角形从世界坐标转到屏幕坐标说起,例如三角形abc 乘以模型视图矩阵就进入了视点坐标 ...

  6. 初步揭秘node.js中的事件

    当你学习node.js的时候,Events是一个非常重要的需要理解的事情.非常多的Node对象触发事件,你能在文档API中找到很多例子.但是关于如何写自己的事件和监听,你可能还不太清楚.如果你不了解, ...

  7. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  8. (NO.00004)iOS实现打砖块游戏(八):游戏中小球与砖块的碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在回到GameScene.m中,我们所有的碰撞处理就放在该类中 ...

  9. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

随机推荐

  1. JavaScript 空间坐标

    基础知识 首先参考画布分为视口(窗口)与文档的含义 网页很多都是多屏,所以文档尺寸一般大于视口尺寸 视口尺寸不包括浏览器工具条.菜单.标签.状态栏等 当打开控制台后,视口尺寸相应变小 文档像posit ...

  2. C++ U型数

    U型数字 最近蒜头君喜欢上了U型数字,所谓U型数字,就是这个数字的每一位先严格单调递减,后严格单调递增.比如 212212 就是一个U型数字,但是 333333, 9898, 567567, 3131 ...

  3. java实现高斯平滑

    高斯模糊也叫作高斯平滑,这里主要用来实现图像降噪.官方有入门教程:http://opencv-java-tutorials.readthedocs.io/en/latest/ 实现代码如下: pack ...

  4. JavaScript学习系列博客_22_JavaScript this（上下文对象）

    this(上下文对象) - 我们每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数. 使用this来引用上下文对象,根据函数的调用形式不同,this代表的对象也不同.不同的情况: 1. ...

  5. Hyperledger Fabric 手动搭建【区块链学习三】

    Hyperledger Fabric 手动搭建 前面我们学习了区块链是什么.还有自动搭建学习东西我们就要从简单到深入(入门到放弃),现在自动部署已经跑通了接下来就是手动搭建Fabric 网络可以更好的 ...

  6. HDFS概述和Shell操作

    大数据技术之Hadoop(HDFS) 第一章 HDFS概述 HDFS组成架构 HDFS文件块大小 第二章 HDFS的Shell操作(开发重点) 1．基本语法 bin/hadoop fs 具体命令    ...

  7. 操作系统-I/O（2）设备的分配

    作业执行前对设备提出申请时,指定某台具体的物理设备会让设备分配变得简单,但如果所指定设备出现故障,即便计算机系统中有同类设备也不能运行 设备独立性:用户通常不指定物理设备,而是指定逻辑设备,使得用户作 ...

  8. 焦大：逛网seo案例浅析

    http://www.wocaoseo.com/thread-93-1-1.html 逛,发现喜欢.这或许是很多人上网的喜欢方式,我隐约记得白鸦在一次采访上说到现在人的购物方式,在淘宝上人们决定买一件 ...

  9. Qt 绘图(QBitmap,QPixmap,QImage,QPicture)

    QPainter绘图绘图设备(QPixmap,QImage,QBitmap,QPicture) 重写绘图事件,虚函数 如果窗口绘图,必须放在绘图事件里实现 绘图事件内部自动调用,窗口需要重绘的时候,状 ...

  10. .NET Core3.1 Dotnetty实战第二章

    一.概要 在上一篇文章讲到Dotnetty的基本认识,本文这次会讲解dotnetty非常核心的模块是属于比较硬核的干货了,然后继续往下讲解如何根据自己的需求或者自己的喜好去配置Dotnetty而不是生 ...