<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game</title>
</head>
<body>
<canvas class="lienzo" width="600px" height="400px"></canvas>
<h1>¡Dispara!</h1>
<script>
let status = document.querySelector("h1");
let canvas = document.querySelector(".lienzo");
let ctx = canvas.getContext("2d");
let x = 0; //Se declaran las variables random desde fuera para poder usarlasen otra función.
let y = 0;
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,600,400);
canvas.addEventListener("click", shoot);
function clear(){
ctx.clearRect(0,0,600,400); //Función para borrar y rehacer lienzo.
ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,600,400);
}
function draw(x,y,radius,color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x,y,radius,0,2*3.14); //Función que dibuja los tres circulos.
ctx.fill();
}
function rand(){
x = Math.round(Math.random()*600);
y = Math.round(Math.random()*400);
let radius = 30;
clear (); //Función que ubica el punto random, renueva el lienzo y dibuja.
draw(x, y, radius, "#E0115F");
draw(x, y, radius-10, "white");
draw(x, y, radius-20, "#E0115F");
}
setInterval(rand, 1000); //Intervalo para que se ejecute la función principal.
function shoot(event){
let xS = event.pageX - canvas.offsetLeft; //Metodo para obtener coordenadas de clic.
let yS = event.pageY - canvas.offsetTop;
console.log("Disparo en: " + xS + " - " + yS);
console.log("Punto central: " + x + " - " + y);
console.log("Rango de puntos X desde: " + (x - 10) + " a " + (x + 10));
console.log("Rango de puntos Y desde: " + (y - 10) + " a " + (y + 10));
if (xS <= x + 10 && yS <= y + 10 && xS >= x - 10 && yS >= y - 10){
status.textContent = "¡Buen disparo!";
//alert("¡Buen disparo!");
console.log("Success en: " + xS + " - " + yS);
}
else{
status.textContent ="¡Sigue intentando!";
console.log("Missed en: " + xS + " - " + yS);
}
}
</script>
</body>
</html>
