类似于屏保的一种动画，当小球碰到边框时，发生反弹，并且变化颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>碰壁反弹</title>
    <style type="text/css">
        #wrap{
            width: 400px;height: 500px;
            border: 1px solid green;
            margin: 100px auto 0px;
            position: relative;
        }
        #ball{
            width: 50px;height: 50px;
            background: black;
            border-radius: 50%;
            position: absolute;
            left: 0;top: 0;
        }
        #pall{
            width: 50px;height: 50px;
            background: blue;
            border-radius: 50%;
            position: absolute;
            right: 0;top: 0;
        }

</style>
</head>
<body>
    <div id="wrap">
        <div id="ball"></div>
        <div id="pall"></div>
    </div>

<script type="text/javascript">

var ball = document.getElementById('ball');
    var color = ['red','blue','green','orange','black','pink']
    var i = 0;
    var j = 0;
    var x = 1.5;
    var y = 4;
    setInterval(function(){
        ball.style.left = i + 'px';
        i += x;
        if (i >= 350) {
            x *= -1;
            col();
        }else if (i < 0) {
            x *= -1;
            col();
        };
        ball.style.top = j + 'px';
        j += y;
        if (j >= 450 ) {
            y *= -1;
            col();
        }else if(j < 0){
            y *= -1;
            col();
        }
        pall.style.right = i + 'px';
        i += x;
        if (i >= 350) {
            x *= -1;
            col1();
        }else if (i < 0) {
            x *= -1;
            col1();
        };
        pall.style.top = j + 'px';
        j += y;
        if (j >= 450 ) {
            y *= -1;
            col1();
        }else if(j < 0){
            y *= -1;
            col1();
        }
        
    },20)

function col(){
        var col = Math.floor(Math.random()*6);
        ball.style.background = color[col];
        
        
    }
    function col1(){
        var col1 = Math.floor(Math.random()*6);
        
        pall.style.background = color[col1];
        
    }

</script>
</body>
</html>

JS-小球碰撞反弹的更多相关文章

  1. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

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

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

  3. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  4. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  5. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  6. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. CSS3之碰撞反弹动画无限运动

    示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  9. 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象

    重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...

  10. js中小球碰壁反弹

    一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...

随机推荐

  1. border在IE6设置transparent无效

    在ie6下给border设置transparent是无效的,解决办法如下: _border-color:tomato; /*For IE6-*/ _filter:chroma(color=tomato ...

  2. PHP操作MongoDB学习笔记

    <?php/*** PHP操作MongoDB学习笔记*///*************************//**   连接MongoDB数据库  **////*************** ...

  3. 用PHP向mysql添加数据

    <?php $name=$_POST['name']; $gender = $_POST['gender']; $age=$_POST['age']; #连接到数据库 $link = mysql ...

  4. PHP中类自动加载的方式

    最近在学习composer,发现从接触PHP到现在已经遇到了三种关于PHP中类的自动加载方式,这其中包括PHP自带的类的自动加载方式.PHP的第三方的依赖管理工具composer的加载方式以及PHP的 ...

  5. IE8下标签float导致的bug。

    前几天帮朋友写一个页面,今天在IE8下面发现一个很奇葩的问题,给a标签添加了float:left之后a标签内的图片不显示了,去掉float:left之后就能正常显示. 代码: <!DOCTYPE ...

  6. 36、重新复习html和css之二

    (1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术 ...

  7. 文法 LL1

    <程序>-><声明列表>|<程序><函数> <声明列表>-><声明>|<声明><声明列表> ...

  8. highCharts的多图导出

    已实现HighChart的多图导出,不能上传文件,所以需要call我735734485.

  9. matlab 去掉字符串前后的空格

    strtrim 从字符串,删除开头和结尾的空白 句法 S = strtrim(STR) C = strtrim(CSTR)

  10. 关于 矩阵在ACM中的应用

    关于矩阵在ACM中的应用 1.矩阵运算法则 重点说说矩阵与矩阵的乘法,不说加减法. 支持: 结合律  (AB)C = A(BC) 分配律 A(B+C) = AB + AB $\left( \lambd ...