物理碰撞--js

時間 2019-12-10
原文原文鏈接
 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。