Sei sulla pagina 1di 41

Corso di Informatica Multimediale

Approccio allo sviluppo di giochi utilizzando HTML5 + JavaScript

Marco Comini

2021-11-18
HTML5+JavaScript: Audio e Video
Un elemento audio/video può essere controllato tramite i seguenti metodi e
proprietà:
play() per riprodurre
pause() per fermare
volume il volume audio di un audio/video, da 0 (silenzioso) a 1 (più alto).
duration la durata di un audio/video, in secondi.
currentTime la posizione di riproduzione corrente in un audio/video (in
secondi)
Eventi associati con gli elementi audio/video
(on) play L’evento si verifica quando l’audio/video è pronto per iniziare la
riproduzione
(on) playing l’audio/video è in riproduzione dopo essere stato messo in
pausa o interrotto per il buffering
(on) pause l’audio/video è in pausa
(on) ended l’audio/video è finito
(on) TimeUpdate L’evento si verifica quando la posizione di riproduzione
viene cambiata (come quando l’utente avanza rapidamente a un punto diverso
dell’audio/video)

Marco Comini Informatica Multimediale 2021-11-18 1 / 22


HTML5+JavaScript: Sprites
Uno sprite è un file grafico con una serie di immagini che, rapidamente
alternate, danno l’illusione del movimento.
Ciascuna delle immagini di uno sprite è identificata da coordinate che si
riferiscono all’angolo superiore sinistro dello sprite, larghezza e altezza
dell’immagine, tutte in pixel.
Per creare l’illusione del movimento con gli sprite cambiamo regolarmente le
coordinate che identificano i vari fotogrammi.
usiamo drawImage (img , sx, sy , swidth, sheight, x, y , width, height)
img L’oggetto immagine.
sx La coordinata x da dove iniziare il ritaglio nell’immagine.
sy La coordinata y da dove iniziare il ritaglio nell’immagine.
swidth La larghezza del ritaglio nell’immagine.
sheight L’altezza del ritaglio nell’immagine.
x La coordinata x dove mettere l’angolo in alto a sinistra del ritaglio.
y La coordinata y dove mettere l’angolo in alto a sinistra del ritaglio.
width La larghezza del ritaglio da utilizzare (allungando o riducendo)
height L’altezza del ritaglio da utilizzare (allungando o riducendo)
Attenzione all’ordine degli argomenti rispetto alla variante con 4 parametri.
RUN esempio-2021-11-18-A.html
Marco Comini Informatica Multimediale 2021-11-18 2 / 22
HTML5+JavaScript: Movimenti e traiettorie/1
movimenti orizzontali/verticali

Qualsiasi forma di movimento di un oggetto su uno schermo implica la


manipolazione delle sue coordinate. I movimenti possono essere controllati
dall’utente o predefiniti (incluso l’utilizzo di funzioni matematiche).
Nel caso in cui i movimenti siano controllati dall’utente e se i movimenti sono
prevalentemente orizzontali o verticali si associa a quattro tasti distinti un
movimento verso l’alto, il basso, a sinistra o a destra.
Vista l’orientazione delle coordinate nel canvas il tasto per andare in alto
deve decrementare la y (e per andare in basso si deve incrementare).
Il valore dell’incremento/decremento definisce la velocità apparente
dell’oggetto (ed è tipicamente chiamato delta).
Ad ogni iterazione (= per ogni fotogramma)
1 x += deltaX ;
2 y += deltaY ;
Una soluzione tipica è l’uso di eventi da tastiera per il controllo del
movimento, dove i tasti premuti ( onkeydown ) danno valori di delta diversi
da zero (positivi o negativi), e i tasti rilasciati ( onkeyup ) mettono i delta a
zero, terminando il movimento.
Marco Comini Informatica Multimediale 2021-11-18 3 / 22
HTML5+JavaScript: Movimenti e traiettorie/2
movimenti con vista dall’alto

Il movimento limitato solo in orizzontale o verticale non è il più adatto in


molte situazioni. Quando si desidera una maggiore gamma di movimenti o
anche solo renderli più naturali, è normale utilizzare le proiezioni di un punto
in una circonferenza in un sistema di assi con la sua origine al centro della
circonferenza, rispetto ad un angolo.

In questa situazione i tasti di direzione sinistro e destro vengono utilizzati per


