原生js实现移动小球（碰撞检测）

本文实例为大家分享了js实现移动小球的具体代码，供大家参考，具体内容如下

</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;

 //根据浏览器窗口的大小自动调节小球的运动空间
 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();
 //数组对象的初始化
 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之间的移动速度（如果设置的改变速度太大，容易造成小球碰撞时两个小球之间有重合，也有可能小球会出界）
  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;//小球背景颜色初始化
 }
 //碰撞函数
 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){
    //小球位置的判断，发生碰撞反应
     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;
      }
     }
    }
   }

  }
 }
 //移动函数
 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;//小球运动方向发生改变
    }
   }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;//小球每一次运动圆心都会发生改变
   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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于javascript实现碰撞检测

    本文实例为大家分享了javascript实现碰撞检测的具体代码,供大家参考,具体内容如下 <html> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;} #div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:2

  • javascript实现多边形碰撞检测

    javascript多边形碰撞检测 原理就是 循环每个顶点判断是不是在多边形内 const app = new PIXI.Application({ antialias: true }); document.body.appendChild(app.view); const graphics = new PIXI.Graphics(); // draw polygon const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];

  • javascript制作游戏开发碰撞检测的封装代码

    javascript制作游戏开发碰撞检测的封装代码

    在JavaScript开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;

  • js实现碰撞检测

    js实现碰撞检测

    本文实例为大家分享了js实现碰撞检测的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

  • 原生js实现碰撞检测

    本文实例为大家分享了js实现碰撞检测的具体代码,供大家参考,具体内容如下 随手写了个简单的碰撞检测的代码.检测box1和box2是否发生碰撞,若发生碰撞,box2颜色发生随机改变,并反弹到随机位置. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .

  • js实现拖拽与碰撞检测

    本文实例为大家分享了js实现拖拽与碰撞检测的具体代码,供大家参考,具体内容如下 拖拽 原理分析 对于拖拽一个div盒子,首先我们需要将鼠标移动到盒子上,然后按住鼠标左键,移动鼠标到目标位置,再松开鼠标,对于这一过程的分析, 显然需要三个鼠标事件: 按住鼠标:onmousedown 移动鼠标:onmousemove 松开鼠标:onmouseup 实现步骤 1.**鼠标按下时:**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离,分别减去盒子距离页面左边界与上边界的值,这样我们 就得到了鼠标距

  • js实现碰撞检测特效代码分享

    自己做了碰撞检测的封装,先看下实例demo,在看封装 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>碰撞检测</title> <style type="text/css"> *{ margin: 0; padding: 0; } #divA,#divB{ width: 200px; height: 200px;

  • three.js利用射线Raycaster进行碰撞检测

    本文实例为大家分享了利用射线Raycaster进行碰撞检测的具体代码,供大家参考,具体内容如下 学习碰撞检测之前,我们先了解一下Raycaster类 Raycaster 应该翻译为"光线投射",顾名思义,就是投射出去的一束光线. Raycaster的构造函数如下 Raycaster( origin, direction, near, far ) { origin - 射线的起点向量. direction - 射线的方向向量,应该归一化. near - 所有返回的结果应该比 near 远

  • js 实现碰撞检测的示例

    碰撞检测 目录 代码实例 与简易拖拽的差异 下载源码链接 代码实例 <div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;z-index: 999;"></div> <div id="box2" style="background: green;width: 100px

  • JS实现碰撞检测的方法分析

    JS实现碰撞检测的方法分析

    本文实例讲述了JS实现碰撞检测的方法.分享给大家供大家参考,具体如下: 一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色,看测试图 看一下分析图: 当div1在div2的上边线(t2)以上的区域活动时,始终碰不上 当div1在div2的右边线(r2)以右的区域活动时,始终碰不上 当div1在div2的下边线(b2)以下的区域活动时,始终碰不上 当div1在div2的左边线(r2)以左的区域活动时,始终碰不上 除了以上四种情况,其他情况表示d

  • 原生JS实现的碰撞检测功能示例

    原生JS实现的碰撞检测功能示例

    本文实例讲述了原生JS实现的碰撞检测功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS碰撞检测</title> <style> div{width:100px; height:100px; } #box{background:red; position:absolu

随机推荐