[Projeto] Creeper em HTML | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Eu tava curioso e acabei pesquisando como centralizar o canvas então tem um pouco de CSS (apanhei bastante) :P se você perceber a função do creeper não ta sendo chamada, então eu uso o console só pra ser mais dinâmico, até porque eu posso decidir se ele vem com o texture=true ou não além do CSS eu fiz algumas funções e adicionei var/const pra servir de atalho, além de desligar a opacidade do canvas porque eu vi que otimiza (não que precise) eu não "setei" um valor específico pras coordenadas do .fillRect pra ficar mais intuitivo a proporcionalidade, caso eu queira mexer no futuro, então eu só racionalizei a ideia de que se o canvas é um quadrado1024x1024 e o creeper tem um grade de 8x8 unidades era só fazer 1024/8 e ajustar os valores

<meta charset="UTF-8">
<!DOCTYPE html>

<head>
<h1>Primeiro teste</h1>

<style>
   .CanvasC {
      padding: 0;
      width: 1024px;
      height:1024px;
      margin: auto;
      position: relative;
      display: block;
      border: 1px solid black;
   }

</style> 
</head>
<hr>

<body>

<div class="canvasC">
<canvas width="1024" height="1024">Your browser doesn't support canvas</canvas>
</div>

<script>

   console.log(`hello world!`);

   function pular() {

      document.write("<br><br>");
   }

   function mostrar(frase) {
        document.write(`<p>${frase}</p>`);
      }

   const canvas = document.querySelector("canvas");
   const ctx = canvas.getContext('2d', { alpha: false});

   const wC = 1024;
   const hC = wC;

   const xC = 0;
   const yC = 0;

   function bColor (color) {

      ctx.fillStyle = `${color}`;
   }

   function rgb (r, g, b) {

      return `rgb(${r}, ${g}, ${b})`;
   }

   function dRect (color, x, y, w, h) {

      bColor(color);
      ctx.fillRect(x, y, w, h)
   }

   let textura;

   function creeper() {


      dRect('Green', xC, yC, wC, hC);
      dRect('Black', xC+64*2, yC+64*4, 64*4, 64*4); //1.1
      dRect('Black', xC+64*10, yC+64*4, 64*4, 64*4); //1.3
      dRect('black', xC+64*6, yC+64*8, 64*4, 64*6); //2.2
      dRect('black', xC+64*4, yC+64*10, 64*2, 64*6); //3.1  
      dRect('black', xC+64*10, yC+64*10, 64*2, 64*6); //3.3

     //precisa alterar o 1.1 e o 1.3 pra #003300
      if (textura == true) {
         dRect('Black', xC+64*4, yC+64*6, 64*2, 64*2);
         dRect('Black', xC+64*10, yC+64*6, 64*2, 64*2);
         dRect('#003300', xC+64*6, yC+64*8, 64*4, 64*2);
         dRect('#003300', xC+64*4, yC+64*10, 64*2, 64*2);
         dRect('#003300', xC+64*4, yC+64*14, 64*2, 64*2);
         dRect('#003300', xC+64*10, yC+64*10, 64*2, 64*2);
         dRect('#003300', xC+64*10, yC+64*14, 64*2, 64*2);
      }
   } 


</script>


</body>

como fica:

um creeper!