Javascript 小球逃出大球

这是我正在努力做的事情。我想在圆上制造一个位置恒定的球，即不旋转。主要目的是从主球中逃出恒定球。如果从我的小提琴上旋转的主球碰到任何一个恒定的球，那么它应该结束。每一个球逃逸一分。我无法在圆上定位一个恒定的球。这是我喜欢做的一个例子

* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
/**
*在没有包装器元素的情况下循环移动
*由Aryeh Gregor提出的想法，由Lea Verou简化
*/
@关键帧腐烂{
从{
变换：旋转（0度）
翻译（-150px）
旋转（0度）；
}
到{
变换：旋转（360度）
翻译（-150px）
旋转（-360度）；
}
}
.圆圈{
边框：1px纯灰；
位置：相对位置；
宽度：300px；
高度：300px；
保证金：25像素自动；
边界半径：50%；
}
.蓝球{
宽度：40px；
高度：40px；
位置：绝对位置；
最高：50%；
左：50%；
利润上限：-20px；
左边距：-20px；
背景：蓝色；
边界半径：50%；
字体大小：100px；
动画：无限线性；
}
.ball_red{
宽度：20px；
高度：20px；
位置：绝对位置；
背景：红色；
边界半径：50%；
/*最初居中*/
最高：50%；
左：50%；
利润上限：-10px；
左边距：-10px；
/*按圆圈*/
转换：转换（-150px）；
/*冲出圆圈*/
左边距：-20px；
}
鲍尔·格林先生{
宽度：20px；
高度：20px；
位置：绝对位置；
背景：绿色；
边界半径：50%；
/*最初居中*/
最高：50%；
左：50%；
利润上限：-150px；
左边距：-150px；
/*按圆圈*/
转换：转换（-150px）；
/*冲出圆圈*/
左边距：65px；
}
.ball_violet{
宽度：20px；
高度：20px；
位置：绝对位置；
背景：紫罗兰色；
边界半径：50%；
/*最初居中*/
最高：50%；
左：50%；
利润上限：-150px；
左边距：-150px；
/*按圆圈*/
转换：转换（-150px）；
/*冲出圆圈*/
左边距：215px；
}

你真的是指“逃逸”还是“跳过”？像这个例子一样跳过-所以你需要一些相当复杂的javascript，以便在移动球靠近并通过固定球时改变固定球的位置。是的，当单击固定球时，它可以从移动球上跳下，如果两个球都接触，则显示碰撞警报。

<div class="circle">
  <div class="ball_blue"></div>
  <div class="ball_red"></div>
  <div class="ball_green"></div>
  <div class="ball_violet"></div>
</div>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
* Move in a circle without wrapper elements
* Idea by Aryeh Gregor, simplified by Lea Verou
*/

@keyframes rot {
  from {
    transform: rotate(0deg)
      translate(-150px)
      rotate(0deg);
  }
  to {
    transform: rotate(360deg)
      translate(-150px) 
      rotate(-360deg);
  }
}

.circle {
  border:1px solid grey;
  position: relative;
  width:300px;
  height:300px;
  margin:25px auto;
  border-radius:50%;
}

.ball_blue {
  width: 40px;
  height: 40px;
  position: absolute;
  top:50%;
  left:50%;
  margin-top: -20px;
  margin-left: -20px;
  background:blue;
  border-radius:50%;
  font-size: 100px;
  animation: rot 3s infinite linear;
}

.ball_red {
  width: 20px;
  height: 20px;
  position: absolute;
  background:red;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -10px;
  margin-left: -10px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: -20px;
}

.ball_green {
  width: 20px;
  height: 20px;
  position: absolute;
  background:green;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -150px;
  margin-left: -150px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: 65px;
}


.ball_violet {
  width: 20px;
  height: 20px;
  position: absolute;
  background:violet;
  border-radius:50%;
  /* INITIALLY CENTERED */
  top:50%;
  left:50%;
  margin-top: -150px;
  margin-left: -150px;
  /* PUSH TO CIRCLE */
  transform: translate(-150px);
  /* PUSH OUT OF CIRCLE */
  margin-left: 215px;
}