Pico de Minecraft | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minecraft</title>
</head>

<body>

<canvas width="750" height="750"></canvas>

</body>

</html>

<script>



var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");

pincel.fillStyle ="teal";
pincel.fillRect(250,50,250,50);

pincel.fillStyle ="teal";
pincel.fillRect(200,100,50,50);

pincel.fillStyle ="teal";
pincel.fillRect(250,150,200,50);

pincel.fillStyle ="teal";
pincel.fillRect(500,100,50,50);

pincel.fillStyle ="teal";
pincel.fillRect(600,200,50,50);

pincel.fillStyle ="teal";
pincel.fillRect(650,250,50,250);

pincel.fillStyle ="teal";
pincel.fillRect(550,300,50,200);

pincel.fillStyle ="teal";
pincel.fillRect(600,500,50,50);



pincel.fillStyle ="aquamarine";
pincel.fillRect(250,100,50,50);

pincel.fillStyle ="aquamarine";
pincel.fillRect(600,450,50,50);



pincel.fillStyle ="turquoise";
pincel.fillRect(300,100,50,50);

pincel.fillStyle ="turquoise";
pincel.fillRect(450,150,100,50);

pincel.fillStyle ="turquoise";
pincel.fillRect(550,200,50,100);

pincel.fillStyle ="turquoise";
pincel.fillRect(600,400,50,50);



pincel.fillStyle ="paleturquoise";
pincel.fillRect(450,100,50,50);

pincel.fillStyle ="paleturquoise";
pincel.fillRect(500,200,50,50);

pincel.fillStyle ="paleturquoise";
pincel.fillRect(600,250,50,50);



pincel.fillStyle ="darkturquoise";
pincel.fillRect(350,100,100,50);

pincel.fillStyle ="darkturquoise";
pincel.fillRect(600,300,50,100);



pincel.fillStyle ="saddlebrown";
pincel.fillRect(600,150,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(500,250,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(450,300,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(400,350,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(350,400,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(300,450,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(250,500,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(200,550,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(150,600,50,50);

pincel.fillStyle ="saddlebrown";
pincel.fillRect(100,650,50,50);



pincel.fillStyle ="sienna";
pincel.fillRect(550,100,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(450,200,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(400,250,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(350,300,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(300,350,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(250,400,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(200,450,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(150,500,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(100,550,50,50);

pincel.fillStyle ="sienna";
pincel.fillRect(50,600,50,50);



pincel.fillStyle ="peru";
pincel.fillRect(600,100,50,50);

pincel.fillStyle ="peru";
pincel.fillRect(450,250,50,50);

pincel.fillStyle ="peru";
pincel.fillRect(350,350,50,50);

pincel.fillStyle ="peru";
pincel.fillRect(250,450,50,50);

pincel.fillStyle ="peru";
pincel.fillRect(150,550,50,50);

pincel.fillStyle ="peru";
pincel.fillRect(50,650,50,50);



pincel.fillStyle ="burlywood";
pincel.fillRect(550,150,50,50);

pincel.fillStyle ="burlywood";
pincel.fillRect(400,300,50,50);

pincel.fillStyle ="burlywood";
pincel.fillRect(300,400,50,50);

pincel.fillStyle ="burlywood";
pincel.fillRect(200,500,50,50);

pincel.fillStyle ="burlywood";
pincel.fillRect(100,600,50,50);

</script>