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

<!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. 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...

  2. treeview_dropdown_control

    http://www.brad-smith.info/blog/archives/193 http://www.brad-smith.info/blog/projects/dropdown-contr ...

  3. 采用UDP协议实现PIC18F97J60 ethernet bootloader

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). TCP/IP Stac ...

  4. VS Code 相关

    TSLint tslint 'src/**/*.ts?(x)' 运行发现目录下所有ts文件有没有问题 VSCode 按F1 输入ext install tslint Link 有一些lint可以aut ...

  5. 动态设置和访问cxgrid列的Properties（转）

    原文:http://www.cnblogs.com/hnxxcxg/archive/2010/05/24/2940711.html 动态设置和访问cxgrid列的Properties 设置: cxGr ...

  6. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  7. solrCloud+tomcat+zookeeper集群配置

    solrcolud安装solrCloud+tomcat+zookeeper部署  转载请出自出处:http://eksliang.iteye.com/blog/2107002 http://eksli ...

  8. linux 学习 12 服务管理

      第十二讲 Linux服务管理 12.1 Linux服务管理-服务分类 ——Linux服务 ----RPM包默认安装的服务 ————独立的服务 ————基于xinetd服务 ----源码包安装的服务 ...

  9. C++ 里大写TRUE和小写true区别

    1.C++里大写TRUE和小写true区别 true是bool型的: TRUE是int型的,VC里这个是ms自己定义的: C++规定不允许只通过返回类型不同区别两个函数 2.MFC中的”false“和 ...

  10. Python数据库备份脚本

    Python数据库备份脚本 #!/usr/bin/env python # author: liudong # -*- coding: utf-8 -*- # filename: db_bak.py ...