# Pure mathematics line segment Vs circle collision detection along with HTML5 example

As a part in a bigger project – which you will hear about soon – I needed to find a quick way to check for collisions between a line segment and a circle. It’s quite an easy task, but man, I found a lot of really weird ways to do it, so here’s my take, based on this Stack Overflow question:
Drag circle center or any of the two segment ends to change and update the result. The algorithm works by first finding the point on the line segment which is the closest to circle’s center. Then we compare the distance with the circle radius. If the distance is smaller than the radius, the circle is colliding with the line segment. Here is the source code:
```var game;

var gameOptions = {
}

var gameConfig = {
thpe: Phaser.CANVAS,
width: 600,
height: 600,
scene: [playGame]
}
game = new Phaser.Game(gameConfig);
window.focus()
}
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
}
create(){
this.circleCenter = this.add.sprite(Phaser.Math.Between(50, game.config.width - 50), Phaser.Math.Between(50, game.config.height - 50), "crosshair");
this.circleCenter.setInteractive();
this.segmentStart = this.add.sprite(Phaser.Math.Between(20, game.config.width - 20), Phaser.Math.Between(20, game.config.height - 20), "crosshair");
this.segmentStart.setInteractive();
this.segmentEnd = this.add.sprite(Phaser.Math.Between(20, game.config.width - 20), Phaser.Math.Between(20, game.config.height - 20), "crosshair");
this.segmentEnd.setInteractive();
this.input.setDraggable([this.circleCenter, this.segmentStart, this.segmentEnd]);
fontFamily: "Arial",
color: "#ffffff"
});
this.drawStuff();
this.input.on("drag", function(pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
this.drawStuff();
}, this);
}
drawStuff(){
this.graphics.clear();
if(this.distToSegmentSquared({
x: this.circleCenter.x,
y: this.circleCenter.y
x: this.segmentStart.x,
y: this.segmentStart.y
}, {
x: this.segmentEnd.x,
y: this.segmentEnd.y
})){
this.graphics.lineStyle(2, 0x880000);
}
else{
this.graphics.lineStyle(2, 0x008800);
}
this.graphics.lineStyle(2, 0x008800);
this.graphics.beginPath();
this.graphics.moveTo(this.segmentStart.x, this.segmentStart.y);
this.graphics.lineTo(this.segmentEnd.x, this.segmentEnd.y);
this.graphics.closePath();
this.graphics.strokePath();
this.graphics.lineStyle(2, 0x888800);
this.graphics.beginPath();
this.graphics.moveTo(this.distancePoint.x, this.distancePoint.y);
this.graphics.lineTo(this.circleCenter.x, this.circleCenter.y);
this.graphics.closePath();
this.graphics.strokePath();
this.text.setText("Segment: (" + this.segmentStart.x + ", " + this.segmentStart.y +") to (" + this.segmentEnd.x + ", " + this.segmentEnd.y +")\nCircle center: (" + this.circleCenter.x + ", " + this.circleCenter.y +")\nPoint to watch: (" + this.distancePoint.x + ", " + this.distancePoint.y +")");
}
getDistance(p1, p2){
return (p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y);
}
var l2 = this.getDistance(segmentStart, segmentEnd);
var t = ((circleCenter.x - segmentStart.x) * (segmentEnd.x - segmentStart.x) + (circleCenter.y - segmentStart.y) * (segmentEnd.y - segmentStart.y)) / l2;
t = Math.max(0, Math.min(1, t));
var tX = segmentStart.x + t * (segmentEnd.x - segmentStart.x);
var tY = segmentStart.y + t * (segmentEnd.y - segmentStart.y);
var tPoint = {
x: tX,
y: tY
}
this.distancePoint.x = Math.round(tX);
this.distancePoint.y =  Math.round(tY);
}
}
```
And this is the source code to download. Prepare to see this script in action running in a game this week.
215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 10000000
// 2 Cars
// 2048
// Avoider
// Ballz
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Breakout
// Bricks
// Columns
// CubesOut
// Dots
// DROP'd
// Dudeski
// Eskiv
// Filler
// Fling
// Globe
// HookPod
// Hundreds
// InkTd
// Iromeku
// Lumines
// Magick
// MagOrMin
// Maze
// Memdot
// Nano War
// Nodes
// o:anquan
// Ononmin
// Pacco
// Phyballs
// Platform
// Poker
// Pool
// Poux
// Pudi
// qomp
// Racing
// Renju
// SameGame
// Security
// Sling
// Slingy
// Sokoban
// Splitter
// Sproing
// Stack
// Stairs
// Stringy
// Sudoku
// Tetris
// Threes
// Toony
// Turn
// TwinSpin
// vvvvvv
// Wordle
// Worms
// Yanga
// Zhed
// zNumbers