Come saltare e funzionare su piattaforme nel vostro gioco HTML5

Il "jump and run" piattaforma di genere è stata a lungo un genere porticato fiocco per una buona ragione. Esso offre una bella esperienza interattiva per il vostro gioco HTML5 ed è relativamente facile da modificare per diversi tipi di giochi.

L'elemento essenziale di un gioco di piattaforma è - bene - piattaforme. L'azione di solito avviene con una vista laterale ed un personaggio che risponde alla gravità. Normalmente, il giocatore salterà intorno a piattaforme e combattere i nemici da tiro, saltare, o combattimento corpo a corpo.

Il mio prototipo mostra le caratteristiche essenziali. Comprende un personaggio che può saltare e atterrare sulle piattaforme. Piattaforme trascinabili sono incluse in modo da poter modificare la scena e vedere come il personaggio interagisce con varie configurazioni di piattaforma.

Come saltare e funzionare su piattaforme nel vostro gioco HTML5

Codici di salto e gioco di combattimento Land

La chiave per un gioco a scorrimento laterale è il salto e atterraggio meccanico. Utilizzare una proprietà che cade per monitorare se il personaggio dovrebbe rispondere alla gravità o meno. Ecco il codice da checkKeys () che legge la freccia verso l'alto e fa il salto carattere.

if (keysDown [K_UP]) {

if (this.falling == false) {
this.setImage ("characterUp.png");
this.y - = 5;
this.falling = true;
this.addVector (0, 15);
} // End if
} Else {
checkFalling ();
} // End if

La funzione checkFalling () controlla ciascuno dei blocchi. Se il personaggio non sia a contatto con dei blocchi, impostare cadendo su true. Questo renderà la caduta personaggio una volta che si allontana di un blocco.

Come entrare in un atterraggio

L'interazione tra il personaggio e dei blocchi è importante perché si vuole il carattere a smettere di muoversi prima che colpisca un blocco. Questo richiede una tecnica chiamata rilevamento delle collisioni predittiva, che suona molto più complicato di quello che è. Ecco il meccanismo:

  1. Spostare l'elemento come normale.

    Fare i calcoli per spostare l'oggetto (in questo caso il carattere) come normale. Si noti che il personaggio non è ancora tracciata, ma i nuovi valori di xey sono stati determinati con l'aggiunta di dx e dy.
  2. Controllare per una collisione.

    Verificare se il personaggio si è scontrato con qualcosa (in questo caso, ogni blocco nella matrice di blocchi).
  3. Se si verifica una collisione, eseguire il backup del personaggio.

    Stai controllando per una collisione, ma non si desidera che il carattere di sovrapposizione con il blocco. Invece, siete interessati a sapere se il vettore di movimento attuale potrebbe causare una collisione.
  4. Dx Sottrai da x, dy da y.

    Una collisione è stato rilevato, in modo che toglie collisione sottraendo il vettore di movimento. Ciò comporta l'essere sprite dove ha iniziato prima della collisione è stato rilevato.
  5. Impostare la velocità del sprite a zero.

    Impostare la velocità del sprite a zero in modo che il fotogramma successivo non causa il crash di nuovo sprite nel blocco.

Il modo più facile per ottenere il comportamento predittivo è quello di aggiungere un metodo di backup () all'oggetto Sprite, che può essere chiamato su qualsiasi tipo di collisione:

tCharacter.backup = function () {
// Sto sovrapposizione qualcosa che non avrei condividere lo spazio con
// Torna fino a dove ero prima che la collisione è stata rilevata
X = this.x - this.dx;
Y = this.y - this.dy;
this.setPosition (X, Y);
} // End di backup

Come fare blocchi trascinabili

Questo gioco presenta un'altra caratteristica molto interessante: Ogni blocco può essere trascinato in una nuova posizione in modo da poter sperimentare con altri posizionamenti di blocco. Fare qualsiasi sprite trascinabile è relativamente facile. Basta verificare se il blocco è attualmente in fase di clic. Se è così, impostare la propria posizione uguale alla posizione del mouse:

tBlock.checkDrag = function () {
// Consentire il blocco di essere trascinabili
if (this.isClicked ()) {
this.setPosition (scene.getMouseX (), scene.getMouseY ());
} // End if

} // End checkDrag

Come migliorare la piattaforma di gioco

La piattaforma di gioco è aperto a molti tipi di miglioramenti:

  • Utilizzare più livelli. I blocchi predefiniti sono facili da costruire e lavorare, ma non sono molto interessanti. Esperimento con diverse forme e posizioni di blocco per costruire livelli interessanti. È possibile memorizzare le posizioni di blocco in array per fare nuovi livelli, e semplicemente riutilizzare i blocchi.
  • Si consideri un approccio tile-based. L'esempio piattaforma utilizza un sistema di posizionamento blocco arbitrario, ma è anche possibile utilizzare un approccio di tile-based.
  • Aggiungi obiettivi e nemici. Un miglioramento evidente in questo gioco sarebbe quello di includere qualche obiettivo da raggiungere con qualche ostacolo sulla via. Pensate a come si potrebbe implementare personaggi nemici. Saranno in grado di muoversi? Saranno in grado di sparare? Considera anche l'aggiunta di potenziamenti per migliorare la velocità di salto, aggiungere un'arma a distanza, o qualsiasi altra cosa si possa immaginare.
  • Aggiungere più potenza di fuoco. Aggiungere un'arma al personaggio in modo che possa sparare. In scroller laterali, l'arma normalmente spara in orizzontale, ma si può giocare per ottenere il comportamento desiderato.
  • Migliorare la fisica. La dinamica di questo gioco funziona abbastanza bene, ma li si può migliorare con un po 'più di tweaking. Seguire le linee generali del programma esistente, ma vedere se è possibile farlo funzionare esattamente come quello che si vuole.