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

<!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. C 程序解决实际文件案例

    1,C程序参数(编写带参数 的C--argc,argv[]程序),带参数的Main程序 程序功能说明: 把命令行参数中的前一个文件名标识 的文件,复制到后一个文件名标识的文件中,如只有一个则把该文件写 ...

  2. AngularJS-chapter1-2-四大特性

    4大特性 MVC MVC实例  数据模型,控制器,视图 HelloAngular_MVC.html 图中的 ng-controller="HelloAngular"  定义了Hel ...

  3. Debug 常见问题总结（持续更新）

    2016-9-24 1.for循环变量做参数一定要小心,嵌套一个for变量不要用同一个. 2.字符串处理要打好下标的草稿,不然很容易搞混.(方法待讨论). 3.整形比较比较容易忽略=的问题 ,> ...

  4. 并发读写缓存实现机制(一)：为什么ConcurrentHashMap可以这么快？

    大家都知道ConcurrentHashMap的并发读写速度很快,但为什么它会这么快?这主要归功于其内部数据结构和独特的hash运算以及分离锁的机制.做游戏性能很重要,为了提高数据的读写速度,方法之一就 ...

  5. Mysql的一些常用方法

    公司近期为新来同事做了一次培训,我也偷偷溜进去观摩了一下,内容虽然很基础,但是还是挺有用的.这里做了一下资料汇总: 2种存储引擎 InnoDB:支持事务处理.外键.行级锁,游戏业务库使用 MyISAM ...

  6. 15.linux 中无法输入指令

    怎么可以回到倒数第五行的输入状态啊……

  7. PriorityQueue优先队列用法入门

    PriorityQueue是队列的一种,它叫做优先队列,该类实现了Queue接口. 之所以叫做优先队列,是因为PriorityQueue实现了Comparator这个比较接口,也就是PriorityQ ...

  8. 41、javaMail机制

    SMTP 是一种TCP协议支持的提供可靠且有效电子邮件传输的应用层协议.SMTP 是建立在 TCP上的一种邮件服务,主要用于传输系统之间的邮件信息并提供来信有关的通知. package com.ith ...

  9. SQL Server 的数据库简单操作

    --创建数据库--create database 数据库名称[on [primary](name='主数据逻辑文件名',filename='完整的路径.文件名和拓展名'[,size=文件大小][,fi ...

  10. NodeJS 常用模块

    NodeJS 模块: n:NodeJS 版本管理/切换 参考: https://github.com/tj/n ExpressJS:Web 框架 参考: http://expressjs.com/ m ...