javascript實現10個球隨機運動、碰撞實例詳解_javascript技巧
- WBOY原創
- 2016-05-16 15:51:002100瀏覽
本文實例講述了javascript實現10個球隨機運動、碰撞的方法。分享給大家供大家參考。具體如下：
學了一段時間的javascript了，做過一些小案例，目前最有難度的就是10個小球隨機碰撞效果，這不，把它上上來與大家分享一下，相信不少和我一樣的菜鳥在開始上手編程時都會有不少的困惑，希望它能給一些人帶來幫助。
效果需求：10個小球在頁面隨機移動，碰到視窗邊界或其他小球都會反彈
思路：
1、10個小球是10個div;
2.碰觸視窗反彈，定義vx vy為小球的移動變量，以及一個彈力變量bounce(負值),小球碰窗口邊界時，vx vy分別乘以bounce，則改變了小球移動方向
3.小球相碰反彈，說簡單點，當兩個小球的圓心距變數dist小於其最小值（半徑之和）則改變球的移動方向，實現反彈
好了，程式碼如下：
html和js是分開的檔案喲
test.html檔案如下：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:0;
padding:0;
text-align: center;
}
#screen { width: 800px; height: 640px; position: relative; background: #ccccff;margin: 0 auto;vertical-align: bottom}
#inner { position: absolute; left:0px; top:0px; width:100%; height:100%; }
#screen p {color:white;font:bold 14px;}
.one { background-image:url('bubble.png'); background-position: -66px -58px; }
.two { background-image:url('bubble.png'); background-position: -66px -126px;}
.three { background-image:url('bubble.png'); background-position: -66px -194px; }
.four { background-image:url('bubble.png'); background-position: -66px -263px; }
.five { background-image:url('bubble.png'); background-position: -66px -331px; }
.six { background-image:url('bubble.png'); background-position: -66px -399px; }
.seven { background-image:url('bubble.png'); background-position: -66px -194px; }
.eight { background-image:url('bubble.png'); background-position: -66px -263px; }
.nine { background-image:url('bubble.png'); background-position: -66px -331px; }
.ten{ background-image:url('bubble.png'); background-position: -66px -399px; }
</style>
</head>
<body>
<div id="screen" >
<p>hi test it!</p>
<div id="inner"></div>
</div>
<input type="button" id="start" value="start" >
<input type="button" id="stop" value="stop">
<br><br><br>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
test.js檔案如下：
var getFlag=function (id) {
return document.getElementByIdx_x(id); //获取元素引用
}
var extend=function(des, src) {
for (p in src) {
des[p]=src[p];
}
return des;
}
var clss=['one','two','three','four','five','six','seven','eight','nine','ten'];
var Ball=function (diameter,classn) {
var ball=document.createElement_x("div");
ball.className=classn;
with(ball.style) {
width=height=diameter+'px';position='absolute';
}
return ball;
}
var Screen=function (cid,config) {
//先创建类的属性
var self=this;
if (!(self instanceof Screen)) {
return new Screen(cid,config)
}
config=extend(Screen.Config, config) //configj是extend类的实例
self.container=getFlag(cid); //窗口对象
self.ballsnum=config.ballsnum;
self.diameter=56; //球的直径
self.radius=self.diameter/2;
self.spring=config.spring; //球相碰后的反弹力
self.bounce=config.bounce; //球碰到窗口边界后的反弹力
self.gravity=config.gravity; //球的重力
self.balls=[]; //把创建的球置于该数组变量
self.timer=null; //调用函数产生的时间id
self.L_bound=0; //container的边界
self.R_bound=self.container.clientWidth;
self.T_bound=0;
self.B_bound=self.container.clientHeight;
};
Screen.Config={ //为属性赋初值
ballsnum:10,
spring:0.8,
bounce:-0.9,
gravity:0.05
};
Screen.prototype={
initialize:function () {
var self=this;
self.createBalls();
self.timer=setInterval(function (){self.hitBalls()}, 30)
},
createBalls:function () {
var self=this, num=self.ballsnum;
var frag=document.createDocumentFragment(); //创建文档碎片，避免多次刷新
for (i=0;i<num;i++) {
var ball=new Ball(self.diameter,clss[ Math.floor(Math.random()* num )]);
ball.diameter=self.diameter;
ball.radius=self.radius;
ball.style.left=(Math.random()*self.R_bound)+'px'; //球的初始位置，
ball.style.top=(Math.random()*self.B_bound)+'px';
ball.vx=Math.random() * 6 -3;
ball.vy=Math.random() * 6 -3;
frag.appendChild(ball);
self.balls[i]=ball;
}
self.container.appendChild(frag);
},
hitBalls:function () {
var self=this, num=self.ballsnum,balls=self.balls;
for (i=0;i<num-1;i++) {
var ball1=self.balls[i];
ball1.x=ball1.offsetLeft+ball1.radius; //小球圆心坐标
ball1.y=ball1.offsetTop+ball1.radius;
for (j=i+1;j<num;j++) {
var ball2=self.balls[j];
ball2.x=ball2.offsetLeft+ball2.radius;
ball2.y=ball2.offsetTop+ball2.radius;
dx=ball2.x-ball1.x; //两小球圆心距对应的两条直角边
dy=ball2.y-ball1.y;
var dist=Math.sqrt(dx*dx + dy*dy); //两直角边求圆心距
var misDist=ball1.radius+ball2.radius; //圆心距最小值
if(dist < misDist) {
//假设碰撞后球会按原方向继续做一定的运动，将其定义为运动A
var angle=Math.atan2(dy,dx);
//当刚好相碰，即dist=misDist时，tx=ballb.x, ty=ballb.y
tx=balla.x+Math.cos(angle) * misDist;
ty=balla.y+Math.sin(angle) * misDist;
//产生运动A后，tx > ballb.x, ty > ballb.y,所以用ax、ay记录的是运动A的值
ax=(tx-ballb.x) * self.spring;
ay=(ty-ballb.y) * self.spring;
//一个球减去ax、ay，另一个加上它，则实现反弹
balla.vx-=ax;
balla.vy-=ay;
ballb.vx+=ax;
ballb.vy+=ay;
}
}
}
for (i=0;i<num;i++) {
self.moveBalls(balls[i]);
}
},
moveBalls:function (ball) {
var self=this;
ball.vy+=self.gravity;
ball.style.left=(ball.offsetLeft+ball.vx)+'px';
ball.style.top=(ball.offsetTop+ball.vy)+'px';
//判断球与窗口边界相碰，把变量名简化一下
var L=self.L_bound, R=self.R_bound, T=self.T_bound, B=self.B_bound, BC=self.bounce;
if (ball.offsetLeft < L) {
ball.style.left=L;
ball.vx*=BC;
}
else if (ball.offsetLeft + ball.diameter > R) {
ball.style.left=(R-ball.diameter)+'px';
ball.vx*=BC;
}
else if (ball.offsetTop < T) {
ball.style.top=T;
ball.vy*=BC;
}
if (ball.offsetTop + ball.diameter > B) {
ball.style.top=(B-ball.diameter)+'px';
ball.vy*=BC;
}
}
}
window.onload=function() {
var sc=null;
getFlag('start').onclick=function () {
document.getElementByIdx_x("inner").innerHTML='';
sc=new Screen('inner',{ballsnum:10, spring:0.8, bounce:-0.9, gravity:0.05});
sc.initialize();
}
getFlag('stop').onclick=function() {
clearInterval(sc.timer);
}
}
測試後的效果還是很不錯的，各位也許會覺得程式碼挺長，但是其思路還蠻清晰的：
首先創建Screen類，並在Screen的構造函數中給出了球移動、碰撞所需的各種屬性變量，如ballsnum、spring、bounce、gravity等等
然後用原型prototype給出對應的函數，如創建球，createBalls，球碰撞hitBalls，球移動moveBalls，給每個函數添加對應的功能、
最後用按鈕點擊事件呼叫函數，僅此而已。
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn