Obiettivo: Applicare i principi delle media queries per creare un sistema a griglia per applicazioni complesse.

Pre-requisiti:

HTML #5 Realizzare applicazioni responsive utilizzando le Media Queries

Teoria

Il sistema a griglia realizzato con le media queries è un approccio efficace per rendere i layout web responsivi e adattabili a diversi dispositivi. Grazie a questa tecnica, è possibile modificare la struttura della pagina in base alle dimensioni dello schermo: ad esempio, su schermi di grandi dimensioni, una griglia potrebbe avere più colonne per sfruttare al meglio lo spazio disponibile, mentre su dispositivi mobili le stesse colonne potrebbero ridursi a una sola, impilando i contenuti in modo verticale per una migliore leggibilità. Nel caso specifico, non viene utilizzato nessun framework o approcci bassati su flexbox o CSS Grid piuttosto viene costruito un proprio sistema utile a comprendere dal punto didattico come funzionano questi approcci.

Codice:

Viene in seguito riportato il codice CSS utile per realizzare il sistema a griglia.
Questo codice crea una griglia responsive utilizzando classi per colonne e media queries per adattare il layout a diversi schermi:
Nello specifico interessanti elementi presenti nel codice sono:

• Box Sizing: L’elemento universale * { box-sizing: border-box; } assicura che padding e bordi siano inclusi nelle dimensioni totali degli elementi, facilitando la gestione dei layout.
• Paragrafi: Gli elementi hanno uno sfondo giallo chiaro, un’altezza di 150px, nessun margine e un bordo nero.
• Righe: La classe .row è impostata per occupare l’intera larghezza disponibile (width: 100%).
• Colonne:
  – Per i larghi schermi (min-width: 1200px), le colonne .col-lg-* vengono impostate con dimensioni proporzionali per realizzare una griglia di 12 colonne, con classi da .col-lg-1 (8.33%) a .col-lg-12 (100%). Ogni colonna ha il float: left per allineare le colonne affiancate.
  – Per i medi schermi (min-width: 950px e max-width: 1199px), le classi .col-md-* seguono la stessa logica, adattandosi a dispositivi di medie dimensioni.
  – Per i piccoli schermi (max-width: 949px), le classi .col-sm-* applicano proporzioni simili, garantendo un layout responsive anche su dispositivi mobili. In questo modo, il layout risponde in modo fluido e si adatta alle dimensioni dello schermo, migliorando l’usabilità su diversi dispositivi.

Viene in seguito riportato il codice HTML utile per realizzazione il sistema a griglia
Questo codice definisce una pagina web con un layout responsive, che si adatta a diverse dimensioni di schermo grazie a classi CSS collegate. Ecco una breve descrizione degli elementi principali:

• Foglio di stile: Il link a "Lezione6.css" permette di caricare uno stile CSS esterno, che contiene le regole di stile per la pagina, tra cui le classi .row, .col-lg-*, .col-md-*, e .col-sm-* che gestiscono il layout responsivo.
• L’intestazione <h1> con testo “Responsive Layout” introduce il tema della pagina.
• La div con classe row contiene otto elementi div, ciascuno con una classe di colonna (col-lg-3, col-md-6, col-sm-12), ognuno dei quali visualizza un elemento p con testo (“Item 1”, “Item 2”, ecc.). Ogni colonna si adatta in base alle dimensioni dello schermo: – Larghi schermi: Ogni div occupa un quarto della larghezza (col-lg-3). – Medi schermi: Ogni div occupa metà larghezza (col-md-6). – Piccoli schermi: Ogni div occupa l’intera larghezza (col-sm-12), creando una visualizzazione a blocchi.

Obiettivo: Applicare i principi delle media queries per creare fogli di stile adattativi in un file HTML.

Pre-requisiti:

HTML #3 CSS

Teoria

Le media queries sono una tecnica di CSS che consente di applicare stili differenti a seconda delle caratteristiche del dispositivo, come la larghezza o l’altezza dello schermo, l’orientamento (verticale o orizzontale), la risoluzione, e altro. Questo strumento è fondamentale per il design responsivo, poiché permette di adattare automaticamente l’aspetto di una pagina web su vari dispositivi come smartphone, tablet e desktop. Ad esempio, si può usare una media query per applicare uno stile specifico ai contenuti quando la larghezza dello schermo è inferiore a 768 pixel oppure quando la larghezza dello schermo è inferiore a 1024 pixel. Questo consente di ottimizzare l’usabilità e l’esperienza dell’utente su schermi di dimensioni diverse, mantenendo una presentazione chiara e leggibile.

