Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

el Orden de las funciones impide el funcionamiento ?

reviso y reviso y no encuentro la falla.

  • el fondo gris desaparece en el primer intervalo
  • no dibuja la diana
  • no da error la consola, creo que es un error de lógica
<canvas width="600" height="400">    </canvas>
<script type="text/javascript">

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0,0,600,400);

var radio = 10;
var xAleatoro;
var yAleatoro;


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

function limpiaPantalla() {
    pincel.clearRect(0,0,600,400);
}

function actualizaPantalla() {
    limpiaPantalla();
    xAleatoro = sortearPosicion(550);
    yAleatoro = sortearPosicion(350);
    dibujarObjetivo(xAleatoro, yAleatoro);
}

function dibujarObjetivo(x,y) {
    dibujaCirculo(x,y,radio + 20, "red");
    dibujaCirculo(x,y,radio + 10, "white");
    dibujaCirculo(x,y,radio, "red");
}

function sortearPosicion(maximo) {
    return Math.floor(Math.random() * maximo);
}

setInterval(actualizaPantalla, 1200);

function disparar(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;

    if ((x < xAleatoro + radio) &&
        (x > xAleatoro - radio) &&
        (y < yAleatoro + radio) &&
        (y > yAleatoro - radio) ) {

            alert("BLANCO !!!!");
}
}
pantalla.onclick = disparar;


</script>
3 respuestas
solución!

Agrega esto en la función:

function limpiaPantalla() {
    pincel.clearRect(0,0,600,400);
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0,0,600,400);
}

Estas limpiando la pantalla y no vuelves a dibujar el canvas.

Si esto soluciona tu problema dale Solución

Gracias Josè

Hola, probé tu código y la diana funciona bien. El tema del fondo gris es que al ejecutarse limpiarPantalla() borra todo (deja toda la pantalla en blanco) y nunca le volvés a decir que el fondo sea de color gris, lo que podés hacer es que en lugar de usar clearRect le digas que pinte toda la pantalla de gris entonces es como que tu borrado en lugar de ser de color blanco, lo hace en color gris. Espero se haya entendido y te haya ayudado. El código quedaría así:

<canvas width="600" height="400">    </canvas>
<script type="text/javascript">

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0,0,600,400);

var radio = 10;
var xAleatoro;
var yAleatoro;


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

function limpiaPantalla() {
    pincel.fillStyle="lightgrey";
    pincel.fillRect(0,0,600,400);
}

function actualizaPantalla() {
    limpiaPantalla();
    xAleatoro = sortearPosicion(550);
    yAleatoro = sortearPosicion(350);
    dibujarObjetivo(xAleatoro, yAleatoro);
}

function dibujarObjetivo(x,y) {
    dibujaCirculo(x,y,radio + 20, "red");
    dibujaCirculo(x,y,radio + 10, "white");
    dibujaCirculo(x,y,radio, "red");
}

function sortearPosicion(maximo) {
    return Math.floor(Math.random() * maximo);
}

setInterval(actualizaPantalla, 1200);

function disparar(evento) {
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;

    if ((x < xAleatoro + radio) &&
        (x > xAleatoro - radio) &&
        (y < yAleatoro + radio) &&
        (y > yAleatoro - radio) ) {

            alert("BLANCO !!!!");
}
}
pantalla.onclick = disparar;


</script>