aumentare o diminuire l’angolo, mentre i tasti di direzione su e giù vengono
utilizzati per aumentare o diminuire il raggio. Le coordinate x e y vengono
aggiornate con
1 x += raggio * Math . cos ( angolo * Math . PI / 180);
2 y += raggio * Math . sin ( angolo * Math . PI / 180);
se si preferisce esprimere l’angolo in gradi, oppure (meglio) basta usare solo
angolo se si lavora direttamente in radianti.

Marco Comini Informatica Multimediale 2021-11-18 4 / 22


HTML5+JavaScript: Movimenti e traiettorie/3
movimenti con vista dall’alto/2

La modifica dell’angolo di disegno di un dato oggetto si può fare in modo


molto diretto ruotando opportunamente il canvas (e poi tornando alla
situazione precedente) con i metodi
save() che salva lo stato attuale del contesto current context
translate(x,y) che reimposta l’origine sul canvas
rotate(angle) che ruota il disegno corrente
restore() che ritorna allo stato salvato precedentemente
Ad esempio, per disegnare un diamante:
1 var x = 100 , y = 100 , l = 50 , a = 50;
2 context . save ();
3 context . translate (x , y ); // reset the axis origin
4 context . rotate ( Math . PI / 4); // and rotate
5 context . fillStyle = " red " ;
6 context . fillRect ( l * -0.5 , a * -0.5 , l , a );
7 context . restore ();

Marco Comini Informatica Multimediale 2021-11-18 5 / 22


HTML5+JavaScript: Movimenti e traiettorie/4
movimenti predefiniti

Per ottenere risultati più naturale si possono predefinire opportunamente i


movimenti e le traettorie. Ci sono diversi approcci possibili. Ad esempio
utilizzando funzioni matematiche come parabole, onde sinusoidali, rette,
eccetera
▶ in questi casi si aggiorna la posizione x e si calcola con l’opportuna funzione il
valore di y;
pre-definendo tutti i punti in cui un oggetto dovrebbe posizionarsi in ogni
frame di animazione
▶ l’impostazione di tutti i punti può essere un’operazione laboriosa, soprattutto se
eseguita manualmente.
▶ Una soluzione è creare una piccola applicazione il cui output è un array con
tutte le coordinate associate a un movimento del mouse e poi utilizzare
quell’array per posizionare l’oggetto in questione.

Marco Comini Informatica Multimediale 2021-11-18 6 / 22


HTML5+JavaScript: Collisioni/1

Un altro aspetto importante, nei giochi e nell’interazione dell’utente, è il


rilevamento di collisioni tra oggetti, ad esempio tra un oggetto controllato
dall’utente e altri esistenti nello scenario.

In genere, il rilevamento delle collisioni implica la conoscenza dell’area di uno


degli oggetti e dell’area o almeno uno dei punti dell’altro oggetto.

Per esempio, nel caso di due cerchi, determinati con i parametri usati per il
canvas (x,y,radius) osserviamo che {(x, y) | (x − x0 )2 + (y − y0 )2 ≤ r02 } ∩
{(x, y) | (x − x1 )2 + (y − y1 )2 ≤ r12 } =
̸ ∅ ⇐⇒ (x0 − x1 )2 + (y0 − y1 )2 ≤
2
(r0 + r1 ) e quindi possiamo determinare l’avvenuta collisione con la funzione
1 function clash ( x0 , y0 , radius0 , x1 , y1 , radius1 ) {
2 return ( ( x0 - x1 )**2 +( y0 - y1 )**2 <
3 ( radius0 + radius1 )**2 );
4 }

Marco Comini Informatica Multimediale 2021-11-18 7 / 22


HTML5+JavaScript: Collisioni/2

Mentre nel caso di due forme rettangolari (o quasi) determinate con i


parametri usati per il canvas (x,y,width,height) osserviamo che
{(x, y) | x0 ≤ x ≤ x0 + width 0 ∧ y0 ≤ y ≤ y0 + height 0 } ∩
{(x, y) | x1 ≤ x ≤ x1 + width 1 ∧ y1 ≤ y ≤ y1 + height 1 } =
̸ ∅ ⇐⇒
(x1 ≤ x0 ≤ x1 + width 1 ∨ x1 ≤ x0 + width 0 ≤ x1 + width 1 ) ∧
(y1 ≤ y0 ≤ y1 + height 1 ∨ y1 ≤ y0 + height 0 ≤ y1 + height 1 ) e quindi
possiamo determinare l’avvenuta collisione con
1 function clash ( x0 , y0 , width0 , height0 ,
2 x1 , y1 , width1 , height1 ) {
3 return (((( x1 <= x0 ) && ( x0 <= x1 + width1 ))
4 || (( x1 <= x0 + width0 ) &&
5 ( x0 + width0 <= x1 + width1 )))
6 && ((( y1 <= y0 ) && ( y0 <= y1 + height1 ))
7 || (( y1 <= y0 + height0 ) &&
8 ( y0 + height0 <= y1 + height1 ))));
9 }

