小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色。 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹。 小球是采用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; | |
width: 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> |