Como logro simplificar que muestre el nombre del color actual? | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Stefano Alejandro Cardoza Lutzow

| 71.3k xp | 3 posts

Inclui 3 "if" para lograr mostrar el nombre del color actual en lugar de el numero del array, pero pienso que es muy largo. Hay manera de simplificarlo?

<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 color = ["blue","red","green"];
    var currentColor = 0;

    alert("Blue");

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

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        currentColor++;

          if (currentColor == 1){
            alert("Red");
        }
         if (currentColor == 2){
            alert("Green");
        }
        if (currentColor >= color.length){
            currentColor = 0
            alert("Blue");
        }
        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>

2 respuestas

por Estudiante

| 56.1k xp | 36 posts

15/12/2022

Hola Stefano, te muestro mi código, espero te ayude para verlo desde otro punto de vista

function cambiarColor (evento){

        colorSelect ++;

        if (colorSelect == 3){

            colorSelect = 0;

        }
        alert (colores[colorSelect]);
        return false;
    }

Si tienes una duda, con gusto te ayudo.

por Diana Elizabeth Alcocer Pulupa

| 129.4k xp | 7 posts

16/12/2022

Hola, no es necesario que utilices un if para cada valor posible, en realidad es suficiente con que pongas un único alert y accede directamente al valor del array donde definiste los colores, recuerda que es una variable global y puedes acceder a ella cuando quieras; por otro lado para que la variable currentColor no siga aumentando más allá del número de elementos del array de colores, se debe validar primero con un if de tal manera que si el contador ya es igual a la longitud del array se vuelva a reiniciar (no >= porque de esta manera en realiad no hay forma de que sea mayor, pero si quieres puedes ponerlo, eso no afecta). De esta forma la función alterarColor quedaría de la siguiente manera:

function alterarColor() {
        currentColor++;
        if (currentColor==color.length){ //aquí compruebas si el contador es igual a la longitud del array
                    numeroClic=0;           //aquí reinicia el contador
        } 

        alert(color[currentColor]); //esto muestra el color actual accediendo directamente al valor del array
        return false;
}