Marco Comini Informatica Multimediale 2021-11-18 8 / 22


HTML5+JavaScript: come evitare di duplicare tanto codice?

Non è difficile immaginare che per la rappresentazione di immagini, sprite,


rettangoli, cerchi e altri elementi di un gioco si debbano utilizzare gli stessi
attributi relativi al posizionamento e in parte al contenuto.

Analogamente per i metodi per disegnare e rilevare collisioni.

Per evitare di dover duplicare inutilmente lo stesso codice si possono


utilizzare opportunamente le classi con il meccanismo dell’ereditarietà.

Marco Comini Informatica Multimediale 2021-11-18 9 / 22


JavaScript: Classi ed erediterietà/1

Torniamo sulle Classi in JavaScript


Si può definire una classe con la sintassi
1 class ClassName {
2 constructor (...) { ... }
3 ...
4 }
dove bisogna sempre definire il metodo constructor che si occupa di
costruire un oggetto.
Per creare una istanza si usa new ClassName( . . . ) .
Nel codice dei metodi si possono riferire le proprietà (sia attributi che
metodi) dell’oggetto che possiede il metodo con la keyword this .

Marco Comini Informatica Multimediale 2021-11-18 10 / 22


JavaScript: Classi ed erediterietà/2

Ad esempio
1 class Vehicle {
2 constructor ( name , year ) {
3 this . name = name ;
4 this . year = year ;
5 this . service = undefined ;
6 }
7 age ( year ) {
8 return year - this . year ;
9 }
10 }
11

12 var myCar = new Vehicle ( " MyCar " , 2017);


13 var now = new Date ();
14 print ( " MyCar age = " + myCar . age ( now . getFullYear ()));
produce MyCar age = 4 .

Marco Comini Informatica Multimediale 2021-11-18 11 / 22


JavaScript: Classi ed erediterietà/3
Le classi JavaScript hanno anche un meccanismo di estensione simile a quello
utilizzato nei linguaggi di programmazione orientati agli oggetti, che consente
di sfruttare ciò che è già stato definito in una classe origine, la superclasse, e
aggiungere specificità in una classe estesa, la sottoclasse.
Si usa aggiungendo extends superclass nella definizione della sottoclasse.
Si può (dovrebbe) usare la keyword super per chiamare il costruttore della
superclasse.
Esempio
1 class Truck extends Vehicle {
2 constructor ( name , year , wheels ) {
3 super ( name , year );
4 this . wheels = wheels ;
5 this . service = 1;
6 }
7 }
8 var myTruck = new Truck ( " MonsterTruck " , 2015 , 20);
9 print ( " Truck age = " + myTruck . age ( now . getFullYear ()));
produce Truck age = 6
Marco Comini Informatica Multimediale 2021-11-18 12 / 22
HTML5+JavaScript: Mettiamo tutto assieme/1
Vediamo ora alcune classi per facilitare la creazione nel canvas di elementi
per disegnare
cerchi,
rettangoli,
immagini,
sprite.
Hanno vari elementi strutturali simili per cui iniziamo creando una classe base
che contiene le informazioni comuni a tutti gli elementi grafici
1 class Ge n e r i c G r a p h i c E l e m e n t {
2 constructor (x , y ) {
3 this . x = x ;
4 this . y = y ;
5 this . deltaX = 0;
6 this . deltaY = 0;
7 this . ticks = 0;
8 this . ticksPerFrame = 1;
9 }
10 ...
Marco Comini Informatica Multimediale 2021-11-18 13 / 22
HTML5+JavaScript: Mettiamo tutto assieme/2

1 ...
2 updatePosition () {
3 this . ticks ++;
4 if ( this . ticks % this . ticksPerFrame == 0) {
5 this . x += this . deltaX ;
6 this . y += this . deltaY ;
7 }
8 }
9 }

