JSFiddle - React, Tailwind, and code Playground
HTML
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
<div class="body"></div>
CSS
.body
{
position: absolute;
border-radius: 50%;
width: 15px;
height: 15px;
}
.body:first-child { background-color: green }
.body { background-color: black }
JavaScript
function init(x, y){
snake.speed = 15;
snake.degree = Math.PI/2;
snake.body = [];
var body$ = $('.body');
for(var i = 0; i < body$.length; i++)
{
var item$ = body$.eq(i);
snake.body.push({ x: x, y: y, vector: { x: 0, y: -1}, item$ : item$});
snake.body[i].item$.css({left: snake.body[i].x + 'px', top: snake.body[i].y + 'px'});
y += 15;
}
}
function moveItem(item){
item.x += (item.vector.x * snake.speed);
item.y += (item.vector.y * snake.speed);
item.item$.css({left: item.x + 'px', top: item.y + 'px'});
}
function move(vector){
for(var i = snake.body.length - 1; i > 0; i--)
{
var item = snake.body[i];
var itemPrev = snake.body[i - 1];
item.vector = itemPrev.vector;
moveItem(item);
}
snake.body[0].vector = vector;
moveItem(snake.body[0]);
}
function play(degree){
if (snake.degree < degree - Math.PI / 36)
{
snake.degree += Math.PI/6;
}
else if (snake.degree > degree + Math.PI / 36)
{
snake.degree -= Math.PI/6;
}
debugger;
var x = Math.cos(snake.degree);
var y = -Math.sin(snake.degree);
move({x: x, y: y});
if (globalDegree !== degree)
return;
setTimeout(function() { play(degree); }, 100);
}
var globalDegree;
var snake = {};
init(400, 200);
$(document).click(function(e){
var mouseX = e.clientX;
var mouseY = e.clientY;
var snakeX = snake.body[0].x;
var snakeY = snake.body[0].y;
var dx = mouseX - snakeX;
var dy = mouseY - snakeY;
var tan = dy / dx;
var degree = Math.atan(tan);
if (dx > 0 && dy > 0)
{
degree = -Math.abs(degree);
}
else if (dx < 0 && dy > 0)
{
degree = Math.PI + Math.abs(degree);
}
else if (dx < 0 && dy < 0)
{
degree = Math.PI - Math.abs(degree);
}
else if (dx > 0 && dy < 0)
{
degree = degree;
}
globalDegree = degree;
...