<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>躁动的小球</title>
<style media="screen">
*{
margin: 0px;
padding: 0px;
}
#canvas{
box-shadow: 0px 0px 10px black;
display: block;
margin: 50px auto;
background: black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//随机函数
function randomSize(min,max){
return Math.floor(Math.random()*(max -min)+min);
}
// function randomColor(){
// var r = randomSize(0,255);
// var g = randomSize(0,255);
// var b = randomSize(0,255);
// return "rgb(" + r +"," + g + "," + b +")";
// }
//创建小球对象
function Ball(){
var speedX,speedY;
//速度
speedX = randomSize(1,3);
speedY = randomSize(1,3);
//半径
this.r = randomSize(5,8);
//圆心
this.x = randomSize(this.r,canvas.width-this.r);
this.y = randomSize(this.r,canvas.height -this.r);
//方向
this.speedX = randomSize(1,3) == 1 ? speedX : -speedX;
this.speedY = randomSize(1,3) == 1 ? speedY : -speedY;
//颜色
this.color = "green";
}
//定义方法绘制小球
Ball.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,360);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
//定义方法完成小球的移动
Ball.prototype.move = function (){
//改变中心的的x,y
this.x+=this.speedX;
this.y +=this.speedY;
//进行边界判断
if (this.x >=canvas.width-this.r) {
this.speedX *=-1;
} else if (this.x <=this.r) {
this.speedX *=-1;
}
if (this.y >=canvas.height-this.r) {
this.speedY *=-1;
} else if (this.y <=this.r) {
this.speedY *=-1;
}
}
//生成小球对象
var balls = [];
for (var i = 0; i < 500; i++) {
var ball = new Ball();
balls.push(ball);
}
//定义以鼠标点为圆心的圆
//球形两两碰撞检测
function ArcCollision(e1,e2){
var lx = e1.x -e2.x;
var ly = e1.y -e2.y;
//球心距
var dis = Math.sqrt(Math.pow(lx,2)+Math.pow(ly,2));
//如果两个圆心距dis<50 就返回true
if (dis <= 50 ) {
return true;
}else {
return false;
}
}
//定义一个空数组存储当前满足条件的点
var circle = [];
//定义一个圆规定小球在此范围(以鼠标为中心的圆)内方可连线
var rs =150;
//画圆检测函数
function drawCircle(){
//每次调用之前清空数组;
circle = [];
for (var i = 0; i < balls.length; i++) {
var lx = balls[i].x -mousePoint.x;
var ly = balls[i].y -mousePoint.y;
//球心距
var dis = Math.sqrt(Math.pow(lx,2)+Math.pow(ly,2));
//如果两个圆心距dis<rs 就把该点放到数组中
if (dis <= rs ) {
circle.push(balls[i])
}
}
}
//检测划线函数
function collisionLine(balls){
for (var i = 0; i < balls.length; i++) {
for (var j = i+1; j < balls.length; j++) {
//进行距离检测
var result = ArcCollision(balls[i],balls[j]);
if (result) {
//画线函数
drawLine(balls[i],balls[j]);
}
}
}
};
//画线函数
function drawLine(startPoint,endPoint){
ctx.beginPath();
ctx.moveTo(startPoint.x,startPoint.y);
ctx.lineTo(endPoint.x,endPoint.y);
ctx.closePath();
ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.stroke();
}
//创建鼠标点的对象
function Point(x,y){
this.x = x;
this.y = y;
}
//创建鼠标的点对象 初始化
var mousePoint = new Point(canvas.width/2,canvas.height/2);
//事件处理函数
canvas.onmousemove = function(e){
var even = e || event;
mousePoint.x = even.clientX - canvas.offsetLeft;
mousePoint.y = even.clientY - canvas.offsetTop;
}
canvas.onmouseleave = function(){
mousePoint.x =canvas.width/2;
mousePoint.y =canvas.height/2;
}
//让小球躁动起来
function animation(){
//每次动起来之前,清除画布
ctx.clearRect(0,0,canvas.width,canvas.height);
//遍历小球数组,让每一个小球动起来
for (var i = 0; i < balls.length; i++) {
balls[i].move();
balls[i].draw();
};
drawCircle();
collisionLine(circle);
window.requestAnimationFrame(animation);
//调用检测画线函数
}
animation();
</script>
</html>
