请点此下载代码并用Chrome或是Firefox打开index.html

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>碰撞球 19.3.3 18:11 by:逆火 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='运动'/>
        </div>

        <canvas id="canvas" width="750px" height="500px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="运动";
    }else{

        animateBtn.value="暂停";
        window.requestAnimationFrame(animate);
    }
}

var ctx;// 绘图环境
var balls;// 球数组
function init(){

    var canvas=document.getElementById('canvas');
    canvas.width=750;
    canvas.height=500;
    ctx=canvas.getContext('2d');

    balls=[
        {
            x:150,
            y:250,
            vx:-7.2,
            vy:3.8,
            radius:25,
            innerColor:'rgba(255,25,0,1)',
            middleColor:'rgba(255,25,0,0.7)',
            outerColor:'rgba(255,25,0,0.5)',
            strokeStyle:'gray',
        },

        {
            x:650,
            y:50,
            vx:-8.2,
            vy:2.5,
            radius:25,
            innerColor:'rgba(113,232,227,1)',
            middleColor:'rgba(113,232,227,0.7)',
            outerColor:'rgba(113,232,227,0.5)',
            strokeStyle:'red',
        },

        {
            x:50,
            y:150,
            vx:12,
            vy:-14,
            radius:25,
            innerColor:'rgba(23,45,227,1)',
            middleColor:'rgba(23,45,227,0.7)',
            outerColor:'rgba(23,45,227,0.5)',
            strokeStyle:'blue',
        },

        {
            x:30,
            y:60,
            vx:8,
            vy:-24,
            radius:25,
            innerColor:'rgba(23,45,69,1)',
            middleColor:'rgba(23,45,69,0.7)',
            outerColor:'rgba(23,45,69,0.5)',
            strokeStyle:'yellow',
        },

        {
            x:300,
            y:300,
            vx:80,
            vy:-34,
            radius:25,
            innerColor:'rgba(123,45,69,1)',
            middleColor:'rgba(123,45,69,0.7)',
            outerColor:'rgba(123,45,69,0.5)',
            strokeStyle:'navy',
        },
   ];

};

function update(){
    for(var i=0;i<balls.length;i++){
        var ball=balls[i];

        // 与左右墙壁的碰撞检测
        if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){
            ball.vx=-ball.vx;
        }

        // 与上下墙壁的碰撞检测
        if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){
            ball.vy=-ball.vy;
        }

        // 小球之前的碰撞检测
        for(var j=0;j<balls.length;j++){
            if(i!=j){
                var other=balls[j];

                var distance=Math.sqrt( Math.pow((ball.x+ball.vx-other.x-other.vx),2)+Math.pow((ball.y+ball.vy-other.y-other.vy),2));

                if(distance<ball.radius+other.radius){
                    // 如果两个碰撞小球的质量相等，联立动量守恒和能量守恒方程时可解得：两个小球碰撞后交换速度。
                    var x=ball.vx;
                    ball.vx=other.vx;
                    other.vx=x;

                    var y=ball.vy;
                    ball.vy=other.vy;
                    other.vy=y;
                }
            }
        }

        ball.x+=ball.vx;
        ball.y+=ball.vy;
    }
}

function draw(){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    for(var i=0;i<balls.length;i++){
        var ball=balls[i];

        gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius);
        gradient.addColorStop(0.3,ball.innerColor);
        gradient.addColorStop(0.5,ball.middleColor);
        gradient.addColorStop(1.0,ball.outerColor);

        ctx.save();
        ctx.beginPath();
        ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
        ctx.fillStyle=gradient;
        ctx.strokeStyle=ball.strokeStyle;
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }
}

function animate(){
    if(!paused){

        update();
        draw();

        setTimeout( function(){
            window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
        }, 0.10 * 1000 );// 延时执行
    }
}
//-->
</script>

2019年3月3日20点17分

