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

<!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. Entity Framework学习笔记——配置EF

    初次使用Entity Framework(以下简称EF),为了避免很快忘记,决定开日志记录学习过程和遇到的问题.因为项目比较小,只会用到EF的一些基本功能,因此先在此处制定一个学习目标:1. 配置EF ...

  2. Pycharm注册码

    name : newasp===== LICENSE BEGIN =====09086-1204201000001EBwqd8wkmP2FM34Z05iXch1AkKI0bAod8jkIffywp2W ...

  3. jQuery EasyUI CheckBoxTree的级联选中

    :子结点选中,父节点随之选中,父节点取消,子节点随之取消 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

  4. 利用JAVA生成二维码

    本文章整理于慕课网的学习视频<JAVA生成二维码>,如果想看视频内容请移步慕课网. 维基百科上对于二维码的解释. 二维条码是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图 ...

  5. Ninject之旅之六：Ninject约定

    摘要 在小的应用系统中一个一个注册一些服务类型不怎么困难.但是,如果是一个实际的有上百个服务的应用程序呢?约定配置允许我们使用约定绑定一组服务,而不用一个一个分别绑定. 要使用约定配置,需要添加Nin ...

  6. mongodb 分组查询

    数据的保存 include_once 'mDB.class.php'; $m=new mDB(); $m->setDB('mydb'); // $m->save('stu',['dept' ...

  7. Res_Orders_02

    一.燃尽图展示 二.项目进展 1.实现用户名找回 2.css样式嵌入

  8. [转]在WPF中区别TextBlock和Label

    TextBlock和Label都是用来显示少量数据的.好多文章对Label存在的描述都是它允许使用"快速获取"."快速获取"就是允许你用Alt加上其它的按键快速 ...

  9. ipv6过审函数

    int _ResolveIPv4Address(const char* ipv4_str, char* buffer, int bufferSize) { struct addrinfo hints, ...

  10. 318. Maximum Product of Word Lengths

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...