原生js实现红球碰撞篮球效果
生活随笔
收集整理的這篇文章主要介紹了
原生js实现红球碰撞篮球效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.?屏幕中隨機(jī)產(chǎn)生n個(gè)藍(lán)色大小不一的氣泡，坐標(biāo)隨機(jī)
2.?紅色氣泡跟隨鼠標(biāo)移動(dòng)
3.?當(dāng)紅色氣泡會(huì)與藍(lán)色氣泡發(fā)生碰撞效果(類似桌球)?
4.?紅色氣泡會(huì)被屏幕邊緣阻擋
5.?藍(lán)色氣泡左右屏上下屏互通
6.?藍(lán)色氣泡的運(yùn)動(dòng)及互動(dòng)行為請(qǐng)自由發(fā)揮
HTML部分：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>上機(jī)</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];//創(chuàng)建籃球DOM var blueimg = document.createElement("img"); blueimg.setAttribute("src","./images/2.png"); blueimg.setAttribute("alt","籃球"); blueimg.setAttribute("class","blueBall");//藍(lán)色球數(shù)量最少8個(gè)最多16個(gè)； 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); }/* *設(shè)置球的大小 */ for (var i = 0; i < blueBall.length; i++) {let ballSize = hwsize();blueBall[i].style.width = ballSize + "px";blueBall[i].style.height = ballSize + "px"; }/* *隨機(jī)排序藍(lán)球 */ 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; }/* *紅球隨鼠標(biāo)移動(dòng) *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 *//* *實(shí)現(xiàn)藍(lán)色小球的碰撞 *code start */ function blueBoom(i){//獲取籃球相對(duì)瀏覽器的位置var blueX = blueBall[i].offsetLeft;var blueY = blueBall[i].offsetTop;//獲取紅球相對(duì)瀏覽器的位置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 小球移動(dòng)blueBall[i].style.top = 50 + "px";blueBall[i].style.left = 50 + "px";}return;}else{if(absY < blueBall[i].width){//code 小球移動(dòng)}return;} }return;}else{if(absX < blueBall[i].width){if(sizeY < 0 ){var absY = Math.abs(sizeY);if(absY < redBall.width){//code 小球移動(dòng)}return;}else{if(absY < blueBall[i].width){//code 小球移動(dòng)}return;}}return;}}代碼并為完成，但是大致思路就是這樣，只需要在我寫注釋的地方規(guī)定籃球的移動(dòng)軌跡即可。紅籃球圖片奉上總結(jié)
以上是生活随笔為你收集整理的原生js实现红球碰撞篮球效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Unity3D移动平台内存优化
- 下一篇： Go内核源码剖析 一 程序执行启动过程