Esempio di definizione di una media queries

Viene in seguito riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza inferiore a 768 px. Nel caso specifico il font del titolo h1 viene impostato uguale a 20px;
<style>
@media (min-width: 768px) {
h1{
font-size:20px;
}
}
</style>

Differentemente, viene riportato un esempio di media queries utile per customizzare lo stile per dispositivi con una larghezza compresa tra 768px e 1024px. Nel caso specifico il font del titolo h1 viene impostato uguale a 15px;
<style>
@media (min-width: 768px) and (max-width: 1024px) {
h1{
font-size:20px;
}
}
</style>

Codice:

Obiettivo: Conoscere i tre principali modi per includere un foglio di stile CSS in un file HTML.

Pre-requisiti:

HTML #3 CSS

Teoria

Esistono tre principali modi per includere un foglio di stile CSS in un file HTML:

1. Stile inline sugli elementi HTML:

È possibile aggiungere CSS direttamente a specifici elementi HTML utilizzando l’attributo style. Questo approccio è poco utilizzato per mantenere una buona separazione tra contenuto e presentazione, ma può essere utile per applicare stili veloci o unici:

<p style=”color: #FF0000;”>Questo è un paragrafo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore.

2. Stile interno (internal):

Il CSS può essere inserito direttamente all’interno del file HTML utilizzando il tag <style> all’interno della sezione <head>. Questo metodo consente di scrivere regole CSS che verranno applicate esclusivamente alla pagina corrente. È utile per applicare stili specifici a una singola pagina senza influenzare l’intero sito o quando si desidera testare rapidamente modifiche stilistiche.

All’interno del blocco <style>, è possibile definire stili basati su classi e identificativi (id), che permettono di selezionare e stilizzare gruppi specifici di elementi HTML:

• Classi (Class): Sono utilizzate per applicare stili a più elementi HTML. Si definiscono con un punto (.) nel CSS, e gli elementi HTML che devono ricevere lo stile devono avere l’attributo class.

