原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例
更新時(shí)間：2018年01月31日 13:42:11 作者：motokay
這篇文章主要介紹了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)小球碰撞的相關(guān)數(shù)值計(jì)算、隨機(jī)數(shù)生成、事件響應(yīng)等操作技巧,需要的朋友可以參考下
本文實(shí)例講述了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)思路：小球的移動，是通過改變小球的left和top值來改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級的寬度或者高度時(shí)，使x值或者y值減小，同理當(dāng)x值或者y值減到最小時(shí)，同樣的使x值或者y值增加，以上的思路可以實(shí)現(xiàn)小球的碰壁反彈
小球與小球之間的碰撞，要判斷小球在被撞小球的哪個(gè)方向，從而判斷小球該向哪個(gè)方向移動，同樣的改變小球的坐標(biāo)值，來實(shí)現(xiàn)小球的反彈
實(shí)現(xiàn)代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>小球碰撞</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
height: 800px;
width: 1300px;
border: 1px solid red;
/*小球設(shè)置相對定位*/
position: relative;
margin: 0 auto;
overflow: hidden;
}
p {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 25px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<!--<script src="js/common.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
/**
* 生成并返回一個(gè)從m到n全區(qū)間的隨機(jī)數(shù)
* @param {Object} m
* @param {Object} n
*/
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m + 1) + m);
}
/**
* 生成一個(gè)隨機(jī)顏色，并返回rgb字符串值
*/
function randomColor() {
var r = randomNum(0, 255);
var g = randomNum(0, 255);
var b = randomNum(0, 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
//獲得wrapDiv
var wrapDiv = document.getElementById("wrap");
//定義數(shù)組存儲所有的小球
var balls = [];
//生成小球函數(shù)
function createBalls() {
for (var i = 0; i < 20; i++) {
var ball = document.createElement("p");
//隨機(jī)小球起始的X坐標(biāo)和小球的Y坐標(biāo)
ball.x = randomNum(0, 1200);
ball.y = randomNum(0, 700);
//隨機(jī)小球的移動速度
ball.speed = randomNum(2, 5);
//隨機(jī)小球移動的方向
if (Math.random() - 0.5 > 0) {
ball.xflag = true;
} else {
ball.xflag = false;
}
if (Math.random() - 0.5 > 0) {
ball.yflag = true;
} else {
ball.yflag = false;
}
//隨機(jī)小球的背景顏色
ball.style.backgroundColor = randomColor();
ball.innerHTML = i + 1;
//將小球插入當(dāng)wrapDiv中
wrapDiv.appendChild(ball);
//將所有的小球存儲到數(shù)組中
balls.push(ball);
}
}
createBalls();
//小球移動函數(shù)，判斷小球的位置
function moveBalls(ballObj) {
setInterval(function() {
ballObj.style.top = ballObj.y + "px";
ballObj.style.left = ballObj.x + "px";
//判斷小球的標(biāo)志量，對小球作出相應(yīng)操作
if (ballObj.yflag) {
//小球向下移動
ballObj.y += ballObj.speed;
if (ballObj.y >= 800 - ballObj.offsetWidth) {
ballObj.y = 800 - ballObj.offsetWidth;
ballObj.yflag = false;
}
} else {
//小球向上移動
ballObj.y -= ballObj.speed;
if (ballObj.y <= 0) {
ballObj.y = 0;
ballObj.yflag = true;
}
}
if (ballObj.xflag) {
//小球向右移動
ballObj.x += ballObj.speed;
if (ballObj.x >= 1300 - ballObj.offsetHeight) {
ballObj.x = 1300 - ballObj.offsetHeight;
ballObj.xflag = false;
}
} else {
//小球向左移動
ballObj.x -= ballObj.speed;
if (ballObj.x <= 0) {
ballObj.x = 0;
ballObj.xflag = true;
}
}
crash(ballObj);
}, 10);
}
var x1, y1, x2, y2;
//碰撞函數(shù)
function crash(ballObj) {
//通過傳過來的小球?qū)ο髞慝@取小球的X坐標(biāo)和Y坐標(biāo)
x1 = ballObj.x;
y1 = ballObj.y;
for (var i = 0; i < balls.length; i++) {
//確保不和自己對比
if (ballObj != balls[i]) {
x2 = balls[i].x;
y2 = balls[i].y;
//判斷位置的平方和小球的圓心坐標(biāo)的關(guān)系
if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) {
//判斷傳過來的小球?qū)ο螅鄬τ谂鲎残∏虻哪膫€(gè)方位
if (ballObj.x < balls[i].x) {
if (ballObj.y < balls[i].y) {
//小球?qū)ο笤诒慌鲂∏虻淖笊辖?
ballObj.yflag = false;
ballObj.xflag = false;
} else if (ballObj.y > balls[i].y) {
//小球?qū)ο笤诒慌鲂∏虻淖笙陆?
ballObj.xflag = false;
ballObj.yflag = true;
} else {
//小球?qū)ο笤诒蛔残∏虻恼蠓?
ballObj.xflag = false;
}
} else if (ballObj.x > balls[i].x) {
if (ballObj.y < balls[i].y) {
//小球?qū)ο笤诒慌鲎残∏虻挠疑戏?
ballObj.yflag = false;
ballObj.xflag = true;
} else if (ballObj.y > balls[i].y) {
//小球?qū)ο笤诒慌鲎残∏虻挠蚁路?
ballObj.xflag = true;
ballObj.yflag = true;
} else {
//小球?qū)ο笤诒蛔残∏虻恼曳?
ballObj.xflag = true;
}
} else if (ballObj.y > balls[i].y) {
//小球?qū)ο笤诒蛔残∏虻恼路?
ballObj.yflag = true;
} else if (ballObj.y < balls[i].y) {
//小球?qū)ο笤诒蛔残∏虻恼戏?
ballObj.yflag = false;
}
}
}
}
}
for (var i = 0; i < balls.length; i++) {
//將所有的小球傳到函數(shù)中,來實(shí)現(xiàn)對小球的移動
moveBalls(balls[i]);
}
</script>
</html>
運(yùn)行效果：
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法
這篇文章主要介紹了Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法,可實(shí)現(xiàn)雪花飄落及散開的效果,非常炫目華麗,需要的朋友可以參考下2015-02-02
JavaScript使用prototype定義對象類型(轉(zhuǎn))[
JavaScript使用prototype定義對象類型(轉(zhuǎn))[...2006-12-12
檢查對象類型的一種方式是參考所有JavaScript對象所共有的一個(gè)稱為constructor的屬性。該屬性是對一個(gè)最初用來構(gòu)造此對象的函數(shù)的引用。2010-10-10
微信小程序基于高德地圖API實(shí)現(xiàn)天氣組件(動態(tài)效果)
這篇文章主要介紹了微信小程序基于高德地圖API實(shí)現(xiàn)天氣組件(動態(tài)效果)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-10-10
本文是腳本之家小編日常整理的關(guān)于javascript知識點(diǎn)，包括javascript擁有的特點(diǎn)，組成部分，數(shù)據(jù)類型等方面，對javascript知識點(diǎn)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
inner join 內(nèi)聯(lián)與left join 左聯(lián)的實(shí)例代碼
這篇文章主要介紹了inner join 內(nèi)聯(lián)與left join 左聯(lián)的實(shí)例代碼,需要的朋友可以參考下2017-09-09
javascript實(shí)現(xiàn)保留兩位小數(shù)的多種方法
這篇文章主要介紹了javascript實(shí)現(xiàn)保留兩位小數(shù)的多種方法，如果數(shù)字的原本小數(shù)位數(shù)不到兩位，那么缺少的就自動補(bǔ)零，感興趣的小伙伴們可以參考一下2015-12-12
ES6不僅在語法上有很大的改進(jìn),在代碼的組織結(jié)構(gòu)上也有重大升級,下面這篇文章主要給大家介紹了關(guān)于ES6的一些實(shí)用高級技巧的相關(guān)資料,需要的朋友可以參考下2023-12-12
微信小程序返回箭頭跳轉(zhuǎn)到指定頁面實(shí)例解析
這篇文章主要介紹了微信小程序返回箭頭跳轉(zhuǎn)到指定頁面實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了微信小程序視圖控件與bindtap之間的問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04