Tela de aprendizagem

1. Deve estar familiarizado com vscode
2. deve ter uma compreensão básica de HTML, CSS e javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

Em seguida, temos o elemento “html”, que é o container de todos os outros elementos da página. Tem um atributo “lang” definido como “en” que especifica o idioma do documento.

Dentro do elemento “html”, temos o elemento “head”, que contém metainformações sobre o documento, como a codificação de caracteres e o título do documento. Temos o elemento “meta” que contém o atributo “charset” definido como “UTF-8” que especifica a codificação de caracteres do documento. e o elemento “meta” com o atributo “http-equiv” definido como “X-UA-Compatible” e o atributo “content” definido como “IE=edge”, o que garante que a página seja renderizada na versão mais recente do Internet Explorer. Também temos um elemento “meta” com o atributo “name” definido como “viewport” e o atributo “content” definido como “width=device-width, initial-scale=1.0” que torna a página responsiva a diferentes tamanhos de tela.

Também temos um elemento “link” com o atributo “rel” definido como “stylesheet” e o atributo “href” definido como “styles.css” que vincula a folha de estilo CSS ao documento HTML.

O título do documento é definido no elemento “title”.

Dentro do elemento “body”, temos um elemento “canvas” com um atributo “id” definido como “canvas1”, que é onde o código JavaScript vai desenhar a animação. Por fim, temos um elemento “script” com o atributo “src” definido como “script.js”, esse elemento vincula o arquivo JavaScript ao documento HTML.

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('2d');

const FRAME_WiDTH = canvas.width = 600;
const FRAME_HEIGHT = canvas.height = 600;

console.log(context);

const PLAYERIMAGE = new Image();
PLAYERIMAGE.src = 'img/shadow_dog.png';

// custom function
let x = 0;
function animate(){
    context.clearRect(0, 0, FRAME_WiDTH, FRAME_HEIGHT);
    context.fillRect(x,100,100,100);
    context.drawImage(PLAYERIMAGE, 50, 50,)

    requestAnimationFrame(animate);
};

animate();

Em seguida, estamos definindo duas constantes, “FRAME_WIDTH” e “FRAME_HEIGHT”, que são definidas para a largura e altura do elemento canvas, respectivamente. Também estamos usando a função “console.log” para enviar a variável de contexto para o console.

Depois disso, estamos criando um novo objeto Image e armazenando-o na constante “PLAYERIMAGE”. Em seguida, estamos definindo a propriedade “src” desse objeto de imagem para o caminho de um arquivo de imagem.

Também estamos criando uma função personalizada chamada “animate”, essa função será chamada repetidamente em um loop usando o método requestAnimationFrame. Dentro da função animar, primeiro usamos o método “clearRect” para limpar toda a tela. Em seguida, estamos usando o método “fillRect” para desenhar um retângulo nas coordenadas x, y de (x, 100), com largura e altura de 100 pixels. Depois disso, estamos usando o método “drawImage” para desenhar o “PLAYERIMAGE” na tela nas coordenadas x e y de (50, 50).

Por último, estamos chamando a função “animate” uma vez para iniciar o loop de animação. E a variável x será atualizada a cada loop para fazer o efeito de animação.

Para continuar, aos poucos estarei crescendo o código e o projeto.