In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for successfully evading the constant ball. However, positioning the constant ball on the circle has proven to be quite a challenge.
If you need a visual reference, check out this similar interactive example: Lessmilk Game 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;
}
@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%;
...
/* PUSH OUT OF CIRCLE */
margin-left: 215px;
}