<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="utf-8"> <title>小球碰撞</title> <style type="text/css"> .center{width:400px;text-align: center;margin: 0 auto;} #wrapper{position:relative;width:400px;height:400px;box-shadow: 0px 0px 3px #333 inset;background: #666;} .ball{position:absolute;width:20px;height:20px;border-radius: 10px;background:#fff;box-shadow: 2px 2px 2px #666;visibility: hidden;} </style> <script type="text/javascript"> //下次加小球碰撞 var speed = 5; var seq = 0; var boundary = null; var interval; var balls = []; var colors = ['rgba(0,0,240,0.8)', 'rgba(0,0,240,0.7)', 'rgba(0,0,240,0.6)', 'rgba(0,0,240,0.5)', 'rgba(0,0,240,0.4)', 'rgba(0,0,240,0.3)', 'rgba(0,0,240,0.2)']; var GeneralObject = function(){ this.x = null; this.y = null; this.width = 0; this.height = 0; this.dom = null; }; function Ball(id){ this.dom = document.getElementById(id); this.x = null; this.y = null; this.width = this.dom.offsetWidth; this.height = this.dom.offsetHeight; this.hspeed = 2*speed * (Math.floor(Math.random() * 10) + 1)/10; this.vspeed = 2*speed * (Math.floor(Math.random() * 10) + 1)/10; }; Ball.prototype = new GeneralObject(); function Boundary(id){ this.dom = document.getElementById(id); this.width = this.dom.offsetWidth; this.height = this.dom.offsetHeight; }; Boundary.prototype = new GeneralObject(); function init(){ var ball = new Ball('ball'); boundary = new Boundary('wrapper'); ball.dom.style.left = Math.random()*(boundary.width - ball.width) + 'px'; ball.x = parseInt(ball.dom.style.left); ball.dom.style.top = Math.random()*(boundary.height - ball.height) + 'px'; ball.y = parseInt(ball.dom.style.top); ball.dom.style.visibility = 'visible'; balls.push(ball); interval = setInterval(function(){ go(balls, boundary); }, 20); } function go(balls, boundary){ for(var i = 0; i < balls.length; i++){ balls[i].dom.style.left = balls[i].x + balls[i].hspeed + 'px'; balls[i].x = parseInt(balls[i].dom.style.left); balls[i].dom.style.top = balls[i].y + balls[i].vspeed + 'px'; balls[i].y = parseInt(balls[i].dom.style.top); hitTest(balls[i], boundary); //得保证生成小球的地方没有已存在的小球与之重叠，现在还没有做到 // if(i >= 1){ // for(var j = i-1; j >= 0; j--){ // hitBall(balls[i], balls[j]); // } // } } } function hitTest(ball, boundary){ if(ball.y + ball.height >= boundary.height || ball.y + ball.height + ball.vspeed > boundary.height){ ball.vspeed = -ball.vspeed; } if(ball.x + ball.width >= boundary.width || ball.x + ball.width + ball.hspeed > boundary.width){ ball.hspeed = -ball.hspeed; } if(ball.y <= 0 || ball.y + ball.vspeed < 0){ ball.vspeed = -ball.vspeed; } if(ball.x <= 0 || ball.x + ball.hspeed < 0){ ball.hspeed = -ball.hspeed; } } function hitBall(ballA, ballB){ if(CheckIntersect(ballA, ballB)){ //简单处理为交换速度 var temp; temp = ballA.vspeed; ballA.vspeed = ballB.vspeed; ballB.vspeed = temp; temp = ballA.hspeed; ballA.hspeed = ballB.hspeed; ballB.hspeed = temp; } } //圆形碰撞检测与方形碰撞检测原理不一样 function CheckIntersect(ball1, ball2){ var p1 = {};//提取出去作为ball的属性，在这个被循环调用的函数里面新建对象不好 p1.x = ball1.x + ball1.width/2; p1.x1 = ball1.x + ball1.width/2 + ball1.hspeed; p1.y = ball1.y + ball1.height/2; p1.y1 = ball1.y + ball1.height/2 + ball1.vspeed; var p2 = {}; p2.x = ball2.x + ball2.width/2; p2.x1 = ball2.x + ball2.width/2 + ball2.hspeed; p2.y = ball2.y + ball2.height/2; p2.y1 = ball2.y + ball2.height/2 + ball2.vspeed; if(Math.pow((p1.x-p2.x),2) + Math.pow((p1.y-p2.y),2) <= Math.pow((ball1.width/2 + ball2.width/2),2) || Math.pow((p1.x1-p2.x1),2) + Math.pow((p1.y1-p2.y1),2) <= Math.pow((ball1.width/2 + ball2.width/2),2)){ return true; } return false; } function addEvent(){ var addBtn = document.getElementById('add'); addBtn.onclick = function(){ var newdom = document.createElement('div'); newdom.setAttribute('id','ball_'+ seq); newdom.setAttribute('class','ball'); document.getElementById('wrapper').appendChild(newdom); var newBall = new Ball('ball_'+seq); //小球出现的地方不能是和边界重叠，不能和已存在的小球重叠，这里还没有办法做 //小球出现的点随机 // newBall.dom.style.left = Math.floor(Math.random()*(boundary.width - 2*newBall.width) + newBall.width) + 'px'; // newBall.x = parseInt(newBall.dom.style.left); // newBall.dom.style.top = Math.floor(Math.random()*(boundary.height - 2*newBall.height) + newBall.height) + 'px'; // newBall.y = parseInt(newBall.dom.style.top); //小球出现的点固定 newBall.dom.style.left = 0 + 'px'; newBall.x = 0; newBall.dom.style.top = newBall.dom.style.left; newBall.y = newBall.x; newBall.dom.style.visibility = 'visible'; newBall.dom.style.background = colors[(Math.floor(Math.random() * colors.length) + 1)]; balls.push(newBall); seq++; clearInterval(interval);//经过证明，一个页面可以有多个setInterval（定时器），这样省却了再interval里遍历数组的麻烦，但系统却要维护多个定时器，哪种办法更好些呢？ /* 以下内容来自网络，未亲测。 关于游戏中的定时器的设计有以下两种争议： 1) 每个需要定时器的地方都创建一个，然后问题归结为多个定时器的管理问题； 2) 游戏中只有一个定时器，然后问题归结为一个定时器实现多个定时器的效果。 实际从管理难度以及运行效率上来讲应该选择第2种。 */ interval = setInterval(function(){ go(balls, boundary); }, 20); } } window.onload = function(){ init(); addEvent(); } </script> </head> <body> <div class="center"> <div id="wrapper"> <div id="ball" class="ball"></div> </div> <div style="text-align:left;"><button id="add">add</button></div> </div> </body> </html>