Check Dot in Circle
This commit is contained in:
parent
f8ef8a3381
commit
0713b75cde
File diff suppressed because one or more lines are too long
|
|
@ -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});
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/3party/bootstrap-v5.3.2.min.css
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../assets/3party/stats.min.js
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@import url('bootstrap.min.css');
|
||||
|
||||
canvas {
|
||||
border: 1px solid #000;
|
||||
cursor: none;
|
||||
}
|
||||
Loading…
Reference in New Issue