Indice
Introduzione
Dove Trovo Scratch
Scratch – Lezione 1 – Impariamo le basi del programma partendo da un semplice gioco (parte 1)
Scratch – Lezione 2 – Impariamo le basi del programma partendo da un semplice gioco (parte 2)
Introduzione
Quando ci si avvicina allo studio della programmazione, specie nell’ambito scolastico, spesso si sceglie di iniziare seguendo un approccio veloce e snello, che consenta agli studenti di apprendere le basi della progettazione degli algoritmi, in maniera visuale, tralasciando in un primo momento la complessità dell’implementazione del codice e concentrandosi sul metodo che porta alla soluzione di un problema.
Per fare questo ci si aiuta con Scratch, un ambiente di programmazione a blocchi per il coding e la robotica educativa, utilizzato da ragazzi e adulti. Infatti, permette facilmente di implementare storie, quiz, giochi e di gestire anche schede come Arduino, per la robotica o, di frequente, anche per applicazioni di domotica.
Dove trovo Scratch?
Nel sito ufficiale di Scratch, https://scratch.mit.edu/ è possibile scaricare la versione per Windows, Mac, ChromeOS o Android del popolare software.
In alternativa, senza scaricare ed installare nulla sul proprio computer, è possibile utilizzare il programma direttamente online, al seguente indirizzo:
https://scratch.mit.edu/projects/editor/?tutorial=getStarted
Lezione 1 – Impariamo le basi del programma partendo da un semplice gioco (parte 1)
Impariamo a muoverci all’interno dell’ambiente di programmazione mettendoci subito a progettare un semplice gioco: Il labirinto.
Il nostro personaggio (nel gergo tecnico del programma, denominato “Sprite“), dovrà districarsi tra le pareti che abbiamo disseminato lungo l’ambiente di lavoro, attraverso l’uso dell’editor integrato, per raggiungere il traguardo.
In questo esercizio impareremo a:
- scegliere, creare, importare o rimuovere uno sfondo
- scegliere o rimuovere uno Sprite
- orientarci tra gli strumenti di Scratch dell’area:
- movimento;
- aspetto;
- situazioni;
- controllo;
- sensori;
Nella seconda parte di questo esercizio, impareremo a:
- gestire l’input dell’utente
- utilizzare gli strumenti dell’area:
- suono;
- operatori;
- variabili;
Ecco subito il video tutorial della prima parte dell’esercizio!
Analizziamo l’area di lavoro e dopo cominciamo a vedere i vari passi dell’esercizio.
L’area di lavoro
Familiarizziamo con l’ambiente di lavoro. Sulla destra troviamo l’area di lavoro in cui si muove il personaggio, lo Sprite.
Muovendo lo Sprite ci accorgiamo che cambiano le coordinate della sua posizione, mostrate nel riquadro rosso. La posizione x=0 e y=0 corrisponde al centro dell’area di lavoro (l’origine degli assi cartesiani).
Da qui è possibile cambiare le dimensioni del personaggio e gestire la sua direzione; in questo caso è 100%, 90 gradi (riquadro viola).
Inoltre, è possibile rinominare lo Sprite, decidere di renderlo visibile o meno oppure eliminarlo (riquadro azzurro).
Nel riquadro nero è presente l’icona a forma di gatto in cui è possibile scegliere un nuovo sprite tra quelli disponibili, disegnarne uno, aggiungerne uno a caso o importarlo da un’immagine.
In basso a destra (riquadro rosa), troviamo la sezione sfondi, con l’icona che permette di sceglierne uno tra quelli disponibili, disegnarne uno, aggiungerne uno a caso o importarlo da un’immagine.
Cominciamo:
1) Aggiungiamo uno sprite diverso e creiamo un’ambiente per il gioco
Premiamo il pulsante a forma di cestino per cancellare lo sprite (riquadro azzurro, Figura 3), e dall’icona a forma di gatto ne selezioniamo uno nuovo: “Beetle“. Portiamo la sua dimensione a 50% agendo sulla casella dimensioni (riquadro viola).
Poi dall’icona sfondi (riquadro rosa, Figura 3), scegliamo l’opzione per disegnare un nuovo sfondo (icona pennello).
Il riquadro rosso mostra gli strumenti da disegno. Prendiamo il rettangolo, selezioniamo il colore viola e disegniamo delle pareti. Infine, scegliendo il colore verde disegniamo un rettangolo che rappresenti il punto d’arrivo del personaggio. Con lo strumento testo, selezionando il colore rosso scriviamo “VITTORIA“.
2) Scriviamo il codice per il personaggio
In alto a sinistra, clicchiamo la linguetta “Codice” per spostarci nella sezione utile a scrivere il codice
e selezioniamo, nell’area dello sprite (riquadro azzurro, Figura 3), il nostro personaggio Beetle.
Il codice che scriveremo sarà riferito a questo sprite, non allo sfondo. Per essere sicuri di ciò, in alto a destra, in trasparenza, deve comparire l’icona del nostro personaggio.
Adesso iniziamo a comporre il codice con i blocchi.
3) Movimento personaggio
Sul menu di sinistra, sono presenti le icone da cui prelevare i blocchi di codice per il nostro programma. Tali blocchi si incastrano l’uno con l’altro come se fossero magnetici. In questa fase, vedremo Movimento, Aspetto, Situazione, Controllo e Sensori.
Dal blocco Situazioni, scegliamo “quando si preme il tasto” e selezioniamo freccia giù.
Dal blocco Movimento, scegliamo “punta in direzione” e selezioniamo la posizione 180° e “fai 10 passi“.
Adesso è già possibile testare che il personaggio riesca a muoversi verso il basso quando si preme il tasto “freccia giù” nella tastiera.
Allo stesso modo cloniamo il codice replicando gli altri 3 movimenti (su, destra e sinistra) e adattando il tasto e la direzione corretta. Per clonare il codice a partire da un’istruzione in poi, basta cliccare col tasto destro del mouse sulla prima istruzione da clonare e scegliere “Duplica”.
4) Evento tocco parete
In questo momento, quando il personaggio tocca la parete verde non succede nulla, anzi ci passa attraverso. Per gestire tale evento occorre inserire il blocco “sta toccando il colore” da Sensori. Questo blocco però non può esistere da solo, ha bisogno di essere inglobato dentro un blocco condizionale “Se…. Allora” che troviamo nella sezione Controllo. Basta trascinarlo dentro per costruire la nostra istruzione.
Dopo aver inserito la condizione, per essere sicuri di usare il colore viola corretto, basta premere sul colore proposto nel blocco “sta toccando il colore” e con la pipetta “prelievo colore“, cliccare nell’area di lavoro, su uno dei muri viola.
Nella condizione “allora“, in questa prima fase sceglieremo di far compiere al personaggio 10 passi indietro, quindi dal blocco Movimento sceglieremo “fai 10 passi” e anteporremo il segno meno (-10).
La condizione “se sta toccando il colore viola” dev’essere sempre attiva, altrimenti il codice verrebbe eseguito una sola volta. Pertanto, occorre inglobare tutto il codice dentro un blocco “Per sempre“, disponibile nella sezione “Controllo“.
Così facendo abbiamo gestito il tocco con la parete viola ma ancora il programma non funziona perchè occorre lanciarlo utilizzando l’istruzione “quando si clicca su bandiera verde“, presente nel blocco Situazioni.
5) Inizializzazione
Ad ogni avvio del programma è giusto che lo Sprite:
- venga ridimensionato al 50% (come avevamo scelto), attraverso il blocco “porta la dimensione a“, disponibile nella sezione Aspetto;
- venga posizionato in alto a sinistra, dove inizia il percorso da compiere attraverso il labirinto che abbiamo preparato. Quindi, aggiungeremo il blocco “vai a x: -220 y:160“, dalla sezione Movimento, inserendo le coordinate del punto di inizio (-220;160);
- venga posto nel verso corretto, utilizzando il blocco “punta in direzione“, dalla sezione Movimento e scegliendo un orientamento di 90°;
Tali blocchi vanno posizionati subito dopo il blocco di avvio del programma (“quando si clicca su bandiera verde“).
Inoltre, poichè cambieremo lo sfondo nel caso di vittoria, è bene fare in modo che il programma inizi sempre con lo “sfondo1”, cioè, il labirinto che abbiamo creato.
Per fare ciò inseriamo dalla sezione Aspetto, il blocco “passa allo sfondo1“.
Se lanciamo il programma e lo testiamo, notiamo che il comportamento dello Sprite, quando sbatte nei muri, è proprio quello desiderato. Ad ogni riavvio il personaggio viene inizializzato come stabilito.
6) Evento tocco riquadro Vittoria
Analogamente, quando il nostro personaggio tocca il colore verde, relativo al riquadro della vittoria, va gestito allo stesso modo.
Inseriamo il blocco per controllare se sta toccando il colore verde (prelevando il colore corretto usando la pipetta) e lo applichiamo per sempre.
Questa volta nella condizione “Allora” inseriamo una frase dalla sezione Aspetto: “Dire Ciao per 2 secondi” e la adattiamo inserendo Hai vinto!”.
A questo punto abbiamo terminato ma possiamo abbellire il tutto, facendo in modo che alla “Vittoria” cambi lo sfondo del labirinto. Per fare ciò basta selezionarne uno tra quelli esistenti, in cui poter scrivere, tramite l’editor degli sfondi, “Hai vinto!”.
In alternativa, possiamo ingigantire al 150% lo sprite Beetle, posizionandolo al centro del nostro nuovo sfondo, come da Figura 11.
Se avete difficoltà nei passaggi, vi suggeriamo di guardare il video proposto all’inizio dell’esercizio, che spiega tutto passo passo e di cui vi riproponiamo il link.
Lezione 2 – Impariamo le basi del programma partendo da un semplice gioco (parte 2)
Continuiamo l’esercizio precedente, facendo in modo che il nostro personaggio perda una vita quando colpisce una parete. Inizializziamo a 3 il numero di vite e decrementiamo tale valore ogni volta che si commette un errore. Se il numero di vite scenderà a 0 il programma chiederà se si vuole fare una nuova partita, altrimenti terminerà.
Grazie a questa modifica dell’esercizio precedente impareremo a:
- gestire l’input dell’utente
- utilizzare gli strumenti dell’area:
- suono;
- operatori;
- variabili;
Ecco il video tutorial della seconda e ultima parte dell’esercizio!
1) Creiamo una variabile “vite” inizializzata a 3
Dalla sezione “Variabili” premiamo il pulsante “Crea una variabile” (Figura 1).
Una finestra modale ci permette di inserire il nome della variabile: vite (Figura 2).
Dalla sezione “Variabili” prendiamo il blocco “Porta le vita a” e lo inizializziamo a 3, inserendolo subito dopo l’istruzione di inizio programma (quando si clicca su bandiera verde) (Figura 3).
2) Decrementiamo “vite” ogni volta che si tocca una parete viola
Per fare ciò occorre costruire l’istruzione (vedi Figura 4):
- partendo dalla sezione Operatori, trascinando il blocco con l’operazione di sottrazione e inserendogli la variabile vite, (che troviamo nella sezione Variabili).
- sottrarre il valore 1
Inseriremo questo blocco subito dopo la condizione “se sta toccando il colore viola” (Figura 5)
3) Gestione condizione se vite=0
Adesso, occorre gestire la condizione in cui la variabile vite diventa 0, visualizzata in Figura 6. Utilizzando la sezione Operatori, scegliamo il blocco di uguaglianza e costruiamo l’istruzione in modo da includere la variabile vite (presa dalla sezione Variabili) e il valore 0.
Inseriamo questa istruzione in un blocco se allora…altrimenti (prelevandolo dalla sezione Controllo) e aggiungiamo nel blocco se allora:
- Sezione Aspetto, blocco “Dire ciao per 2 secondi“, sostituendolo con Hai perso!
- Sezione Suono, blocco “Avvia riproduzione suono pop” (per mostrare un segnale acustico)
- Seziona Aspetto, blocco “Nascondi” per togliere il personaggio (lo Scratch) dalla scena appena sono terminate le vite.
nel blocco Altrimenti, aggiungiamo:
- Sezione Movimento, blocco “Fai -10 passi” (se ancora ho vite ma ne ho appena persa 1, faccio -10 passi dalla parete).
A questo punto l’esercizio sarebbe già concluso ma, impariamo a gestire l’input dell’utente, facendo in modo di chiedere se vuole fare un’altra partita.
4) Richiesta input all’utente: “Vuoi riprovare?”
Di seguito vengono illustrati i passaggi per ottenere il codice visualizzato in Figura 7.
Dopo il blocco “nascondi”, inseriamo dalla sezione Sensori, il blocco “chiedi come ti chiami? E attendi“.
Utilizzando la sezione Operatori, scegliamo il blocco di uguaglianza e costruiamo l’istruzione in modo da includere la variabile Risposta (presa dalla sezione Sensori) e il valore “OK” (che digitiamo noi, non importa se maiuscolo o minuscolo).
Inseriamo questa istruzione in un blocco “se allora…altrimenti” (prelevandolo dalla sezione Controllo) e aggiungiamo nel blocco “se allora”:
tutte le istruzioni di inizializzazione che abbiamo all’avvio del programma, clonandole col tasto destro a partire dalla prima istruzione (“porta vite a 3”), avendo cura di staccare preventivamente i blocchi che non ci servono prima della clonazione e riaggaciandoli subito dopo.
O, in alternativa ricostruirle nuovamente dalle sezioni specifiche:
- Sezione Variabili, blocco “porta vite a 3“
- Seziona Aspetto, blocco “porta dimensione a 50%“
- Sezione Aspetto, blocco, “passa allo sfondo1“
- Sezione Aspetto, blocco, “mostra“
- Sezione Movimento, blocco, “Vai a x:-220; y:160“
- Sezione Movimento, blocco, “punta in direzione 90“
Infine, aggiungiamo nel blocco “Altrimenti“:
- Sezione Controllo, blocco “ferma tutto” (Serve a terminare l’esecuzione del programma)
Notiamo anche il blocco “passa allo sfondo 3” (prelevato dalla Sezione Aspetto) che abbiamo inserito all’interno del blocco “Altrimenti“.
Questo perchè, preventivamente, abbiamo scelto un nuovo sfondo tra quelli preinstallati, per creare un’immagine di Game Over, utilizzando l’ambiente di editing sfondi (Figura 8, rettangolo rosso, scegliendo dal menu l’icona pennello) ed inserendo un testo al centro!
Se avete difficoltà nei passaggi, vi suggeriamo di guardare il video proposto all’inizio dell’esercizio, che spiega tutto passo passo e di cui vi riproponiamo il link.