Usiamo deltaX e deltaY per consentire di spostare tutti gli oggetti (in
linea retta).
Ovviamente se i loro valori sono 0 gli oggetti sono fermi, altrimenti in
movimento.
Eseguiamo uno spostamento solo ogni ticksPerFrame chiamate, per i
movimenti lenti.

Marco Comini Informatica Multimediale 2021-11-18 14 / 22


HTML5+JavaScript: Mettiamo tutto assieme/3

Creiamo una classe per i cerchi come estensione della classe base
il costruttore ha i parametri specifici dell’oggetto che stiamo implementando
chiamiamo super per impostare i parametri comuni
impostiamo i parametri specifici
1 class Circle extends G e n e r i c G r a p h i c E l e m e n t {
2 constructor (x , y , radius , color ) {
3 super (x , y );
4 this . radius = radius ;
5 this . color = color ;
6 }
7 ...

Marco Comini Informatica Multimediale 2021-11-18 15 / 22


HTML5+JavaScript: Mettiamo tutto assieme/4

ridefiniamo i metodi comuni se serve


definiamo i metodi specifici
1 ...
2 clas hWith Same Sha pe ( otherCircle ) {
3 return ( ( this . x - otherCircle . x )**2 +
4 ( this . y - otherCircle . y )**2 <
5 ( this . radius + otherCircle . radius )**2 );
6 }
7 ...
Questo metodo identifica una collisione con un’altro cerchio.

Marco Comini Informatica Multimediale 2021-11-18 16 / 22


HTML5+JavaScript: Mettiamo tutto assieme/5
definiamo i metodi specifici
chiamando i metodi comuni se serve (con this. )
1 ...
2 drawMyself ( ctx ) {
3 // preserve current value of fillStyle
4 var currentFillStyle = ctx . fillStyle ;
5 ctx . fillStyle = this . color ;
6 ctx . beginPath ();
7 ctx . arc ( this .x , this .y , this . radius ,0 , Math . PI *2);
8 ctx . fill ();
9 ctx . closePath ();
10 // restore value of fillStyle
11 ctx . fillStyle = currentFillStyle ;
12 this . updatePosition ();
13 }
14 ...
15 }

Marco Comini Informatica Multimediale 2021-11-18 17 / 22


