Lienzo de aprendizaje

1. Debe estar familiarizado con vscode
2. debe tener una comprensión básica de HTML, CSS y 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>

A continuación, tenemos el elemento "html", que es el contenedor de todos los demás elementos de la página. Tiene un atributo "lang" establecido en "en" que especifica el idioma del documento.

Dentro del elemento "html", tenemos el elemento "head", que contiene metainformación sobre el documento, como la codificación de caracteres y el título del documento. Tenemos un elemento "meta" que contiene el atributo "juego de caracteres" establecido en "UTF-8" que especifica la codificación de caracteres del documento. y el elemento "meta" con el atributo "http-equiv" establecido en "X-UA-Compatible" y el atributo "contenido" establecido en "IE=edge", lo que garantiza que la página se represente en la última versión de Internet Explorer. También tenemos un elemento "meta" con el atributo "nombre" establecido en "ventana gráfica" y el atributo "contenido" establecido en "ancho = ancho del dispositivo, escala inicial = 1.0", lo que hace que la página responda a diferentes tamaños de pantalla.

También tenemos un elemento "enlace" con el atributo "rel" establecido en "hoja de estilo" y el atributo "href" establecido en "estilos.css" que vincula la hoja de estilo CSS con el documento HTML.

El título del documento se establece en el elemento "título".

Dentro del elemento "cuerpo", tenemos un elemento "canvas" con un atributo "id" establecido en "canvas1", que es donde el código JavaScript dibujará la animación. Finalmente, tenemos un elemento "script" con el atributo "src" establecido en "script.js", este elemento vincula el archivo JavaScript al 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();

A continuación, estamos definiendo dos constantes, "FRAME_WIDTH" y "FRAME_HEIGHT", que se establecen en el ancho y alto del elemento del lienzo, respectivamente. También estamos usando la función "console.log" para enviar la variable de contexto a la consola.

Después de eso, estamos creando un nuevo objeto Imagen y almacenándolo en la constante "IMAGEN DEL JUGADOR". Luego estamos configurando la propiedad "src" de ese objeto de imagen en la ruta de un archivo de imagen.

También estamos creando una función personalizada llamada "animar", esta función se llamará repetidamente en un bucle usando el método requestAnimationFrame. Dentro de la función de animación, primero usamos el método "clearRect" para borrar todo el lienzo. Luego estamos usando el método "fillRect" para dibujar un rectángulo en las coordenadas x, y de (x, 100), con un ancho y alto de 100 píxeles. Después de eso, estamos usando el método "drawImage" para dibujar la "IMAGEN DEL JUGADOR" en el lienzo en las coordenadas x e y de (50, 50).

Por último, estamos llamando a la función "animar" una vez para iniciar el bucle de animación. Y la variable x se actualizará en cada ciclo para hacer el efecto de animación.

Continuará, poco a poco iré haciendo crecer el código y el proyecto.