js中小球碰壁反弹

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

<!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>

原文地址:https://www.cnblogs.com/menglong1214/p/9595020.html

时间: 2024-11-05 14:37:44

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

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

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 前一篇博文介绍了物理对象中小球与砖块的碰撞处理,在这一篇中我们再来看一下小球与反弹棒碰撞发生的那点事 ;) 小球与反弹棒开始碰撞 同样我们在碰撞中也要调整小球的力矩,所以也要分开处理,首先是碰撞开始时的处理: -(BOOL)ccPhysicsCollisionBegin:(CCPhysicsCollisionPair *)pair ball:(CCNode *)

小球碰壁回弹--- html(JavaScript)

这两天解除了下 html 看到想起来 iOS 上有个游戏感觉挺好的,于是想着用 js 写写试试, 结果实现了, 多余的也不说了, 直接上代码 主要地方都有注释 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>碰壁反弹</title>        <style type="text/css&quo

初探JavaScript(三)——JS带我碰壁带我飞

已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScript Dom 编程艺术>(ps:看过书评,网友对其褒贬不一,个人感觉还是不错的,适合初学者.不是每本书都能得到所有读者的认可,只能让部分适合的读者对其称赞,而我,就是其中一个). 前面介绍了JavaScript的一些常用方法,如何与DOM.HTML配合完成一些交互.今天主要介绍JavaScript在动画效

JS关于小球撞墙问题

学习了JS,自己写了一个关于小球撞墙的小练习,呈现的的效果是点击框里的空白会出现小球去撞红色的墙,墙后面有一个血槽,小球撞一下,血槽的血就少一格,当血槽里的血都消失时,墙消失.下面是具体实现的代码. 一.首先是body里的内容:创建一个大的div块,里面包含两个元素,是两个div快当作墙和血槽 <body>      <div id="wrap">           <div id="wall"></div>   

Javascript:实操---碰壁反弹(有阻碍物)

CSS部分 <style>*{    margin: 0px;    padding: 0px; }#main{    width: 700px;    height: 500px;    border: 1px solid black;    position: relative;}#child{    width: 30px;    height: 30px;    border-radius: 15px;    background-color: #ccc;    position: a

Javascript:实操---碰壁反弹(无阻碍物)

CSS部分 <style type="text/css">#wrap{    height: 300px;    width: 500px;    border: 1px solid #000;    position: relative;}#child{    position: absolute;    left: 0;    top: 0;    height: 50px;    width: 50px;    background-color: #ccc;}<

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

JS中的运算符&amp;JS中的分支结构

一.JS中的运算符 1.算术运算(单目运算符) + 加.- 减.* 乘./ 除.% 取余.++ 自增.-- 自减 >>> +:有两种作用,连接字符串/加法运算.当+两边全为数字时,进行加法运算: 当+两边有任意一边为字符串时,起连接字符串的作用,连接之后的结果为字符串 除+外,其余符号运算时,会先尝试将左右变量用Number函数转为数字 >>> /: 结果会保留小数点 >>> ++: 自增运算符,将变量在原有基础上+1: --: 自减运算符,将变量在原

Js中的数据属性和访问器属性

Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性包含四个特性,分别是: configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值 value:包含该属性的数据值.默