原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:20:37

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例:本文實(shí)例講述了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果。分享給大家供大家參考，具體如下：實(shí)現(xiàn)思路：小球的移動(dòng)，是通過(guò)改變小球的left和top值來(lái)改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級(jí)的寬度或者高度時(shí)，使x值或者y值減小，同理當(dāng)x值或者y值減到最小

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例:本文實(shí)例講述了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果。分享給大家供大家參考，具體如下：實(shí)現(xiàn)思路：小球的移動(dòng)，是通過(guò)改變小球的left和top值來(lái)改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級(jí)的寬度或者高度時(shí)，使x值或者y值減小，同理當(dāng)x值或者y值減到最小

本文實(shí)例講述了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果。分享給大家供大家參考，具體如下：

實(shí)現(xiàn)思路：小球的移動(dòng)，是通過(guò)改變小球的left和top值來(lái)改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級(jí)的寬度或者高度時(shí)，使x值或者y值減小，同理當(dāng)x值或者y值減到最小時(shí)，同樣的使x值或者y值增加，以上的思路可以實(shí)現(xiàn)小球的碰壁反彈

小球與小球之間的碰撞，要判斷小球在被撞小球的哪個(gè)方向，從而判斷小球該向哪個(gè)方向移動(dòng)，同樣的改變小球的坐標(biāo)值，來(lái)實(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è)置相對(duì)定位*/
 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ù)組存儲(chǔ)所有的小球
 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ī)小球的移動(dòng)速度
 ball.speed = randomNum(2, 5);
 //隨機(jī)小球移動(dòng)的方向
 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);
 //將所有的小球存儲(chǔ)到數(shù)組中
 balls.push(ball);
 }
 }
 createBalls();
 //小球移動(dòng)函數(shù)，判斷小球的位置
 function moveBalls(ballObj) {
 setInterval(function() {
 ballObj.style.top = ballObj.y + "px";
 ballObj.style.left = ballObj.x + "px";
 //判斷小球的標(biāo)志量，對(duì)小球作出相應(yīng)操作
 if (ballObj.yflag) {
 //小球向下移動(dòng)
 ballObj.y += ballObj.speed;
 if (ballObj.y >= 800 - ballObj.offsetWidth) {
 ballObj.y = 800 - ballObj.offsetWidth;
 ballObj.yflag = false;
 }
 } else {
 //小球向上移動(dòng)
 ballObj.y -= ballObj.speed;
 if (ballObj.y <= 0) {
 ballObj.y = 0;
 ballObj.yflag = true;
 }
 }
 if (ballObj.xflag) {
 //小球向右移動(dòng)
 ballObj.x += ballObj.speed;
 if (ballObj.x >= 1300 - ballObj.offsetHeight) {
 ballObj.x = 1300 - ballObj.offsetHeight;
 ballObj.xflag = false;
 }
 } else {
 //小球向左移動(dòng)
 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) {
 //通過(guò)傳過(guò)來(lái)的小球?qū)ο髞?lái)獲取小球的X坐標(biāo)和Y坐標(biāo)
 x1 = ballObj.x;
 y1 = ballObj.y;
 for (var i = 0; i < balls.length; i++) {
 //確保不和自己對(duì)比
 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)) {
 //判斷傳過(guò)來(lái)的小球?qū)ο螅鄬?duì)于碰撞小球的哪個(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ù)中,來(lái)實(shí)現(xiàn)對(duì)小球的移動(dòng)
 moveBalls(balls[i]);
 }
 </script>
</html>

運(yùn)行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：效果實(shí)例原生js實(shí)現(xiàn)

熱門焦點(diǎn)

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例

最新推薦

猜你喜歡

熱門推薦