碰撞检测

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas, ctx, m1 = {x: 0, y: 0}, m2 = {x: 0, y: 0}, dx = 0, dy = 0, radius = 50, trail = 400;

var ground = [];

const sqrDist = (x1, y1, x2, y2) => {
	var dx = x2 - x1, dy = y2 - y1;
	return dx * dx + dy * dy;
};
function dist(x1, y1, x2, y2) {
	var dx = x2 - x1, dy = y2 - y1;
	return Math.sqrt(dx * dx + dy * dy);
}

function distToLine(p, l1, l2) {
	var dx = l2.x - l1.x, dy = l2.y - l1.y;
	var len = dx * dx + dy * dy;
	if(len === 0) return dist(p.x, p.y, l1.x, l1.y);
	var t = ((p.x - l1.x) * dx + (p.y - l1.y) * dy) / len;
	t = Math.max(0, Math.min(1, t));
	return dist(p.x, p.y, l1.x + t * dx, l1.y + t * dy);
}

function closestPointOnLine(p, l1, l2) {
	var dx = l2.x - l1.x, dy = l2.y - l1.y;
	var sqrLen = dx * dx + dy * dy;
	//if(len === 0) return dist(p.x, p.y, l1.x, l1.y);
	if(sqrLen === 0) return l1;
	var t = ((p.x - l1.x) * dx + (p.y - l1.y) * dy) / sqrLen;
	t = Math.max(0, Math.min(1, t));
	return {x: l1.x + t * dx, y: l1.y + t * dy};
}

function line_intersect(p1, p2, p3, p4) {
	var x1 = p1.x, y1 = p1.y, x2 = p2.x, y2 = p2.y, x3 = p3.x, y3 = p3.y, x4 = p4.x, y4 = p4.y;
	if( // Check AABB collission
		Math.min(x1, x2) > Math.max(x3, x4) ||
		Math.max(x1, x2) < Math.min(x3, x4) ||
		Math.min(y1, y1) > Math.max(y3, y4) ||
		Math.max(y1, y2) < Math.min(y3, y4)
		) return undefined;
	var denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
	if (denom == 0) return undefined;
	var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom;
	if(!(ua >= 0 && ua <= 1)) return undefined;
	var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom;
	if(!(ub >= 0 && ub <= 1)) return undefined;
	return {
		x: Math.round(x1 + ua * (x2 - x1)),
		y: Math.round(y1 + ua * (y2 - y1))
	};
}

const getHitBox = (p1, p2, radius = 0) => {
	return {	
		left: Math.min(p1.x, p2.x) - radius,
		right: Math.max(p1.x, p2.x) + radius,
		top: Math.min(p1.y, p2.y) - radius,
		bottom: Math.max(p1.y, p2.y) + radius,
		width: Math.abs(p2.x - p1.x) + 2 * radius,
		height: Math.abs(p2.y - p1.y) + 2 * radius,
	};
};

const hitAABB = (b1, b2) => b1.right >= b2.left && b1.left <= b2.right && b1.bottom >= b2.top && b1.top <= b2.bottom;

const drawLine = (p1, p2) => {
	ctx.beginPath();
	ctx.moveTo(p1.x, p1.y);
	ctx.lineTo(p2.x, p2.y);
	ctx.stroke();
};
const drawCircle = (x, y, r) => {
	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI * 2);
	ctx.stroke();
};

const drawCollission = (x, y) => {
	ctx.beginPath();
	ctx.moveTo(x - 20, y - 20);
	ctx.lineTo(x + 20, y + 20);
	ctx.moveTo(x + 20, y - 20);
	ctx.lineTo(x - 20, y + 20);
	ctx.strokeStyle = 'red';
	ctx.stroke();
};

const drawBall = (x, y, radius = 10) => {
	ctx.beginPath();
	ctx.moveTo(x, y);
	ctx.arc(x, y, radius, 0, Math.PI * 2);
	ctx.fill();
};

const drawCollider = (p1, p2, radius = 0) => {
	var hb = getHitBox(p1, p2, radius);
	ctx.beginPath();
	ctx.rect(hb.left, hb.top, hb.width, hb.height);
	ctx.lineWidth = 1;
	ctx.stroke();
};

const drawColliders = (radius = 0) => {
	for(var i = 0; i < ground.length - 1; i++) drawCollider(ground[i], ground[i + 1], radius);
};

const drawSegment = (p1, p2) => {
	ctx.beginPath();
	ctx.moveTo(p1.x, p1.y);
	ctx.lineTo(p2.x, p2.y);
	ctx.strokeStyle = 'orange';
	ctx.lineWidth = 3;
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(p1.x, p1.y, 5, 0, Math.PI * 2);
	ctx.arc(p2.x, p2.y, 5, 0, Math.PI * 2);
	ctx.fillStyle = 'red';
	ctx.fill();
};
	
const drawGroundSegments = () => {
	for(var i = 0; i < ground.length - 1; i++) drawSegment(ground[i], ground[i + 1]);
};

const handleRAF = time => {
	requestAnimationFrame(handleRAF);
	draw();
};

const init = () => {
	console.clear();
	canvas = document.body.appendChild(document.createElement('canvas'));
	ctx = canvas.getContext('2d');
	window.addEventListener('resize', handleResize);
	window.addEventListener('mousemove', handleMouseMove);
	requestAnimationFrame(handleRAF);
	handleResize();
	initGround();
};

const handleMouseMove = event => {
	var x = event.clientX, y = event.clientY;
	//var len = dist(;
	//dx = x - mx;
	//dy = y - my;
	m1.x = x;
	m1.y = y;
	var d = dist(m1.x, m1.y, m2.x, m2.y);
	if(d > trail) {
		m2.x = Math.round(m1.x + (m2.x - m1.x) * trail / d);
		m2.y = Math.round(m1.y + (m2.y - m1.y) * trail / d);
	}
};

const handleResize = event => {
	canvas.width = document.body.clientWidth;
	canvas.height = document.body.clientHeight;
	initGround();
	draw();
};

window.addEventListener('DOMContentLoaded', init);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg