Per ricoprire la figura di sviluppatore web è cruciale avere un’approfondita conoscenza di tecnologie, al servizio degli sviluppatori, quali il linguaggio HTML, il linguaggio CSS e il linguaggio JavaScript. Questi tre linguaggi sono assolutamente necessari per sviluppare applicazioni web e padroneggiarli è sinonimo di consapevolezza in ambito sviluppo web. Potremmo, infatti, definirli come i tre pilastri della programmazione front-end. Distinguiamo un attimo questi linguaggi.
L’acronimo HTML sta per Hyper-Text Markup Language (un linguaggio di markup, letteralmente, linguaggio a marcatori per ipertesti), ovvero il codice che si utilizza per strutturare l’architettura di un sito web. Più semplicemente, l’HTML rappresenta l’ossatura delle pagine web. Non è un linguaggio di programmazione, si tratta di un linguaggio di markup, poiché nel linguaggio HTML conta prevalentemente la sintassi, non c’è semantica.
E il CSS cos è?
Il linguaggio CSS è l’abbigliamento di una pagina web. Se il CSS (Cascading Style Sheets) definisce lo stile (colori, aspetto, ecc.), l’HTML stabilisce la struttura, dal titolo e sottotitolo, passando per eventuali elenchi, fino al piè di pagina (footer). Le classi CSS sono usate per specificare attributi grafici e posizione degli elementi all'interno di un’applicazione web.
Cos è JavaScript?
Il linguaggio JavaScript è un linguaggio di programmazione usato per conferire dinamicità alle pagine web. Imparare JavaScript è davvero utilissimo per rendere il tuo sito interattivo, e per facilitare l’integrazione dei canoni dell ux/ui design.
Come ti abbiamo accennato in uno dei precedenti articoli “imparare Javascript con un gioco”, uno dei modi per imparare a programmare con i nostri tre pilastri dello sviluppo web è farlo attraverso lo sviluppo di un videogioco.
Programmare in JavaScript può essere sorprendentemente funzionale per creare giochi 2D, che sono anche facilmente eseguibili su tutti i dispositivi.
HTML e CSS vengono in aiuto, dando la possibilità di personalizzare e creare il nostro stile. Per imparare JavaScript non è necessario cimentarsi in videogiochi estremamente complessi, basti pensare al minigioco del dinosauro su Google Chrome che si manifesta quando non abbiamo connessione ad Internet. (Dai, di la verità: quanto tempo ci hai passato in assenza di connessione??)
Vediamo, quindi, step-by-step come programmare un videogioco con questi 3 linguaggi.
- Scegli l’IDE o il text editor che preferisci
Per iniziare a scrivere codice, è importante prima scegliere l’ambiente di sviluppo ideale. Per i file HTML e CSS può anche bastare un editor di testo. Scegli il tuo ambiente di lavoro e crea una nuova cartella, all’interno inserisci i file: index.html, style.css e script.js. Per programmare in HTML è importante organizzare i file e avere un ordine all’interno delle cartelle, specialmente se si è ancora alle prime armi.
- Il codice HTML e CSS
Il file index.html conterrà semplici righe di codice HTML. Dopo aver impostato il layout base HTML, inserisci un tag div con l’ID “game” e altri due div all’interno di quest’ultimo con gli ID “character” e “block”. Il personaggio è il dinosauro e il blocco i simpatici cactus che vengono verso di noi. In questo semplice file impareremo a programmare in HTML dalle basi.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Jump Game</title>
6. <link rel="stylesheet" href="style.css">
7. </head>
8. <body>
9. <div id="game">
10. <div id="character"></div>
11. <div id="block"></div>
12. </div>
13. <script src="script.js"></script>
14. </body>
15. </html>
16.
Il tag div è un generico container che serve per strutturare la pagina web. Molto diffuso nel linguaggio HTML.
Per dare uno stile ben definito al nostro documento HTML, dobbiamo affidarci al linguaggio CSS. Nel file style.css applicheremo gli stili ai div appena creati. Selezioniamo l’elemento in base al suo id tramite il simbolo (#).
1. #game {
2. width: 500px;
3. height: 200px;
4. border: 1px solid black;
5. margin: auto;
6. }
Facciamo lo stesso con il div character. Dobbiamo dichiarare la posizione come relative perché gli attributi di posizione come top e left si applicano solo agli elementi posizionati.
1. #character {
2. width: 20px;
3. height: 50px;
4. background-color: red;
5. position: relative;
6. top: 150px; //game height - character height (200 - 50)
7. }
8.
Andiamo a costruire qualcosa di più complesso. Inseriamo una keyframe animation che corrisponde al salto del nostro personaggio. Questa animazione farà scorrere la posizione superiore verso l'alto di 50 px e quindi verso il basso.
1. @keyframes jump {
2. 0%{top: 150px;}
3. 30%{top: 100px;}
4. 70%{top: 100px;}
5. 100%{top: 150px;}
6. }
7.
Un’animazione deve essere specificata dalla regola @keyframes, attraverso cui potremmo gradualmente cambiare da uno stile ad un altro o specificare tutte le proprietà che vogliamo assegnare.
Per creare l’interazione con il nostro personaggio utilizzeremo il linguaggio JavaScript, prima di procedere con lo step successivo, scriviamo una classe animate che richiama l’animazione.
1. .animate {
2. animation: jump 300ms linear;
3. }
- Animiamo il gioco con JavaScript
Per rendere il videogioco “vivo” dobbiamo compilare un file .js. Il file script.js crea una funzione chiamata jump() che aggiunga la classe "animate" al div del personaggio. Ci serviamo di un listener di eventi che resta in attesa del clic dell'utente e quindi esegue la funzione di salto quando viene rilevato il clic.
Creiamo un'altra funzione chiamata removeJump() che rimuove la classe animate. Quindi sarà necessaria una funzione di timeout a jump() che esegue removeJump() al termine dell'animazione del salto. L'animazione non verrà eseguita di nuovo a meno che non la rimuoviamo.
1. var character = document.getElementById("character");
2. document.addEventListener("click",jump);
3. function jump(){
4. character.classList.add("animate");
5. setTimeout(removeJump,300); //300ms = length of animation
6. };
7. function removeJump(){
8. character.classList.remove("animate");
9. }
Per evitare problemi di sovrascrittura della chiamata della funzione jump() basta inserire questo if-statement all’inizio del metodo jump().
1. if(character.classList == "animate"){return;}
Tornando nel file CSS ci occupiamo di assegnare uno stile al div block.
1. #block {
2. width: 20px;
3. height: 20px;
4. background-color: blue;
5. position: relative;
6. top: 130px; //game height - character height - block height (200 - 50 - 20)
7. left: 480px; //game width - block width (500 - 20)
8. animation: block 1s infinite linear;
9. }
10.
Per rendere il blocco animato bisogna utilizzare il keyframes che abbiamo visto in precedenza, così da permettere al blocco di muoversi da destra a sinistra.
1. @keyframes block {
2. 0%{left: 500px}
3. 100%{left: -20px}
4. }
Ora il nostro personaggio è in grado di saltare, ma dobbiamo far finire il gioco se colpiamo il blocco (GAME OVER!). Una funzione chiamata checkDead() che ottiene la posizione del blocco e del personaggio, quindi valuta se sono sovrapposti. Se lo sono, allora hai perso e il gioco finirà.
Creiamo una variabile chiamata characterTop uguale al valore superiore del div del personaggio. getComputedStyle() invece restituirà tutti i valori CSS associati a un elemento e getPropertyValue() specifica la proprietà da cui desideri ottenere il valore.
Ora, questo metodo restituirebbe una stringa con un valore come 100px. A noi interessa solo il valore numerico, quindi eseguiamo un parsing della stringa. All’interno della funzione parseInt() passiamo la stringa come argomento in modo che restituisca il valore come numero intero.
Scriviamo un’istruzione if che controlli se il valore di blockLeft è compreso tra -20px e 20px e il valore di characterTop è maggiore di 130px. Se lo sono, significa che si stanno sovrapponendo (il personaggio e il blocco) e il gioco è finito. Quindi imposteremo un avviso "Game over".
1. var block = document.getElementById("block");
2. function checkDead(){
3. let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
4. let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
5. if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
6. alert("Game over");
7. }
8. }
Ora il gioco è completo e funzionante! In pochi semplici passaggi abbiamo visto come settare l’aspetto front-end di un videogioco, tramite HTML e CSS, per poi gestire la dinamicità del gioco attraverso il linguaggio JavaScript.
Imparare a programmare passa anche attraverso questi piccoli progetti. Nel primo step abbiamo impostato il nostro setup per iniziare a programmare, nel secondo step ci siamo occupati di come programmare in HTML l’aspetto del personaggio del videogioco, dandogli uno stile attraverso le semplici ma efficaci righe del linguaggio CSS, mentre nel terzo step ci siamo addentrati nel core del videogioco imparando JavaScript con poche righe di codice.
Adesso tocca a te! Dai sfogo alla tua inventiva e prova a programmare un tuo personale videogioco con il linguaggio HTML, CSS e JavaScript!
Non dimenticare che, se prima di programmare il tuo primo videogioco dovessi aver bisogno di addentrarti un attimino meglio nel mondo dell HTML e CSS, puoi consultare la nostra guida html e css online!
Buon divertimento!
