Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
5
respuestas

Tablero de ajedrez

Me gusta el ajedrez, por eso decidí comenzar a hacer mi versión de este juego...

<body style="background: lightgreen; width: auto; height: auto; margin-left: 37%; margin-top: 13%;">

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

    <script>
        function dibujarCuadrado(x, y, color) {
            var pantalla = document.querySelector("canvas");
            var pincel = pantalla.getContext("2d");
            pincel.fillStyle = color;
            pincel.fillRect(x, y, 50, 50);
            pincel.strokeStyle = "black";
            pincel.strokeRect(x, y, 50, 50);
            return;
        }


        function fila(x, y, color) {

            var y = 0;
            while (y < 300) {

                var x = 0;
                while (x <= 300) {
                    dibujarCuadrado(x, y, "black");
                    dibujarCuadrado(x + 50, y, "white");
                    dibujarCuadrado(x, y + 50, "white");
                    dibujarCuadrado(x + 50, y + 50, "black");

                    x = x + 100;
                }

                y = y + 100;
            }
            return;
        }

        fila();

    </script>

</body>

He aquí el resultado...

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadEn la medida en que vaya avanzando en el curso, lo iré mejorando.

5 respuestas

Hola Carlos, cómo estas?

Gracias por compartir tu proyecto, continua así, felicidades.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartetucodigo) y el foro solo quedaría para cualquier duda que puedas tener sobre el contenido de los cursos.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios

Gracias Carlos por compartir código y la funcion de coordenadas y color genial

Gracias por la info Luis Puig.

Hugo, encontré un pequeño error en el código, me pone 8 columnas y 6 filas, lo corregí de esta manera...

        function fila(x, y, color) {

            var y = 0;
            while (y < 400) {

                var x = 0;
                while (x <= 300) {
                    dibujarCuadrado(x, y, "black");
                    dibujarCuadrado(x + 50, y, "lightgray");
                    dibujarCuadrado(x, y + 50, "lightgray");
                    dibujarCuadrado(x + 50, y + 50, "black");

                    x = x + 100;
                }

                y = y + 100;
            }
            return;
        }

        fila();

Si te fijas, en el while para x está en (x <= 300) y para el y está en while (y < 400).

ok excelente gracias

Muy bueno tuve la misma idea, no pude evitar revisar tu código, excelente gracias por compartir.