Desenhando o Creeper. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Rhamanda Cathyanna Lima Paiva

| 85.9k xp | 9 posts

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

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

    pincel.fillStyle = "darkgreen";  
    pincel.fillRect(125, 0, 350, 300);

    pincel.fillStyle = "black";
    pincel.fillRect(175, 55, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(335, 55, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(265, 145, 70, 100);

    pincel.fillStyle = "black";
    pincel.fillRect(225, 190, 40, 110);

    pincel.fillStyle = "black";
    pincel.fillRect(335, 190, 40, 110);

</script>

2 respostas

solução!

por LAIO DOS SANTOS ZAGO PASSOS

| 100.8k xp | 31 posts

Professor

27/06/2021

O meu ficou igualzinho o seu, deu uma trabalheira hein. hahahahaha

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

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');

  pincel.fillStyle = 'lightgrey';
  pincel.fillRect(0, 0, 600, 400);

  pincel.fillStyle = 'darkgreen';
  pincel.fillRect(125, 50, 350, 300);

  pincel.fillStyle = 'black';
  pincel.fillRect(175, 100, 90, 90);

  pincel.fillStyle = 'black';
  pincel.fillRect(335, 100, 90, 90);

  pincel.fillStyle = 'black';
  pincel.fillRect(265, 190, 70, 100);

  pincel.fillStyle = 'black';
  pincel.fillRect(225, 240, 40, 110);

  pincel.fillStyle = 'black';
  pincel.fillRect(335, 240, 40, 110);
</script>

por Flávio Melo Nassar

| 20.6k xp | 6 posts

02/07/2021

As minhas coordenadas ficaram um pouco diferentes mais achei que ficou bom, mas utilizei o "pincel.fillStyle = "black "" uma vez só.

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

<script>

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


  pincel.fillStyle = "lightGrey";
  pincel.fillRect(0, 0, 600, 400);

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

  pincel.fillStyle = "black";
  pincel.fillRect(170, 115, 90,90);
  pincel.fillRect(325, 115, 90,90);
  pincel.fillRect(257, 200, 70,100);
  pincel.fillRect(226, 240, 40,110);
  pincel.fillRect(326, 240, 40,110);



</script>