Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Duda] Validación de la funcion disparar

La función disparar valida como si fuera un cuadrado, y no como un círculo.

function disparar(evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if ((x < xAleatorio + radio) && 
            (x > xAleatorio - radio) &&
            (y < yAleatorio + radio) &&
            (y > yAleatorio - radio) ) {
            alert("Tiro Certero");
        }
    }

#

3 respuestas

Manda todo el codigo para ayudarte

Hola, con la validación de esa función mostrada en el video, me mostraba la alerta cuando hacia click fuera del círculo, por eso tenia esa duda. La valida como si fuera un cuadrado y no un circulo. Opte por hallar la distancia entre los dos puntos y que sea menor o igual que el radio. Te comparto como lo hice.

const pantalla =  document.querySelector("canvas");
const pincel = pantalla.getContext("2d");
let radio = 10;
var xAleatorio; 
var yAleatorio ;

pincel.fillStyle="gray";
pincel.fillRect(0,0,600,400);

const dibujarCirculo = (x,y,r,color)=>{

    pincel.fillStyle=color;
    pincel.beginPath();
    pincel.arc(x,y,r,0,2*Math.PI);
    pincel.fill();
}

const limpiarPantalla=()=>{
    pincel.clearRect(0,0,600,400);
}

const dibujarTablero= (x,y)=>{
    dibujarCirculo(x,y,radio*3,"red");
    dibujarCirculo(x,y,radio*2,"white");
    dibujarCirculo(x,y,radio,"red");
}

const coordAleatorio =(valorMax)=>{
    return Math.floor(Math.random()*valorMax);
}

const mostraTablero=()=>{
    limpiarPantalla();
    xAleatorio=coordAleatorio(600);
    yAleatorio=coordAleatorio(400);
    dibujarTablero(xAleatorio,yAleatorio);
}

pantalla.addEventListener('click',(e)=>{

    let d;
    let x = e.pageX -pantalla.offsetLeft;
    let y = e.pageY-pantalla.offsetTop;
    d= Math.sqrt(Math.pow((x-xAleatorio),2)+Math.pow((y-yAleatorio),2));

    if(d<=radio){
        alert("Tiro certero")
    }
    // return console.log(d);

})

setInterval(mostraTablero,1000);

Solo es problema de sintaxis de un identificador de constante es la misma que la de cualquier identificador de variable, tampoco se cumple la condición, entras a herramientas de desarrollador ahi deberas modificar on.click;