Mi resulado fue diferente pero no se porque funciona | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

3
respuestas

por Paul Alexander Diaz Ramirez

| 79.2k xp | 5 posts

Hola, les comparto como es que yo hice este ejercicio.

El problema que tengo es que al ejecutar el código de respuesta no hace el cambio de color.

La unica diferencia que hay es que el aumento en el contador para el cambio color y su reinicio lo puse dentro de la función de dibujarCirculo, al ponerlo dentro de la función alterarColor no me funciona.

Mi codigo

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    var colores = ["blue", "red", "green"];
    var contadorColores = 0;

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

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

        pincel.fillStyle = colores[contadorColores];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);

        contadorColores++;
        if(contadorColores == colores.length){
            contadorColores=0;
        }

    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        alert("Funcionó");
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>

La respuesta que dan en el curso

<canvas width="600" height="400"> </canvas>

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400); 
    var colores = ["blue", "red", "green"];
    var indiceColorActual = 0; // comienza con blue

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        indiceColorActual++;
        if(indiceColorActual>= colores.length) {
             indiceColorActual = 0; //vuelve para el primer color, blue
        }
        return false; //menú contextual padrón de `canvas` no sea exhibido
    }

    pantalla.oncontextmenu = alterarColor;

</script>

3 respuestas

por Estudiante

| 128.9k xp | 24 posts

18/08/2022

Hola. Tu código lo que hace es que cada vez que das click Izquierdo hace el circulo y lo cambia de color. El ejercicio era hacer que al dar click Izquierdo haga el circulo pero para cambiar de color debería hacerlo al dar click Derecho. Por eso es que es diferente tu código al código dado por el instructor. Ya probé modificando tu código para que se parezca al del instructor y si cumple con lo pedido en el ejercicio:

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    var colores = ["blue", "red", "green"];
    var contadorColores = 0;

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

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

        pincel.fillStyle = colores[contadorColores];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);



    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        contadorColores++;
        if(contadorColores >= colores.length){
            console.log('contadorColores',contadorColores)
            contadorColores = 0;
        }
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>

por Paul Alexander Diaz Ramirez

| 79.2k xp | 5 posts

18/08/2022

Hola, tienes toda la razón me salte esa parte de hacer el cambio de color con el clic derecho. Muchas gracias por tu apoyo.

por PABLO ARMANDO AGUILAR HIDALGO

| 31.2k xp | 43 posts

21/08/2022

<canvas width="1200" height="800"></canvas>

<script>
  var pantalla = document.querySelector("canvas");
  var pincel = pantalla.getContext("2d");
  pincel.fillStyle = "grey";
  pincel.fillRect(0,0,1200,800);
  var colores = ["blue", "green", "red"];
  var indiceColorActual = 0; //para que comience con azul


  function dibujarCirculo(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY - pantalla.offsetTop;
      pincel.fillStyle = colores[indiceColorActual];
      pincel.beginPath();
      pincel.arc(x,y,20,0,2*Math.PI);
      pincel.fill();
    console.log(evento);
  }

  pantalla.onclick = dibujarCirculo;

  function alertarColor(){
    indiceColorActual++;
    if(indiceColorActual>= colores.length){
      indiceColorActual = 0;
    }
    return false;
  }

  pantalla.oncontextmenu = alertarColor;

</script>