Realizzare Giochi in HTML5 Ep. VI: Display Object con CreateJS

Coordinate in movimento

Riepilogando: all’aumentare del valore della proprietà x l’oggetto si sposta verso destra, all’aumentare del valore della proprietà y l’oggetto si sposta verso il basso. Ogni volta che cambiamo una Proprietà dobbiamo assicurarci di aggiornare lo Stage.

Per fare in modo che il cerchio rosa si muova ogni volta che premiamo uno dei quattro tasti con le frecce direzionali utilizzeremo una semplice funzione:

function moveCircle(direction) {
    switch(direction) {
        case "left":
            pink_circle.x -= 5;
            break;
        case "right":
            pink_circle.x += 5; 
            break;
        case "up":
            pink_circle.y -= 5;
            break;
        case "down":
            pink_circle.y += 5;
            break;
    }
    stage.update();
}

A questa funzione bisogna passare una String che rappresenti la direzione in cui vogliamo che il cerchio si muova. Sono gestiti solo quattro valori: left, right, up e down.

A questo punto non ci rimane che richiamare questa funzione in qualche modo, la maniera più veloce consiste nell’utilizzare dei pulsanti in HTML:

<button onclick="moveCircle('left')">←</button>
<button onclick="moveCircle('up')">↑</button>
<button onclick="moveCircle('right')">→</button>
<button onclick="moveCircle('down')">↓</button>

Ognuno di questi pulsanti, se cliccato, richiama la funzione moveCircle passando una direzione diversa, così ogni volta che premiamo uno di questi pulsanti il cerchio rosa si muove in una delle quattro direzioni.

0

Nota bene: gli esempi inclusi con il widget di CodePen hanno difficoltà a intercettare gli input da tastiera, per questo ho predisposto una checkbox con il solo scopo di catturare la pressione dei tasti. Per far funzionare la demo è necessario il focus sulla checkbox.

Aggiungi la tua reazione
0
Like
0
Love
0
Ah Ah
0
Wow
0
Sad
0
Grrr
0

Questo articolo è parte della collana Realizzare Giochi in HTML5

Altri articoli in questa collana:

  1. Realizzare giochi con i Canvas di HTML5 e JavaScript Ep. I
  2. Realizzare un Gioco in HTML5 Ep. II: Disegnare sui Canvas
  3. Realizzare un Gioco in HTML5 Ep. III: Animare gli elementi

Continua a leggere questa collana:

Potrebbero interessarti anche...

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.