From 18c8273e0bbc063e5e107b692f9f14422220ca77 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Sun, 8 Oct 2023 23:20:22 +0300 Subject: [PATCH] circle colision detect --- projects/JS/Circle_Collision/app.js | 80 +++++++++++++++++++++++++ projects/JS/Circle_Collision/index.html | 10 ++++ 2 files changed, 90 insertions(+) create mode 100644 projects/JS/Circle_Collision/app.js create mode 100644 projects/JS/Circle_Collision/index.html diff --git a/projects/JS/Circle_Collision/app.js b/projects/JS/Circle_Collision/app.js new file mode 100644 index 0000000..e10e2ca --- /dev/null +++ b/projects/JS/Circle_Collision/app.js @@ -0,0 +1,80 @@ +var circle = {x: 50, y: 50, radius: 50, contour: []}; + +var box = {x: 20, y: 20, width: 300, height: 300}; + +for(var a = 0; a < Math.PI * 2; a += Math.PI / circle.radius){ + circle.contour.push({ + _x: Math.sin(a) * circle.radius, _y: Math.cos(a) * circle.radius + }); +} + +var canvas = document.body.appendChild(document.createElement("canvas")).getContext("2d"); +canvas.canvas.width = 400; +canvas.canvas.height = 400; + +var loop = function(){ + canvas.canvas.width = canvas.canvas.width; + canvas.save(); + canvas.fillRect(box.x, box.y, box.width, box.height); + canvas.globalCompositeOperation = "destination-out"; + canvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40); + canvas.restore(); + + var circleCanvas = document.createElement("canvas").getContext("2d"); + circleCanvas.canvas.width = canvas.canvas.width; + circleCanvas.canvas.height = canvas.canvas.height; + + circleCanvas.save(); + circleCanvas.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); + circleCanvas.fillStyle = "#aaa"; + circleCanvas.fill(); + circleCanvas.globalCompositeOperation = "destination-in"; + circleCanvas.fillRect(box.x + 20, box.y + 20, box.width - 40, box.height - 40); + circleCanvas.restore(); + canvas.drawImage(circleCanvas.canvas, 0, 0); + + if(circle._x < box.x + 20){ + circle._x = box.x + 20; + } + if(circle._y < box.y + 20){ + circle._y = box.y + 20; + } + if(circle._x > box.x + box.width - 20){ + circle._x = box.x + box.width - 20; + } + if(circle._y > box.y + box.height - 20){ + circle._y = box.y + box.height - 20; + } + + circle.contour.forEach(function(p){ + p.x = p._x; + p.y = p._y; + + if(circle.x + p.x < box.x + 20){ + p.x = box.x + 20 - circle.x; + } + if(circle.y + p.y < box.y + 20){ + p.y = box.y + 20 - circle.y; + } + if(circle.x + p.x > box.x + box.width - 20){ + p.x = box.x + box.width - 20 - circle.x; + } + if(circle.y + p.y > box.y + box.height - 20){ + p.y = box.y + box.height - 20 - circle.y; + } + canvas.strokeStyle = "green"; + canvas.lineWidth = 3; + canvas.lineTo(p.x + circle.x, p.y + circle.y); + }); + canvas.stroke(); + + circle.x = circle._x; + circle.y = circle._y; + requestAnimationFrame(loop); +}; +loop(); + +document.onmousemove = function(event){ + circle._x = event.layerX; + circle._y = event.layerY; +}; diff --git a/projects/JS/Circle_Collision/index.html b/projects/JS/Circle_Collision/index.html new file mode 100644 index 0000000..ae2dfc8 --- /dev/null +++ b/projects/JS/Circle_Collision/index.html @@ -0,0 +1,10 @@ + + + + + JS Bin + + + + +