collision test

by cat_991

HTML

Collision: <span id="collision"></span>
<canvas id="myCanvas" width="400" height="400" style="border:1px
  solid #000000;"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas"); //get Canvas
var pen = canvas.getContext("2d")  //define pen
function clear() {
	pen.clearRect(0, 0, canvas.width, canvas.height);
}
function drawLine (x1, y1, x2, y2, s, hex) {
  pen.strokeStyle = "#" + hex;
  pen.lineWidth = s;
	pen.beginPath();
	pen.moveTo(x1 + 200, 200-y1);
	pen.lineTo(x2 + 200, 200-y2);
	pen.stroke();
}
var txt = document.getElementById("collision")
function lineline (x1, y1, x2, y2, x3, y3, x4, y4) {
	var uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
	var uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
	if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {
  	  return true
	}
	return false
}
setInterval(loop, 1)
function loop () {
	txt.textContent = lineline(-190, 190, event.clientX, event.clientY, -100, -100, 100, 100)
	drawLine(-190, 190, event.clientX, event.clientY, 3, '000000')
	drawLine(-100, -100, 100, 100, 3, '000000')
}