物理碰撞--js

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>test.html</title>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11     <style>
12         #canvas{border:5px solid #111;background:black;}
13     </style>
14   </head>
15   
16   <body>
17       <canvas id="canvas" width="960" height="460"></canvas>
18       <input type="button" onclick="addBall()" value="添加小球" />
19     <script type="text/javascript">
20         //画布-html5    canvas
21         var context = null;
22         var canvas = null;
23         window.onload = function(){
24             //获取画板
25             canvas = document.getElementById("canvas");
26             //获取权限 -- 上下文
27             context = canvas.getContext("2d");
28     
29             setTimeout(drawBall,20);//在指定的毫秒数之后调用指定的函数或计算表达式
30         };
31         
32         //装小球 
33         var balls = [];
34         //x,y小球的坐标位置，dx 摩擦系数 dy 重力速度 radius 小球半径
35         function Ball(x,y,dx,dy,radius){
36             this.x = x;
37             this.y = y;
38             this.dx = dx;
39             this.dy = dy;
40             this.radius = radius;
41         }
42         function addBall(){
43          var radius = 20;
44          var ball = new Ball(random(canvas.width),random(canvas.height),2,1,radius);
45          balls.push(ball);
46         }
47         function drawBall(){
48             //清除画布
49             context.clearRect(0,0,canvas.width,canvas.height);
50             //开始画图
51             context.beginPath();
52             //把所有小球全部添加到画布中
53             for(var i = 0 ; i<balls.length;i++){
54                 var ball = balls[i];
55                 //确定 小球中心点的坐标
56                 ball.x += ball.dx;
57                 ball.y += ball.dy;
58 
59 //                ball.dx *= 1;
60                 if(ball.y < canvas.height){
61                     ball.dy += 0.55;
62                 }
63                 
64                 //边界
65                 if(ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0){
66                     ball.dx = -ball.dx;
67                 }
68                 //边界
69                 if(ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0){
70                     ball.dy = -ball.dy;
71                 }
72                 context.beginPath();
73                 context.fillStyle = randomColor();
74                 context.lineWidth = 5;
75                 context.arc(ball.x,ball.y,ball.radius,0,2*Math.PI);
76                 context.fill();//填充北京颜色
77                 context.stroke();//描绘到画布中
78             }
79             setTimeout(drawBall,20);
80         }
81         function randomColor(){
82             var r = Math.floor(Math.random()*255);
83             var g = Math.floor(Math.random()*255);
84             var b = Math.floor(Math.random()*255);
85             return "rgb(" + r + "," + g + "," + b + ")";
86         };
87         function random(num){
88             return Math.floor(Math.random()*(num+1));
89         }
90     </script>
91   </body>
92 </html>