|
小球碰撞效果是采用面向对象的方式写的，在小球的构造器里包含了小球的属性值，大小，移动速度，半径大小以及颜色。 在小球的原型方法里，添加了小球运动的方法，当小球碰撞到屏幕边界的时候进行反弹。 小球是采用h5的canvas绘制，采用了性能更高的requestanimationframe作为计时器，该计时器是以屏幕的刷新率作基准，CPU占用较少，性能比settimeout以及setinterval性能更高， |
|
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Ball</title> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| 100%; | |
| height: 100%; | |
| } | |
| canvas { | |
| background: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id='canv'>您的浏览器不支持CANVAS，请更换浏览器!!!</canvas> | |
| <script> | |
| document.addEventListener('resize', resize) | |
| function resize() {//监听屏幕缩放 | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| } | |
| var canvs = document.getElementById('canv'); | |
| canvs.width = window.innerWidth; | |
| canvs.height = window.innerHeight; | |
| var ctx = canvs.getContext('2d');//获得canvas绘图环境 | |
| var ball = function () {//小球构造器 | |
| this.bx = Math.random() * canvs.width;//小球x轴的位置 | |
| this.by = Math.random() * canvs.height;//小球y轴的位置 | |
| this.r = Math.random() * 20 + 10;//小球的半径 | |
| this.color = 'rgba('+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.ceil (Math.random()*255)+','+Math.random()/4+')'//小球的颜色 | |
| this.vx = Math.random() *10-5;//小球的x轴方向的运动速度 | |
| this.vy = Math.random() *4-2;//小球y轴方向的速度 | |
| } | |
| ball.prototype.draw = function () {//小球绘制方法 | |
| // ctx.fillStyle = 'rgba(255,255,255,0.1)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| ctx.beginPath();//开始路径 | |
| var grd=ctx.createRadialGradient(this.bx,this.by,0,this.bx,this.by,this.r);//生成小球径向渐变色 | |
| grd.addColorStop(0,"white");//里面的颜色 | |
| grd.addColorStop(1,this.color);//外界的颜色 | |
| ctx.globeAlpha=0.2;//透明度 | |
| // Fill with gradient | |
| ctx.fillStyle=grd;//以渐变色填充小球 | |
| ctx.arc(this.bx, this.by, this.r, 0, Math.PI * 2, true);//画圆函数 | |
| ctx.fill() | |
| } | |
| ball.prototype.move = function () {//小球的移动方法 | |
| this.bx += this.vx; | |
| this.by += this.vy; | |
| // ball.vy *= 0.99; | |
| // ball.vy += 0.25; | |
| if (this.by + this.vy > canvs.height || this.by + this.vy < 0) { | |
| this.vy = -this.vy;//边界判定，到边界后反向弹 | |
| // | |
| } | |
| if (this.bx + this.vx > canvs.width || this.bx + this.vx < 0) { | |
| this.vx = -this.vx; | |
| // nball.color = '#' + ('00000' + ((Math.random() * 16777215))) | |
| } | |
| } | |
| function gogo(num) { | |
| num= num||10; | |
| var globe = []; | |
| for (var i = 0; i < num; i++) { | |
| var nball = new ball(); | |
| globe.push(nball) | |
| // nball.draw() | |
| } | |
| console.log(globe) | |
| function ballmove(){ | |
| // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| for (var j = globe.length - 1; j >= 0; j--) { | |
| // globe[j].draw() | |
| globe[j].move(); | |
| globe[j].draw() | |
| } | |
| window.requestAnimationFrame(ballmove) | |
| } | |
| ballmove() | |
| } | |
| gogo(100) | |
| // function drawcrc() { | |
| // // ctx.fillStyle = 'rgba(255,255,255,0.3)'; | |
| // // ctx.fillRect(0, 0, canvs.width, canvs.height); | |
| // ctx.clearRect(0, 0, canvs.width, canvs.height); | |
| // var nball = new ball(); | |
| // nball.draw(); | |
| // window.requestAnimationFrame(drawcrc) | |
| // } | |
| // drawcrc(); | |
| </script> | |
| </body> | |
| </html> |