HTML5+JavaScript: Mettiamo tutto assieme/6
Possiamo creare anche delle classi “intermedie”, sempre come estensione della
classe base, e poi creare oggetto grafici come ulteriori estensioni di queste.
1 class RectangularShape extends G e n e r i c G r a p h i c E l e m e n t {
2 constructor (x , y , width , height ) {
3 super (x , y );
4 this . width = width ;
5 this . height = height ;
6 }
7 clashWith Sa me Sha pe ( otherRectangular ) {
8 var x = otherRectangular .x , y = otherRectangular . y ;
9 var width = otherRectangular . width ,
10 height = otherRectangular . height ;
11 return (((( this . x >= x ) && ( this . x <= x + width ))
12 || (( this . x + this . width >= x ) &&
13 ( this . x + this . width <= x + width )))
14 && ((( this . y >= y ) && ( this . y <= y + height ))
15 || (( this . y + this . height >= y ) &&
16 ( this . y + this . height <= y + height ))));
17 }
Marco Comini Informatica Multimediale 2021-11-18 18 / 22
HTML5+JavaScript: Mettiamo tutto assieme/7

1 class Picture extends RectangularShape {


2 constructor (x , y , image ) {
3 super (x , y , image . width , image . height );
4 this . image = image ;
5 }
6

7 drawMyself ( ctx ) {
8 ctx . drawImage ( this . image , this .x , this . y );
9 this . updatePosition ();
10 }
11 }

Marco Comini Informatica Multimediale 2021-11-18 19 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 →a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1], b == []

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 →a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 →a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 →a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157, 150]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 →a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a == [1, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 →a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a.indexOf(157) == 7, a.lastIndexOf(150) == 8, a[0] = 7+8 =15
a == [15, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 →b = b . concat ( a . slice (1 ,3) , a );
10 console . log ( b [1]+ b [2]+ b [9]);
a.slice(1,3) == [1, 1]
b==[1, 1, 15, 1, 1, 1, 1, 150, undefined, 157, 150, undefined, undefined, 157]

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/1

Quale valore viene stampato in console alla fine dell’esecuzione del seguente
frammento di codice?
1 var a = [] , b = [];
2 a . length = 5;
3 a . fill (1);
4 a [ a . length ]=150;
5 a [7] = 157;
6 a [ a . length ] = 150;
7 a [ a . length +2] = 157;
8 a [0] = a . indexOf (157)+ a . lastIndexOf (150);
9 b = b . concat ( a . slice (1 ,3) , a );
10 →console . log ( b [1]+ b [2]+ b [9]);
b[1]==1, b[2]==15, b[9]==157
in console 173

Marco Comini Informatica Multimediale 2021-11-18 20 / 22


Alcuni test/2
Relativamente alle variabili x e z globali del seguente frammento di codice
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) { aux (); z [2] = w [0]+ w [1];
3 return x [0]+ x [1];
4 function aux () { x += 9; w [0] += x ;
5 x = y ; x [0] += 12; y [1] += 4; } }
6 x += useless (2* x , z );
quale delle seguenti affermazioni è vera?
1 La x al rientro di useless vale 6; al termine x è undefined e z è [3, 8].
2 La x al rientro di useless vale [3, 8, undefined, undefined, 12]; al termine x è
undefined e z è [3, 8, undefined, undefined, 12].
3 La x al rientro di useless vale 6; al termine x è 21 e z è [3, 8, 32].
4 La x al rientro di useless vale 6; al termine x è 25 e z è [24, 8, 32].
5 La x al rientro di useless vale 6; al termine x è NaN e z è [3, 8].
6 La x al rientro di useless vale 6; al termine x è 9 e z è [3,8,undefined,12].
7 La x al rientro di useless vale 6; al termine x è 23 e z è [3,17,undefined,NaN].
8 La x al rientro di useless vale [3, 8, undefined, undefined, NaN]; al termine x
è NaN e z è [3, 8, undefined, undefined, NaN].
Marco Comini Informatica Multimediale 2021-11-18 21 / 22
Alcuni test/2
Relativamente alle variabili x e z globali del seguente frammento di codice
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) { aux (); z [2] = w [0]+ w [1];
3 return x [0]+ x [1];
4 function aux () { x += 9; w [0] += x ;
5 x = y ; x [0] += 12; y [1] += 4; } }
6 x += useless (2* x , z );
quale delle seguenti affermazioni è vera?
1 La x al rientro di useless vale 6; al termine x è undefined e z è [3, 8].
2 La x al rientro di useless vale [3, 8, undefined, undefined, 12]; al termine x è
undefined e z è [3, 8, undefined, undefined, 12].
3 La x al rientro di useless vale 6; al termine x è 21 e z è [3, 8, 32].
✓4 La x al rientro di useless vale 6; al termine x è 25 e z è [24, 8, 32].
5 La x al rientro di useless vale 6; al termine x è NaN e z è [3, 8].
6 La x al rientro di useless vale 6; al termine x è 9 e z è [3,8,undefined,12].
7 La x al rientro di useless vale 6; al termine x è 23 e z è [3,17,undefined,NaN].
8 La x al rientro di useless vale [3, 8, undefined, undefined, NaN]; al termine x
è NaN e z è [3, 8, undefined, undefined, NaN].
Marco Comini Informatica Multimediale 2021-11-18 21 / 22
Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 →x += useless (2* x , z );
dovremo assegnare ad x il valore 6 + useless(12,z)

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 →function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless == 12, w == z == ref [3,8]

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 → x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless = 12+9 == 21

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 → w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
z[0] = 3 + 21 == 24

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 → x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
xuseless == y == ref [1,2,3]

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 → x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
y[0] = 1 + 12 == 13

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 → y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
y[1] = 2 + 4 == 6

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 → z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
z[2] = z[0] + z[1] == 24 + 8 == 32, z == [24,8,32]

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 → return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 x += useless (2* x , z );
return = y[0]+y[1] == 13 + 6 == 19

Marco Comini Informatica Multimediale 2021-11-18 22 / 22


Alcuni test/2

Eseguiamo
1 var x = 6 , y = [1 ,2 ,3] , z = [3 ,8];
2 function useless (x , w ) {
3 aux ();
4 z [2] = w [0]+ w [1];
5 return x [0]+ x [1];
6 function aux () {
7 x += 9;
8 w [0] += x ;
9 x = y;
10 x [0] += 12;
11 y [1] += 4;
12 }
13 }
14 →x += useless (2* x , z );
appena useless termina x==6, poi assegnamo ad x il valore 6 + 19 == 25

Marco Comini Informatica Multimediale 2021-11-18 22 / 22

Potrebbero piacerti anche