Tela di apprendimento

1. Dovrebbe avere familiarità con vscode
2. dovrebbe avere una conoscenza di base di 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>

Successivamente, abbiamo l'elemento "html", che è il contenitore per tutti gli altri elementi della pagina. Ha un attributo “lang” impostato su “en” che specifica la lingua del documento.

All'interno dell'elemento "html", abbiamo l'elemento "head", che contiene meta informazioni sul documento, come la codifica dei caratteri e il titolo del documento. Abbiamo l'elemento "meta" che contiene l'attributo "charset" impostato su "UTF-8" che specifica la codifica dei caratteri del documento. e l'elemento "meta" con l'attributo "http-equiv" impostato su "X-UA-Compatible" e l'attributo "content" impostato su "IE=edge" che assicurano che la pagina venga visualizzata nell'ultima versione di Internet Explorer. Abbiamo anche un elemento "meta" con l'attributo "name" impostato su "viewport" e l'attributo "content" impostato su "width=device-width, initial-scale=1.0" che rende la pagina reattiva alle diverse dimensioni dello schermo.

Abbiamo anche un elemento "link" con l'attributo "rel" impostato su "stylesheet" e l'attributo "href" impostato su "styles.css" che collega il foglio di stile CSS al documento HTML.

Il titolo del documento è impostato nell'elemento “title”.

All'interno dell'elemento "body", abbiamo un elemento "canvas" con un attributo "id" impostato su "canvas1", che è dove il codice JavaScript disegnerà l'animazione. Infine, abbiamo un elemento "script" con l'attributo "src" impostato su "script.js", questo elemento collega il file 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();

Successivamente, definiamo due costanti, "FRAME_WIDTH" e "FRAME_HEIGHT", che sono impostate rispettivamente sulla larghezza e l'altezza dell'elemento canvas. Stiamo anche usando la funzione "console.log" per inviare la variabile di contesto alla console.

Successivamente, creiamo un nuovo oggetto Immagine e lo memorizziamo nella costante "PLAYERIMAGE". Stiamo quindi impostando la proprietà "src" di quell'oggetto immagine sul percorso di un file immagine.

Stiamo anche creando una funzione personalizzata chiamata "animate", questa funzione verrà chiamata ripetutamente in un ciclo utilizzando il metodo requestAnimationFrame. All'interno della funzione animate, utilizziamo prima il metodo "clearRect" per cancellare l'intero canvas. Quindi stiamo usando il metodo "fillRect" per disegnare un rettangolo alle coordinate x, y di (x, 100), con una larghezza e un'altezza di 100 pixel. Successivamente, stiamo usando il metodo "drawImage" per disegnare "PLAYERIMAGE" sulla tela alle coordinate x e y di (50, 50).

Infine, chiamiamo la funzione "animate" una volta per avviare il ciclo di animazione. E la variabile x verrà aggiornata su ogni ciclo per creare l'effetto di animazione.

Per continuare, aumenterò gradualmente il codice e il progetto.