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.

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.