<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gráfico de barras</title>
</head>
<body>
<style>
canvas{
background-color: yellow;
opacity: 0.7;
}
</style>
<canvas class="grafico" width="400" height="400">
</canvas>
<script>
let x =20;
let y = 200;
let giro = false
function graficar(x,y,r,a,c=2*3.14){
//Limpiamos pantalla para que se vea la bolita rotando
pincel.clearRect(0,0,400,400)
//Dibujamos la bolita
pincel.fillStyle ="white"
pincel.beginPath();
pincel.arc(x,y,r,a,c);
pincel.fill()
}
function click(){
function clickear(event){
muestra_posiciones = 0 //Calculara para llenar los arrays
//Posibles lugares donde podra tocar el usuario en ejeX y ejeY
posicionesX = []
for(i=0;i<=10;i++){
posicionesX.push(x + i)
posicionesX.push(x - i)
}
posicionesY = []
for(i=0;i<=10;i++){
posicionesY.push(y + i)
posicionesY.push(y - i)
}
//Recuperamos los lugares que presiono el usuario
//Y le restamos los bordes sobrantes
let xdentro = event.pageX - canvas.offsetLeft;
let ydentro = event.pageY - canvas.offsetTop;
//Averiguamos si la bolita se presiono en el radio de 5
if(posicionesX.includes(xdentro) && posicionesY.includes(ydentro)){
alert("Le dio");
}
}
//Ejecutamos la acción
canvas.onclick = clickear
}
//Ejecutamos todas las acciones en conjunto
function realizar(){
//Generamos numeros aleatorios donde caera el punto
x = Math.round(Math.random()*400)
y = Math.round(Math.random()*400)
//Ejecutamos accion de click
//Dibujamos bolita
graficar(x,y,10,0)
//Definimos si gira o sigue en el
click()
}
let canvas = document.querySelector(".grafico");
let pincel = canvas.getContext("2d");
setInterval(realizar,2000)
</script>
</body>
</html>