[Canvas]碰撞球 增加小球间碰撞检测的更多相关文章

  1. [Canvas]碰撞球

    观赏动态效果请点此下载并用Chrome/Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8" ...

  2. 2017了，回家前 "年末" 分享:下雨，飘雪，红包雨，碰撞球，自定义View

    (本博客为原创:http://www.cnblogs.com/linguanh/) 目录: 效果展示 感想 代码拆解 开源地址 效果展示 有没有兴趣继续看下去,直接看下"颜值"是第 ...

  3. [原创]基于html5新标签canvas写的一个小画板

    最近刚学了canvas,写个小应用练习下 源代码 <!DOCTYPE> <html> <head> <meta http-equiv="Conten ...

  4. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  6. 利用canvas写一个验证码小功能

    刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html <!DOCTYPE html> <html lang="en"> ...

  7. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  8. canvas写的一个小时钟demo

    <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Demo of clock</title> ...

  9. opencv(4)实现数据增加小工具

    数据增加(data augmentation),作为一种深度学习中的常用手段,数据增加对模型的泛化性和准确性都有帮助.数据增加的具体使用方式一般有两种,一种是实时增加,比如在Caffe中加入数据扰动层 ...

随机推荐

  1. Execution Plan 执行计划介绍

    后面的练习中需要下载 Demo 数据库, 有很多不同的版本, 可以根据个人需要下载.  下载地址 -http://msftdbprodsamples.codeplex.com/ 1. 什么是执行计划 ...

  2. CentOS 7.x，不重新编译 PHP，动态安装 imap 扩展

    先前的教程:PHP5不重新编译,如何安装自带的未安装过的扩展,如soap扩展? # 安装依赖包 yum install -y libc-client-devel /usr/local/src/cent ...

  3. java系列之 原生数据类型

    在我看来,java里面里面除了原生类型不是对象,其他的都是对象.但java是面向对象的语言,很多地方还要要操作对象,所以java会自动把原生类型转为对应的包装类型.这个过程叫自动装箱.有装箱就有拆箱, ...

  4. dtrace 相关资料

    Here are some DTrace information sources: * [Oracle Wiki](https://wikis.oracle.com/display/DTrace/DT ...

  5. [Git]git教程

    摘要 目前公司项目逐渐都要迁移到git上,使用git进行版本控制及源代码管理. git学习资料 一个小时学会Git 权威Git书籍ProGit(中文版) git官网:http://git-scm.co ...

  6. Android：intent的基础

    只有一个活动的应用也太简单了吧?没错,你的追求应该更高一点.不管你想创建多少 个活动,方法都和上一节中介绍的是一样的.唯一的问题在于,你在启动器中点击应用的图 标只会进入到该应用的主活动,那么怎样才能 ...

  7. SQLServer2008:在查看表记录或者修改存储过程时出现错误。错误消息为: 目录名无效

    登陆数据库后,右键打开表提示:目录名无效,执行SQL语句也提示有错误,本来想重装的这个肯定能解决,但是这个方法真的不视为上上策啊,于是在网上找到了这个解决办法,还真是立即见效啊!分享给大家,希望有帮助 ...

  8. AIDL interface XXX should be declared in a file

    在写AIDL的时候出现了interface XXX should be declared in a file, 错误...经过反复查看,发现AIDL规定,文件名必须和interface XXX名字相同 ...

  9. gzip格式解压缩

    gzip格式解压缩 有时候网络请求中会出现gzip格式的数据,而我们无法通过常规办法进行解析: 这时候可以使用下面的这个工具来解决这个问题: https://github.com/mattt/Godz ...

  10. 实习医生风云第一至九季/全集Scrubs迅雷下载

    本季看点:<实习医生风云>一批医学院的学生来到圣心医院开始他们的实习生涯,但是从第一天起就发现这里并不是想象中安详宁静的医学圣地,从医生到护士甚至门卫个个不同寻常.内科实习医生杰迪是个聪明 ...