JSFiddle - React, Tailwind, and code Playground

by Ercan Gerçek

HTML

Move the circle using arrow keys!
<br />
<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript

// You can create a seperate file called CircleLineCollider.js after this comment

/*
 * Class Definition
 */
var CircleLineCollider = function () {};

(function () {
    /*
     * Define class properties
     */

    /*
     * Define class methods
     */
    CircleLineCollider.prototype.getNearestMoveVector = function (center, r, segments) {
        var copiedCenter = [center[0], center[1]];
        var nearestVector = [0, 0];
        for (var i = 0; i < segments.length; i++) {
            var segment = segments[i];
            var linePoint1 = [segment.p1[0], segment.p1[1]];
            var linePoint2 = [segment.p2[0], segment.p2[1]];
            var pointOnLine = this.projectPointOnLine(linePoint1, linePoint2, copiedCenter);
            var isPointInSegment = this.isProjectedPointOnLine(linePoint1, linePoint2, pointOnLine);
            var localNearestVector = this.findNearestExitVector(pointOnLine, copiedCenter, r);
            if (isPointInSegment) {
                nearestVector[0] += localNearestVector[0];
                nearestVector[1] += localNearestVector[1];

                copiedCenter[0] += localNearestVector[0];
                copiedCenter[1] += localNearestVector[1];
            } else {
                // check if line points are intersecting
                var nv1 = this.findNearestExitVector(linePoint1, copiedCenter, r);

                nearestVector[0] += nv1[0];
                nearestVector[1] += nv1[1];
                copiedCenter[0] += nv1[0];
                copiedCenter[1] += nv1[1];

                var nv2 = this.findNearestExitVector(linePoint2, copiedCenter, r);
                nearestVector[0] += nv2[0];
                nearestVector[1] += nv2[1];
                copiedCenter[0] += nv2[0];
                copiedCenter[1] += nv2[1];
            }
        }

        return nearestVector;
    };

    // A + dot(AP,AB) / dot(AB,AB) * AB
    CircleLineCollider.prototype.projectPointOnLine = function (linePoint1, linePoint2, point)...