快捷導(dǎo)航

原生js實現(xiàn)移動小球（碰撞檢測）

更新時間：2020年12月17日 10:56:18 作者：可樂油條

這篇文章主要介紹了原生js實現(xiàn)會動的小球，碰撞檢測功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)移動小球的具體代碼，供大家參考，具體內(nèi)容如下

</head>
<style>
 *{margin: 0;
  padding:0;}
 #main{margin: 0px auto;position: relative;}
 #main div{overflow: hidden;position: absolute;width: 50px;height: 50px;opacity: 0.5;
  -moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;}
</style>
<body>
 <div id="main">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

 <script>
 var main = document.getElementById('main');
 var circles = main.getElementsByTagName('div');
 var st = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
 var json = [],arr=[],color = [];
 var maxW = 0;
 var maxH = 0;
 var cwidth = circles[0].offsetWidth;
 var cheight = circles[0].offsetHeight;

 //根據(jù)瀏覽器窗口的大小自動調(diào)節(jié)小球的運動空間
 window.onresize=function(){
  var main = document.getElementById('main');
  maxW=window.innerWidth-circles[0].clientWidth;
  maxH=window.innerHeight-circles[0].clientHeight;
  main.style.width = window.innerWidth+'px';
  main.style.height = window.innerHeight+'px';

 }
 onresize();
 //數(shù)組對象的初始化
 for(var i=0;i<circles.length;i++){
  arr=[];
  for(var j=0;j<6;j++){
   color[j] = st[Math.floor(Math.random()*16)];
  }
  arr.x = Math.floor(Math.random()*(maxW+1));//初始x坐標
  arr.y = Math.floor(Math.random()*(maxH+1));//初始y坐標
  arr.cx = arr.x + circles[0].offsetWidth/2; //圓心x坐標
  arr.cy = arr.y + circles[0].offsetHeight/2;//圓心y坐標
  arr.movex = Math.floor(Math.random()*2);//x軸移動方向
  arr.movey = Math.floor(Math.random()*2);//y軸移動方向
  arr.bgolor = '#'+ color.join('');//隨機生成一個6位字符串
  arr.speed = 2+Math.floor(Math.random()*5);
  //隨機生成一個2~6之間的移動速度（如果設(shè)置的改變速度太大，容易造成小球碰撞時兩個小球之間有重合，也有可能小球會出界）
  arr.timer = null;//計時器
  arr.index = i;//索引值
  json.push(arr);
  circles[i].style.left = arr.x + 'px';//小球位置初始化
  circles[i].style.top = arr.y + 'px';//小球位置初始化
  circles[i].style.backgroundColor = arr.bgolor;//小球背景顏色初始化
 }
 //碰撞函數(shù)
 function crash(a){
  var ball1x = json[a].cx;
  var ball1y = json[a].cy;
  for(var i= 0;i<json.length;i++){
   if(i!=a){
    var ball2x = json[i].cx;
    var ball2y = json[i].cy;
    //圓心距離的平方
    var len = (ball1x-ball2x)*(ball1x-ball2x)+(ball1y-ball2y)*(ball1y-ball2y);
    if(len <= cwidth*cwidth){
    //小球位置的判斷，發(fā)生碰撞反應(yīng)
     if(ball1x >ball2x){
      if(ball1y > ball2y){
       json[a].movex=1;
       json[a].movey=1;
      }else if(ball1y < ball2y){
       json[a].movex=1;
       json[a].movey=0;
      }else{
       json[a].movex=1;
      }
     }else if(ball1x < ball2x){
      if(ball1y > ball2y){
       json[a].movex=0;
       json[a].movey=0;
      }else if(ball1y < ball2y){
       json[a].movex=0;
       json[a].movey=1;
      }else{
       json[a].movex=0;
      }
     }else{
      if(ball1y > ball2y){
       json[a].movey=1;
      }else if(ball1y < ball2y){
       json[a].movey=0;
      }
     }
    }
   }

  }
 }
 //移動函數(shù)
 function move(circle){
  circle.timer = setInterval(function () {
   if(circle.movex == 1){
    circle.x+=circle.speed;
    if(circle.x+circle.speed >= maxW){//防止小球出界
     circle.x = maxW;
     circle.movex=0;//小球運動方向發(fā)生改變
    }
   }else{
    circle.x-=circle.speed;
    if(circle.x-circle.speed <= 0){
     circle.x = 0;
     circle.movex=1;
    }
   }
   if(circle.movey == 1){
    circle.y += circle.speed;
    if(circle.y+circle.speed >= maxH){
     circle.y = maxH;
     circle.movey=0;
    }
   }else{
    circle.y-=circle.speed;
    if(circle.y-circle.speed <= 0){
     circle.y = 0;
     circle.movey=1;
    }
   }
   circle.cx = circle.x + circles[0].offsetWidth/2;//小球每一次運動圓心都會發(fā)生改變
   circle.cy = circle.y + circles[0].offsetHeight/2;
   circles[circle.index].style.left = circle.x + 'px';//小球位置重定位
   circles[circle.index].style.top = circle.y + 'px';
   /*console.log('x'+circle.cx+'y'+circle.cy);*/
   crash(circle.index);
  },16);
 }
 //對每一個小球綁定計時器，讓小球動起來
 for(var i=0;i<circles.length;i++){
  move(json[i]);
 }
</script>
</body>

效果圖：