canvas_05 面向对象的小球

效果图：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8         <title>Canvas</title>
 9         <style>
10             canvas {
11                 margin: 0 auto;
12                 border: 1px solid #aaa;
13                 display: block;
14             }
15         </style>
16     </head>
17 
18     <body>
19         <canvas width="500px" height="500px" id="canvas"></canvas>
20 
21         <script>
22             var canvas = document.querySelector("#canvas");
23             var ctx = canvas.getContext("2d");
24 
25             var w = canvas.width;
26             var h = canvas.height;
27 
28             function randNum(num) {
29                 return Math.random() * num;
30             }
31 
32             /**
33              *  x        起始x坐标
34              *  y        起始y坐标
35              * color     小球颜色
36              * xSpeed    x轴速度
37              * ySpeed    y轴速度
38              */
39 
40             // 初始化小球坐标
41             function Ball() {
42                 this.x = randNum(5) + 60; // 60 防止卡住
43                 this.y = randNum(3) + 60;
44                 this.r = randNum(50) + 10; // [10, 60)
45                 this.xSpeed = randNum(3) + 2; // [2, 5)
46                 this.ySpeed = randNum(3) + 1; // [1, 4)
47                 this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
48             }
49 
50             // 定义小球显示方法
51             Ball.prototype.show = function() {
52                 // 更新球坐标
53                 this.run();
54 
55                 ctx.beginPath();
56                 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
57                 ctx.fillStyle = this.color;
58                 ctx.fill();
59             }
60 
61             // 小球运动
62             Ball.prototype.run = function() {
63                 if (this.x + this.r >= w || this.x - this.r <= 0) {
64                     this.xSpeed = -this.xSpeed
65                 }
66 
67                 if (this.y + this.r >= h || this.y - this.r <= 0) {
68                     this.ySpeed = -this.ySpeed
69                 }
70 
71                 this.x += this.xSpeed;
72                 this.y += this.ySpeed;
73 
74             }
75 
76             function animation() {
77                 var ballArr = [];
78                 for (var i = 0; i < 50; i++) {
79                     var ball = new Ball();
80                     ballArr.push(ball);
81                     ball.show();
82                 }
83 
84                 setInterval(() => {
85                     ctx.clearRect(0, 0, w, h);
86                     for (var i = 0; i < ballArr.length; i++) {
87                         var ball = ballArr[i];
88                         ball.show();
89                     }
90                 }, 10)
91             }
92 
93             animation();
94         </script>
95     </body>
96 
97 </html>