• Identificativo (Id): Si usano per stilizzare un elemento unico della pagina. Si definiscono con un cancelletto (#) nel CSS, e l’elemento HTML deve avere un attributo id. Poiché l’id dovrebbe essere unico, questo metodo si utilizza quando si vuole applicare uno stile specifico a un solo elemento:

L’uso di classi e identificativi all’interno di stili interni permette una maggiore flessibilità e organizzazione, garantendo che lo stesso stile possa essere riutilizzato o applicato in modo selettivo a elementi specifici della pagina.

3. Incorporazione esterna tramite link:

<link rel=”stylesheet” href=”style.css”>

Viene in seguito riportato un esempio di pagina HTML e relativo file css in cui viene effettuata l’incorporazione esterna tramite link.

Obiettivo: Utilizzare il linguaggio CSS per personalizzare la struttura di un sito WEB.

CSS

Il CSS (Cascading Style Sheets) è uno strumento fondamentale per la personalizzazione dei siti web, poiché consente di separare la struttura HTML dal design, permettendo agli sviluppatori di controllare l’aspetto e il layout delle pagine in modo flessibile ed efficiente. Grazie al CSS, è possibile modificare facilmente colori, font, margini, spaziature e posizionamento degli elementi, migliorando l’esperienza utente e l’accessibilità. Inoltre, il CSS facilita l’adattamento dei siti a diversi dispositivi e risoluzioni, supportando il responsive design, che è essenziale per garantire una visualizzazione ottimale su smartphone, tablet e desktop. In sostanza, il CSS permette di creare interfacce visivamente accattivanti e funzionali, senza modificare il contenuto di base del sito.
Esistono differenti modi per inserire il codice CSS in una pagina HTML. Il più semplice è quello di utilizzare l’attributo style. Ad esempio il seguente codice imposta il codice colore FF5733 (arancione acceso tendente al rosso) al seguente titolo:

<h1 style=”color: #FF5733;”>Questo è un titolo arancione</h1>

La codifica esadecimale per rappresentare i colori è un sistema che utilizza sei caratteri, divisi in tre coppie, per indicare l’intensità dei tre colori primari della luce: rosso, verde e blu (RGB). Ogni coppia di caratteri esadecimali rappresenta un valore numerico che va da 00 a FF, dove 00 indica l’assenza di colore e FF indica il massimo livello di intensità (255 in base decimale). Ad esempio, nel codice esadecimale #FF5733, la prima coppia (FF) rappresenta la quantità di rosso (255), la seconda coppia (57) indica il verde (87 in decimale) e la terza coppia (33) rappresenta il blu (51 in decimale). La combinazione di questi valori produce un colore specifico. Questo sistema permette di creare una vasta gamma di colori, con più di 16 milioni di possibili combinazioni, dando grande flessibilità nella definizione delle tonalità per il web e altri ambienti grafici.

Vengono in seguito analizzati alcuni esempi di css utili per customizzare le pagine in modo appropriato. Tali esempi riportano alcune delle principali proprietà più comune utilizzate.

1. Cambiare il colore del testo

La proprietà che indica il colore del testo è color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore.
Ad esempio:

<p style=”color: #FF0000;”>Questo è un paragrafo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore.

2. Cambiare il colore del background:

La proprietà che indica il colore del testo è background-color. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare il suo colore di sfondo.
Ad esempio:

<p style=”background-color: #FF0000;”>Questo è un paragrafo con sfondo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del colore di sfondo.

3. Cambiare il font-size:

La proprietà che indica la dimensione del testo è font-size. Definendo tale proprietà nell’attributo style di uno specifico elemento è possibile modificare la dimensione del testo.
Ad esempio:

<p style=”font-size: 18px;”>Questo è un paragrafo rosso</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene effettuata la parametrizzazione del font-size.

4. Introdurre un margine in un testo (rientro a destra):

La proprietà margin viene utilizzata per gestire lo spazio esterno intorno a un elemento, separandolo dagli altri elementi nella pagina. Può essere applicata in modo uniforme a tutti i lati con la sintassi margin: valore;, oppure specificata individualmente per ogni lato con margin-top, margin-right, margin-bottom, e margin-left. I margini possono essere espressi in diverse unità, come pixel (px) o percentuali (%). L’uso corretto dei margini è essenziale per garantire una buona spaziatura e una disposizione pulita del layout.

<p style=”margin-left: 20px;”>Questo è un paragrafo con rientro a destra</p>

Viene in seguito riportato un esempio di pagina HTML in cui viene introdotto un margine sinistro.

5. Immagine al centro:

Per centrare una immagine si utilizzano una serie di proprietà: block e margine. Nello specifico:

• display: block; per fare in modo che l’immagine si comporti come un elemento a blocco, consentendo di applicare margini orizzontali.
• margin-left: auto; margin-right: auto; per centrare l’immagine orizzontalmente all’interno del contenitore.

<img src=”immagine.jpg” style=”display: block; margin-left: auto; margin-right: auto;”/> 

Viene in seguito riportato un esempio di pagina HTML in cui viene inserita una immagine a centro pagina.

Obiettivo: Utilizzare i link per: realizzare collegamenti tra pagine HTML o navigare più facilmente attraverso le sezioni delle stessa pagina.

Link

I link in HTML sono uno strumento fondamentale per la navigazione e possono essere suddivisi in due principali categorie: link interni alla stessa pagina e link verso altre pagine. I link interni, noti anche come “anchor links”, permettono di spostarsi rapidamente tra le sezioni di una singola pagina. Sono utili in pagine lunghe o con contenuti strutturati in capitoli, poiché consentono all’utente di accedere direttamente a una specifica parte della pagina tramite un identificatore (ID) associato a un elemento. D’altra parte, i link verso pagine esterne si dividono in due tipi: link interni e link esterni. I link interni rimandano ad altre pagine o risorse all’interno dello stesso sito web, mantenendo gli utenti all’interno del dominio. I link esterni, invece, puntano a pagine esterne al sito, spesso utilizzati per citare fonti o fornire informazioni aggiuntive, ma possono condurre l’utente lontano dal sito originale. Entrambi i tipi di link migliorano l’esperienza di navigazione, collegando contenuti e facilitando l’accesso alle informazioni.

1. Anchor link (Link interni alla stessa pagina)

Il tag utilizzato per creare i link in HTML è l’elemento <a>, che sta per “anchor”. Questo tag contiene l’attributo href(hyperlink reference), che (in questo caso) specifica l’identificativo della sezione alla quale il link punta.
L’identificativo (ID) è un attributo che definisce in modo univoco un elemento all’interno di una pagina HTML. Ogni ID deve essere unico per tutta la pagina, il che significa che non puoi avere più di un elemento con lo stesso ID.
Ad esempio:

<h2 id=”sezione1″>Sezione 1</h2> 
<p id=”paragrafo1″>Questo è un paragrafo con ID “paragrafo1”.</p>

Il codice

Viene in seguito riportato il codice di una serie di anchor links che puntano a differenti sezioni all’interno della stessa pagina.

2. Link verso altre pagine (esterne)

Anche in questo caso, il tag utilizzato per creare i link è l’elemento <a>. A differenza dal caso precedente l’attributo href(hyperlink reference) deve contenere l’indirizzo della pagina alla quale si vuole effettuare il collegamento.
Ad esempio:

<a href=”https://www.google.com”>Visita Google</a>

Il codice

Viene in seguito riportato il codice di una serie di anchor links che puntano a differenti sezioni all’interno della stessa pagina.

3. Link verso altre pagine (interne)

Anche in questo caso, il tag utilizzato per creare i link è l’elemento <a>. A differenza dal caso precedente l’attributo href(hyperlink reference) deve contenere l’indirizzo relativo (può essere espresso anche il percorso assoluto ma non verrà analizzato in questa guida) della pagina alla quale si vuole effettuare il collegamento.
Un percorso relativo collega a una pagina all’interno dello stesso sito senza specificare il dominio completo. Si basa sulla posizione attuale della pagina nel sito.
Ad esempio:

<a href=”pagina2.html”>Vai a Pagina 2</a>
<a href=”cartella/pagina3.html”>Vai a Pagina 3</a>
<a href=”../pagina4.html”>Vai a Pagina 4</a>

Il percorso relativo dipende dalla posizione della pagina che si vuole linkare in relazione alla pagina corrente.
Nel primo caso le due pagine si trovano nello stessa cartella. Nel secondo caso in una sotto-cartella. Nel terzo caso in una cartella superiore.

Obiettivo: Realizzare una pagina HTML che preveda l’utilizzo dei tag principali per inserire Titoli, Paragrafi, Liste, Immagini e Ritorni a capo.

La pagina HTML

HTML, acronimo di HyperText Markup Language, è il linguaggio di markup standard utilizzato per la creazione e la strutturazione di pagine web. È uno dei componenti fondamentali del World Wide Web ed è essenziale per la visualizzazione di contenuti su Internet. HTML si basa su un sistema di marcatura che utilizza una serie di tag per definire la struttura e il significato del contenuto all’interno di una pagina web. Questi tag forniscono istruzioni al browser su come presentare e organizzare il contenuto, consentendo agli sviluppatori di creare pagine web complesse e interattive.
I tag HTML sono elementi fondamentali del linguaggio di markup. Ogni tag è racchiuso tra parentesi angolari < > e può contenere attributi che forniscono informazioni aggiuntive sul tag stesso. Gli attributi forniscono informazioni aggiuntive sui tag e sui loro comportamenti. Ad esempio, l’attributo src dell’elemento specifica l’URL dell’immagine da visualizzare.

I Principali Tag

• Il tag <h1> in HTML viene utilizzato per definire il titolo principale di una pagina web. È il titolo di livello più alto e di solito viene visualizzato con una dimensione del carattere più grande rispetto agli altri elementi del testo sulla pagina.
• Il tag <h2> in HTML viene utilizzato per definire un titolo di secondo livello all’interno di una pagina web. È utilizzato per indicare una sezione o un sotto-titolo all’interno di un contesto più ampio rispetto al tag <h1>
• Il tag <h3> in HTML viene utilizzato per definire un titolo di terzo livello all’interno di una pagina web. Viene utilizzato per indicare una sezione o un sotto-sottotitolo all’interno di un contesto più specifico rispetto al tag <h2>
• Il tag <p> in HTML viene utilizzato per definire un paragrafo di testo all’interno di una pagina web. Questo tag è essenziale per organizzare e strutturare il contenuto testuale in paragrafi separati.
• Il tag <ol> in HTML viene utilizzato per creare una lista ordinata di elementi, mentre il tag <li> (list item) viene utilizzato all’interno del tag <ol> per definire ciascun elemento della lista.
• Il tag <ul> in HTML viene utilizzato per creare una lista non ordinata di elementi, mentre il tag <li> (list item) viene utilizzato all’interno del tag <ul> per definire ciascun elemento della lista.
• Il tag <br> in HTML viene utilizzato per inserire un’interruzione di linea, cioè una nuova riga, all’interno di un documento HTML. Questo tag non ha un tag di chiusura (<br>) poiché è un tag vuoto, il che significa che non contiene contenuti o testo.
• Il tag <img> in HTML viene utilizzato per inserire un’immagine all’interno di una pagina web. Questo tag è un elemento vuoto, il che significa che non ha un tag di chiusura e non contiene alcun contenuto. Questo tag prevede una serie di attributi quali: l’attributo src specifica l’URL o il percorso del file dell’immagine da visualizzare, l’attributo alt fornisce un testo alternativo che viene mostrato se l’immagine non può essere visualizzata, l’attributo width che fornisce indicazioni in merito alla grandezza dell’immagine, l’attributo height che fornisce indicazioni in merito alla altezza dell’immagine.
  .

Il codice

Viene in seguito riportato il codice di una ipotetica pagina web statica.

Esercizio:

Realizzare il sito di una semplice ricetta che preveda la seguente struttura

• Titolo
• Immagine
• Descrizione della ricetta
• Lista degli ingredienti
• Procedimento

Obiettivo: Realizzare un programma che implementi un gioco di calcio (nello specifico calci di rigore) utilizzando il linguaggio di programmazione C++.

I Calciatori

Vengono in seguito riportate una serie di Carte di alcuni giocatori dalle quali si può prendere spunto per la realizzazione del gioco. Ogni carta è caratterizzata da una serie di attributi (differenti per portieri e giocatori) che saranno definiti nel codice attraverso le strutture Calciatore e Portiere.
Nello specifico, gli attributi dei portieri sono:

• string nome;
• string ruolo;
• int tuffo;
• int presa;
• int rinvio;
• int riflessi;
• int reattivita;
• int piazzamento;

Differentemente, gli attributi dei Calciatori sono:

• string nome;
• string ruolo;
• int velocita;
• int tiro;
• int passaggio;
• int dribbling;
• int difesa;
• int fisico;

Il codice

Viene in seguito illustrato il codice utilizzato per implementare un gioco di combattimento tra Pokemon.
Il programma simula un gioco di combattimento tra due allenatori di Pokémon, ognuno con un mazzo di 3 Pokémon. Ogni Pokémon ha un nome, un tipo, dei punti vita, un attacco e una debolezza. Il codice gestisce la creazione di mazzi di Pokémon, l’inizializzazione delle proprietà di ogni Pokémon, e la simulazione di combattimenti tra i Pokémon di due allenatori.

Struttura del codice

1. Inclusioni e dichiarazioni globali:

   • La struttura Portiere definisce le caratteristiche dei portieri.
   • La struttura Calciatore definisce le caratteristiche dei calciatori.
   • La struttura Squadra è costituita dal nome della squadra da un portiere e da due giocatori.

2. Variabili locali:

   • Vengono dichiarati differenti oggetti di tipo Portiere e Calciatore (uno per ogni giocatore: Courtois, Martinez, Donnarumma, Messi, DiMaria, Barella, Immobile.

3. Funzioni:

   • inizializzaMessi(Calciatore &c): inizializza un oggetto di tipo calciatore con i valori specifici di Messi.
   • inizializzaDonnarumma(Portiere &p): inizializza un oggetto di tipo calciatore con i valori specifici di Donnarumma.
   • intro(): stampa un messaggio di benvenuto.

   • rigore(Calciatore calciatore, Portiere portiere, int indice)): Simula un calcio di rigore. La funzione dovrebbe restituire 1 se il calciatore segna e 0 se il portiere para.
   • sfida(Squadra team1, Squadra team2, int numRigori): simula una partita ai calci di rigore Questa funzione, richiama la funzione rigore per ciascun rigore tirato.

4. Funzione main():

   • Definisce le squadre.
   • Vengono inizializzati i calciatori ed i portieri.
   • La funzione intro() stampa un messaggio di benvenuto.

   • Viene eseguita la funzione sfida.

Modifiche:

Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Elementi di Randomicità nel calcio di rigore
  – Ogni tiro dovrebbe essere caratterizzato da un elemento di randomicità.

Obiettivo: Realizzare un programma che implementi un gioco di combattimento tra Pokemon utilizzando il linguaggio di programmazione C++.

I Pokemon

Vengono in seguito riportate una serie di Carte Pokemon dalle quali si può prendere spunto per la realizzazione del gioco. Ogni carta è caratterizzata da una serie di attributi che saranno definiti nel codice attraverso la struttura pokemon. Questi attributi sono: nome, tipo, puntiVita, nomeAttacco, danniAttacco, debolezza.

Il codice

Viene in seguito illustrato il codice utilizzato per implementare un gioco di combattimento tra Pokemon.
Il programma simula un gioco di combattimento tra due allenatori di Pokémon, ognuno con un mazzo di 3 Pokémon. Ogni Pokémon ha un nome, un tipo, dei punti vita, un attacco e una debolezza. Il codice gestisce la creazione di mazzi di Pokémon, l’inizializzazione delle proprietà di ogni Pokémon, e la simulazione di combattimenti tra i Pokémon di due allenatori.

Struttura del codice

1. Inclusioni e dichiarazioni globali:

   • La struttura pokemon definisce un Pokémon con:
     – nome: nome del Pokémon (es. Pikachu, Charmander).
     – tipo: tipo del Pokémon (es. “fuoco”, “acqua”).
     – puntiVita: salute del Pokémon.
     – nomeAttacco: nome dell’attacco del Pokémon.
     – danniAttacco: danno dell’attacco.
     – debolezza: tipo di attacco che danneggia maggiormente il Pokémon.

2. Variabili globali:

   • Vengono dichiarati sei oggetti di tipo pokemon (uno per ogni Pokémon di gioco: Pikachu, Charmander, Pidgey, Squirtle, Vulpix, Bulbasaur).
   • Vengono dichiarate delle costanti di tipo stringa per rappresentare i tipi di Pokémon: elettro, fuoco, acqua, ghiaccio, lotta.

3. Funzioni:

   • inizializzaPikachu(pokemon &p): inizializza un oggetto di tipo pokemon con i valori specifici di Pikachu.
   • inizializzaCharmander(pokemon &p): inizializza un oggetto di tipo pokemon con i valori specifici di Charmander.
   • intro(): stampa un messaggio di benvenuto. La funzione è vuota e non implementata.
   • creazioneMazzi(pokemon mazzo1[], pokemon mazzo2[], int numPokemon): crea due mazzi con i Pokémon specificati. Ogni mazzo contiene 3 Pokémon.
   • combattimento(pokemon &p1, pokemon &p2): gestisce un combattimento tra due Pokémon. La funzione non è ancora implementata in modo completo, ma stampa un messaggio indicando i Pokémon che stanno combattendo. La funzione dovrebbe restituire 1 se il primo Pokémon vince e 2 se il secondo Pokémon vince.
   • combattimentoMazzi(pokemon mazzo1[], pokemon mazzo2[], int numPokemon): simula un combattimento tra i mazzi dei due allenatori. Chiama la funzione combattimento per ciascun Pokémon dei due mazzi. La funzione dovrebbe restituire 1 se il giocatore 1 vince più sfide e 2 se il giocatore 2 vince più sfide.

4. Funzione main():

   • Definisce i nomi degli allenatori e il numero di Pokémon in ciascun mazzo (3 per ciascun giocatore).
   • Viene inizializzato Pikachu e Charmander tramite le funzioni inizializzaPikachu e inizializzaCharmander.
   • La funzione intro() stampa un messaggio di benvenuto (anche se non implementata).
   • I mazzi dei due giocatori vengono creati dalla funzione creazioneMazzi.
   • Viene avviato un ciclo per eseguire un numero definito di sfide (3 in questo caso). Ad ogni sfida, si simula un combattimento tra i Pokémon nei mazzi.

Modifiche:

Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Elementi di Randomicità Probabilità di Colpo Critico:
  – Ogni attacco potrebbe avere una probabilità di infliggere danni doppi o tripli, per simulare i colpi critici. – Mossa Speciale Casuale: I Pokémon potrebbero avere un’abilità speciale che si attiva in modo casuale (per esempio, un attacco che colpisce 2 volte di seguito).
• Aggiungere Altri Pokémon: I giocatori potrebbero scegliere tra una lista di Pokémon più ampia, con caratteristiche diverse (punteggi vita, tipo di attacco, ecc.).
• Tipi di Attacco e Interazioni con i Tipi: Ogni Pokémon potrebbe avere una lista di attacchi con effetti diversi, e gli attacchi potrebbero essere influenzati dal tipo del Pokémon avversario. Ad esempio: Fuoco è efficace contro Erba. Acqua è efficace contro Fuoco. Elettrico è efficace contro Acqua. Potrebbero implementare la logica che, in base al tipo di attacco e al tipo di Pokémon, i danni subiti o inflitti cambiano.
• Punti Esperienza e Livelli Punti Esperienza (XP): Ogni volta che un Pokémon vince una battaglia, guadagna dei punti esperienza che lo fanno salire di livello, aumentando così i suoi punti vita o danni.
• Evoluzione: I Pokémon potrebbero evolversi quando raggiungono un certo livello, aumentando le loro statistiche (esempio: Pikachu evolve in Raichu).
• Intelligenza Artificiale: Implementare un’IA per il secondo giocatore.
• Modalità Storia: I giocatori potrebbero affrontare una serie di battaglie contro allenatori (che potrebbero avere Pokémon diversi) fino a raggiungere il “campione” finale.

Obiettivo: Realizzare un programma che implementi una Slot Machine utilizzando il linguaggio di programmazione C++.

Il codice

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione di una Slot Machine. Nel dettaglio, il codice prevede una netta distinzione tra il motore grafico che permette di stampare la griglia del gioco ed il codice di gestione del gioco (i.e., gestione dei soldi, controllo delle vincite, etc…).

• Motore Grafico: La funzione void grafica(char s[]) ha il ruolo di stampare la griglia di gioco definita nell’array di caratteri t che contiene le informazioni relative alle celle del tabellone e aggiorna la console con il contenuto di ogni cella, disegnando una griglia di gioco.

• Codice di gestione del gioco: La dinamica del gioco viene sviluppata all’interno della funzione main. Nel dettaglio l’intero gioco viene implementato attraverso un ciclo while indefinito che prevede la condizione (soldi>0). In questo caso il giocatore continuerà a giocare fino a che avrà soldi a disposizione. Ogni volta che il giocatore preme invio per giocare, vengono rispettivamente: decrementi i soldi, generati nuovi valori nella griglia della slot, stampata la grafica, e controllate eventuali vincite.
  Sono inoltre definite una serie di funzioni, alcune già implementate ed altre invece da implementare al fine di terminare il gioco.
• Costanti e Definizione dei colori: Utilizza macro per definire alcuni colori (rosso, verde, giallo, blu) per il testo in console e applicarli tramite escape codes. La macro NUMCELLE definisce la dimensione del tabellone (3×3 = 9 celle).
• Funzione mySleep(int seconds): Definisce una versione personalizzata della funzione sleep, compatibile con l’ambiente di esecuzione online di OnlineGDB, per ritardare l’output di un certo numero di secondi. In aggiunta, std::cout.flush() forza l’output immediato del buffer di stampa.
• Funzione intro(): Visualizza un messaggio: Best Slot Machine Ever usando colori diversi per ogni parola (“Best”, “Slot”, “Machine”, “Ever”) con una pausa tra ognuna. Chiede poi all’utente di premere Invio per proseguire.
• Funzione regole(): È una funzione vuota che può essere riempita per mostrare le regole del gioco. Al momento, non ha alcuna implementazione.
• Funzione generazioneSlot(int slot[]): genera il contenuto della slot machine riempiendo ogni cella con un numero casuale compreso tra 0 e 2. Ogni numero rappresenta un simbolo differente.
  Funzione conversioneSlot(int slot[], char slotCaratteri[]): converte i valori interi generati in generazioneSlot in caratteri. I valori rappresentano i simboli:
• Funzione controlloVittoria(char s[], int &soldi): verifica se c’è una combinazione vincente nella slot machine

https://onlinegdb.com/cDD7cRgAy

Modifiche:

Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Completare le funzioni di riferimento per terminare il gioco.
  Design più Creativo per il Tabellone: Offrire temi personalizzati per il tabellone e simboli differenti.

Obiettivo: Realizzare un programma che implementi il gioco del TRIS utilizzando il linguaggio di programmazione C++.

Il codice

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco del TRIS. Nel dettaglio, il codice prevede una netta distinzione tra il motore grafico che permette di stampare la griglia del gioco ed il codice di gestione del gioco (i.e., scelta della posizione, controllo del vincitore etc…).

• Motore Grafico: La funzione void grafica(char t[]) ha il ruolo di stampare la griglia di gioco definita nell’array di caratteri t che contiene le informazioni relative alle celle del tabellone e aggiorna la console con il contenuto di ogni cella, disegnando una griglia di gioco.

• Codice di gestione del gioco: La dinamica del gioco viene sviluppata all’interno della funzione main. Nel dettaglio l’intero gioco viene implementato attraverso un ciclo while indefinito che prevede l’impiego di due condizioni ((vittoriaG1==0) && (vittoriaG2==0)). In questo caso i giocatori continueranno a giocare fino a che uno dei due non vince e la variabile di riferimento è impostata uguale ad 1. Ogni volta che un giocatore sceglie la posizione all’interno della griglia, viene aggiornata la GUI attraverso la funzione, precedentemente illustrata, grafica(tabellone).
  Sono inoltre definite una serie di funzioni, alcune già implementate ed altre invece da implementare al fine di terminare il gioco.
• Costanti e Definizione dei colori: Utilizza macro per definire alcuni colori (rosso, verde, giallo, blu) per il testo in console e applicarli tramite escape codes. La macro NUMCELLE definisce la dimensione del tabellone (3×3 = 9 celle).
• Funzione mySleep(int seconds): Definisce una versione personalizzata della funzione sleep, compatibile con l’ambiente di esecuzione online di OnlineGDB, per ritardare l’output di un certo numero di secondi. In aggiunta, std::cout.flush() forza l’output immediato del buffer di stampa.
• Funzione intro(): Visualizza un messaggio di benvenuto al gioco del tris usando colori diversi per ogni parola (“Il”, “Gioco”, “del”, “Tris”) con una pausa tra ognuna. Chiede poi all’utente di premere Invio per proseguire.
• Funzione regole(): È una funzione vuota che può essere riempita per mostrare le regole del gioco. Al momento, non ha alcuna implementazione.
• Funzione inserimentoPosizione(char tabellone[], char simbolo): Chiede all’utente di inserire una posizione (indice da 0 a 8) dove desidera giocare il proprio simbolo (‘x’ o ‘y’). La funzione aggiorna l’array tabellone on il simbolo alla posizione specificata. È presente un commento per inserire un controllo di validità per evitare inserimenti fuori dai limiti dell’array o su celle già occupate.
• Funzione controlloVittoriaG1(char t[], char mark): Controlla se il giocatore ha vinto. Verifica solo una combinazione di vittoria, cioè se le prime tre celle del tabellone contengono lo stesso simbolo (mark). Ritorna 1 se la condizione è vera e 0 altrimenti. Questa funzione è molto semplice e non verifica tutte le combinazioni vincenti (orizzontali, verticali, diagonali), quindi necessita di ampliamento.

https://onlinegdb.com/4tpuwLrc3

Modifiche:

Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Completare le funzioni di riferimento per terminare il gioco.
  Design più Creativo per il Tabellone: Offrire temi personalizzati per il tabellone e per i simboli (X e O) che i giocatori possono scegliere, creando un’esperienza più personalizzata.
• Implementare una intelligenza artificiale come avversario, così i giocatori possono competere anche da soli (introdurre differenti livelli di difficoltà, facile medio e difficile).
• Implementare un sistema di punteggio e statistiche che memorizzi il numero di vittorie, sconfitte e pareggi in una sessione.
• Tabellone alternativo: realizzare un tabellone alternativo 4×4 del tris.