Check Dot in Circle

2023-10-09 01:28:25 +03:00 · 2023-10-09 01:28:25 +03:00 · 0713b75cde
commit 0713b75cde
parent f8ef8a3381
10 changed files with 121 additions and 0 deletions
--- a/assets/3party/bootstrap-v5.3.2.min.css
+++ b/assets/3party/bootstrap-v5.3.2.min.css
--- a/assets/3party/stats.min.js
+++ b/assets/3party/stats.min.js
@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
+u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>=g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
+1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
+b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
--- a/projects/JavaScript/Check
+++ b/projects/JavaScript/Check
@ -0,0 +1,69 @@
+let stats = new Stats();
+
+let canvas = null;
+let context = null;
+
+let dot = { x: 0, y: 0, size: 2, };
+let circle = { x: 0, y: 0, radius: 50, };
+
+window.onload = function() {
+  canvas = document.getElementById('canvas');
+  context = canvas.getContext('2d');
+
+  // add statistics
+  stats.showPanel(0);
+  document.body.appendChild(stats.dom);
+
+  document.getElementById('canvas').addEventListener('mousemove', (event) => {
+    let canvas_rect = canvas.getBoundingClientRect();
+    dot.x = event.clientX - canvas_rect.left;
+    dot.y = event.clientY - canvas_rect.top;
+  });
+
+  initScene();
+
+  requestAnimationFrame(mainLoop);
+}
+
+function drawScene() {
+  'use strict';
+
+  clearContext();
+
+  // Calculate dot collision and change circle color
+  if (Math.sqrt((dot.x - circle.x) * (dot.x - circle.x) + (dot.y - circle.y) * (dot.y - circle.y)) <= circle.radius) {
+    context.fillStyle = '#d44e52';
+  }
+  else {
+    context.fillStyle = '#38607c';
+  }
+
+  // Draw circle
+  context.beginPath();
+  context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
+  context.fill();
+
+  // Draw dot
+  context.fillStyle = '#ffcc68';
+  context.fillRect(dot.x, dot.y, dot.size, dot.size);
+}
+
+function initScene() {
+  circle.x = canvas.width / 2;
+  circle.y = canvas.height / 2;
+}
+
+function mainLoop() {
+  stats.begin();
+  drawScene();
+  stats.end();
+
+  requestAnimationFrame(mainLoop);
+}
+
+function clearContext() {
+  'use strict';
+
+  context.fillStyle = '#2a2a3a';
+  context.fillRect(0, 0, canvas.width, canvas.height);
+}
--- a/projects/JavaScript/Check
+++ b/projects/JavaScript/Check
@ -0,0 +1 @@
+../../../assets/3party/bootstrap-v5.3.2.min.css
--- a/projects/JavaScript/Check
+++ b/projects/JavaScript/Check
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Colision Detect in Circle</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+	<script type="text/javascript" src="stats.min.js"></script>
+	<script type="text/javascript" src="app.js"></script>
+</head>
+<body class="bg-dark text-bg-dark">
+	<div class="container-fluid">
+		<p class="text-center pt-3">
+			Проверка наличия точки в круге
+		</p>
+		<div class="d-flex justify-content-center">
+			<canvas id="canvas" width="320" height="192"></canvas>
+		</div>
+		<p class="text-center pt-3">
+			Наведите курсор на <span class="bg-info text-bg-info rounded p-1">canvas</span> для перемещения точки.
+		</p>
+		<p class="text-center">
+			Формуля для расчёта задачи:<br>
+			<span class="bg-info text-bg-info rounded p-1">
+				sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1)) <= R
+			</span>,<br>
+			где R - это радиус окружности,<br>
+			x0/y0 - координаты точки,<br>
+			x1/y1 - координаты центра окружности.
+		</p>
+	</div>
+</body>
+</html>
--- a/projects/JavaScript/Check
+++ b/projects/JavaScript/Check
@ -0,0 +1 @@
+../../../assets/3party/stats.min.js
--- a/projects/JavaScript/Check
+++ b/projects/JavaScript/Check
@ -0,0 +1,6 @@
+@import url('bootstrap.min.css');
+
+canvas {
+	border: 1px solid #000;
+	cursor: none;
+}
--- a/projects/JavaScript/Circle_Collision/app.js
+++ b/projects/JavaScript/Circle_Collision/app.js
--- a/projects/JavaScript/Circle_Collision/index.html
+++ b/projects/JavaScript/Circle_Collision/index.html
--- a/projects/JavaScript/GameLoop/gameloop.js
+++ b/projects/JavaScript/GameLoop/gameloop.js
				`@ -0,0 +1 @@`
				`../../../assets/3party/bootstrap-v5.3.2.min.css`