原生js实现红球碰撞篮球效果
生活随笔
收集整理的這篇文章主要介紹了
原生js实现红球碰撞篮球效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.?屏幕中隨機產生n個藍色大小不一的氣泡，坐標隨機
2.?紅色氣泡跟隨鼠標移動
3.?當紅色氣泡會與藍色氣泡發生碰撞效果(類似桌球)?
4.?紅色氣泡會被屏幕邊緣阻擋
5.?藍色氣泡左右屏上下屏互通
6.?藍色氣泡的運動及互動行為請自由發揮
HTML部分：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>上機</title><link rel="stylesheet" href="./css/index.css"> </head> <body><div class="container"><img class = "redBall" src="./images/1.png" alt="紅球" width="100px" height="100px"><img class = "blueBall" src="./images/2.png" alt="籃球"></div><script src = "./js/index.js"></script> </body> </html>
CSS部分：
*{margin:0;padding: 0;
}
.container{width: 800px;height: 400px;position: relative;margin: 0 auto;border: 1px solid #ddd;overflow: hidden;
}
.blueBall{width: 80px;height: 80px;position: absolute;z-index: 1;transition: top 2s,left 2s;
}
.redBall{position: absolute;z-index: 2;
} js部分：
var blueBall = document.getElementsByClassName("blueBall"); var container = document.getElementsByClassName("container"); var redBall = document.getElementsByClassName("redBall")[0];//創建籃球DOM var blueimg = document.createElement("img"); blueimg.setAttribute("src","./images/2.png"); blueimg.setAttribute("alt","籃球"); blueimg.setAttribute("class","blueBall");//藍色球數量最少8個最多16個； var ballNum = Math.ceil(Math.random() * 8 + 8);for (var i = ballNum - 1; i >= 0; i--) {let oi = blueimg.cloneNode(true);container[0].appendChild(oi); }/* *設置球的大小 */ for (var i = 0; i < blueBall.length; i++) {let ballSize = hwsize();blueBall[i].style.width = ballSize + "px";blueBall[i].style.height = ballSize + "px"; }/* *隨機排序藍球 */ for (var i = 0; i < blueBall.length; i++) {blueBall[i].style.top = Math.ceil(Math.random() * 400) + "px";blueBall[i].style.left = Math.ceil(Math.random() * 800) + "px"; }//獲取籃球大小范圍為50-100 function hwsize() { return Math.ceil(Math.random() * 50) + 50; }/* *紅球隨鼠標移動 *code start */ container[0].addEventListener("mousemove",function(e){var redYX = redPositionX(e);redBall.style.left =redYX.x + "px";redBall.style.top = redYX.y + "px";for (let i = blueBall.length - 1; i >= 0; i--) {blueBoom(i);} });function redPositionX(e) {var redXY = {x: 0,y: 0 };var ok = e.clientX - container[0].offsetLeft - redBall.width/2;var yes = e.clientY - container[0].offsetTop - redBall.height/2;console.log(yes);if(ok < 0){redXY.x = 0;}else{if(ok > (800 - redBall.width)){redXY.x = 800 - redBall.width;}else{redXY.x = ok;}}if(yes < 0){redXY.y = 0;}else{if(yes > (400 - redBall.height)){redXY.y = 400 - redBall.height;}else{redXY.y = yes;}}return redXY; } /* *code end *//* *實現藍色小球的碰撞 *code start */ function blueBoom(i){//獲取籃球相對瀏覽器的位置var blueX = blueBall[i].offsetLeft;var blueY = blueBall[i].offsetTop;//獲取紅球相對瀏覽器的位置var redX = redBall.offsetLeft;var redY = redBall.offsetTop;sizeX = redX - blueX;sizeY = redY - blueY;if(sizeX < 0){var absX = Math.abs(sizeX);if(absX < redBall.width){if(sizeY < 0 ){var absY = Math.abs(sizeY);if(absY < redBall.width){//code 小球移動blueBall[i].style.top = 50 + "px";blueBall[i].style.left = 50 + "px";}return;}else{if(absY < blueBall[i].width){//code 小球移動}return;} }return;}else{if(absX < blueBall[i].width){if(sizeY < 0 ){var absY = Math.abs(sizeY);if(absY < redBall.width){//code 小球移動}return;}else{if(absY < blueBall[i].width){//code 小球移動}return;}}return;}}代碼并為完成，但是大致思路就是這樣，只需要在我寫注釋的地方規定籃球的移動軌跡即可。紅籃球圖片奉上總結
以上是生活随笔為你收集整理的原生js实现红球碰撞篮球效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Unity3D移动平台内存优化
- 下一篇： Go内核源码剖析 一 程序执行启动过程