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

<!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. java写入excel文件poi

    java写入excel文件 java写入excel文件poi,支持xlsx与xls,没有文件自动创建 package com.utils; import java.io.File; import ja ...

  2. 文本编辑的css常用属性

    white-space:pre //保留空格,不然又多个空格值显示一个 white-space:nowrap //强制不换行,知道遇到</br> letter-spacing //字母间的 ...

  3. MyEclipse怎么设置个性化代码注释模板

    打开Eclipse/MyEclipse工具,打开或创建一个Java工程,点击菜单Window->Preferences弹出首选项设置窗口   展开左侧Java->Code Style-&g ...

  4. vs2012安装Microsoft.AspNet.WebApi.WebHost

    工具---库程序包管理器---程序包管理器控制台:输入下面命令:  Install-Package Microsoft.AspNet.WebApi.WebHost 

  5. CSAPP学习笔记(第一，二章)

    1:文本文件指的是ASCII码文件,二进制文件指的是除文本文件以外,其他文件. 2:区分数据对象的唯一判别方法是数据的上下文. 3:描述一下一个hello.c文件的处理过程.首先hello.c文件我们 ...

  6. webform文件的上传

    文件上传 (控件:Fileupload) --文件映射:Server.MapPath(path)(相 对转绝对路径)--保存到指定路径:Fileupload.SaveAs 例子:点击按钮,获取上传图片 ...

  7. JVM调优

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制.32位系统 下,一般限制在1.5G~2G;64为操 ...

  8. 激活PHPStorm 2016.3

    通过互联网激活PHPStorm 2016.3: http://jetbrains.tencent.click http://172.245.22.235:1017 http://idea.imsxm. ...

  9. MySQL效能监控工具mysqlreport安装和中文说明

    管理 mysql 最让人困扰的就是如何有效的掌握 MySQL 的健康状况,因为 MySQL 虽然有提供许多系统变量值供您参考,但这些零散的数据若要手动搜集与过滤将会是一件十分没有效率的事情(除非您写 ...

  10. CSS3 04

    animate.css库的使用 官网:https://daneden.github.io/animate.css/ 作用:将一切常见的动画直接封装,开发者不需要考虑实现过程,只需要添加对应的类就能实现 ...