小球逃离大球

Question

这里是我试图做的小提琴http://codepen.io/anon/pen/hKzfl。我想在圆圈上制作一个球，这个球在位置上是恒定的，即不旋转。主要目的是从主球中逃脱不断的球。如果从我的小提琴旋转的主球接触任何恒定的球，那么它应该结束。每个球逃脱一分。我不能在圆圈上放置一个恒定的球。这里是我喜欢做的一个例子。这里有一个我喜欢的例子。 http://www.lessmilk.com/9/

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