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...
En la medida en que vaya avanzando en el curso, lo iré mejorando.