JSFiddle - React, Tailwind, and code Playground

by John kuoppala

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
    c.width = 400;
    c.height = 300;
var topSpeed = 25;
var acc = 1;
var sen = 20; //sensitivity
var balls = new Array();
var points = new Array();
    points = [
[50,50],
[100,0],
[150,50],
[200,100],
[250,50],
[200,0],
[150,50],
[100,100],
]

function ball (x, y) {
    this.x = x;
    this.y = y;
    this.speed = 2;
    this.goal = 0;
}

function draw() {
    ctx.clearRect(0,0,c.width,c.height);
    ctx.fillStyle="black";
    for (var i = 0; i<balls.length; i++) {
        var b = balls[i];
        ctx.beginPath();
        ctx.arc(b.x,b.y,10,0,2*Math.PI);
        ctx.fill();
    }
    ctx.fillStyle="red";
    for (var j = 0; j<points.length; j++) {
        var p = points[j];
        ctx.beginPath();
        ctx.arc(p[0], p[1],5,0,2*Math.PI);
        ctx.fill();
    }
    ctx.fillText(balls[0].goal,10,10);
    requestAnimationFrame(draw);
}

function update() {
    for (var i = 0; i<balls.length; i++) {
        var b = balls[i];
        b.speed += b.speed < topSpeed ? acc : 0;
        var dX = b.x-points[b.goal][0];
        var dY = b.y-points[b.goal][1];
        b.x -=dX*b.speed*0.01;
        b.y -=dY*b.speed*0.01;
        b.goal += Math.abs(dX)+Math.abs(dY)<sen ? 1 : 0;
        if (b.goal == points.length) {
            b.goal = 0;
        }
    }
}


balls[balls.length] = new ball(200,100);
balls[balls.length] = new ball(50,100);
balls[balls.length] = new ball(50,0);
balls[balls.length] = new ball(500,0);
balls[balls.length] = new ball(500,100);
balls[balls.length] = new ball(200,100);

var myInterval = setInterval(function() {
               update();
           },16);
draw();