 |
|
||||
Você está aqui: JavaScript ::: Dicas & Truques ::: Geometria, Trigonometria e Figuras Geométricas |
Como testar se um ponto está dentro de um círculo em JavaScript - Desenvolvimento de Games com JavaScriptQuantidade de visualizações: 1552 vezes |
|
Quando estamos trabalhando com computação gráfica, geometria e trigonometria ou desenvolvimento de jogos em JavaScript, é comum precisarmos verificar se um determinado ponto (uma coordenada x, y) está contido dentro de um círculo. Para melhor entendimento, veja a imagem a seguir:  Veja que temos um círculo com raio igual a 115 e com centro nas coordenadas (x = 205; y = 166). Temos também dois pontos. O ponto vermelho está nas coordenadas (x = 140; y = 90) e o ponto azul está nas coordenadas (x = 330; y = 500. Como podemos ver na imagem, o ponto vermelho está dentro do círculo, enquanto o ponto azul está fora. E nosso intenção nesta dica é escrever o código JavaScript que permite fazer essa verificação. Tenha em mente que está técnica é muito útil para o teste de colisões no desenvolvimento de games. Veja o código completo para o exemplo:
<!doctype html>
<html>
<head>
<title>Desenvolvimento de Games usando HTML5 e JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos declarar a classe Circulo
class Circulo{
constructor(xc, yc, raio){
this.xc = xc; // x do centro
this.yc = yc; // y do centro
this.raio = raio; // raio do círculo
}
}
// agora vamos declarar a classe Ponto
class Ponto{
constructor(x, y){
this.x = x; // coordenada x
this.y = y; // coordenada y
}
}
// vamos criar um objeto Circulo
var c = new Circulo(90, 50, 115);
// vamos criar um objeto Ponto
var p = new Ponto(140, 90);
// vamos verificar se o ponto está dentro do
// círculo
var dx = p.x - c.xc;
var dy = p.y - c.yc;
if((Math.pow(dx, 2) + Math.pow(dy, 2)) < Math.pow(c.raio, 2)){
document.writeln("O ponto está dentro do círculo");
}
else{
document.writeln("O ponto NÃO está dentro do círculo");
}
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: O ponto está dentro do círculo. Experimente com círculos de raios e coordenadas centrais diferentes e também com pontos em várias coordenadas e veja como os resultados são interessantes. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
