Come creare Pong nel vostro gioco HTML5

Nessun gioco di HTML5 discussione sviluppo sarebbe completo senza una menzione del famoso gioco Pong. Anche se questo non era tecnicamente il primo videogioco, è stato il primo ad attirare l'attenzione popolare, ed è di gran lunga uno dei giochi più influenti mai realizzati.

Come creare Pong nel vostro gioco HTML5

Costruire il paddle gioco

L'oggetto pala è abbastanza semplice, ma ci sono in realtà due pale con comportamenti differenti. In questa versione del gioco, la paletta sinistra è controllata dal giocatore, e la paletta destra è controllata da un computer AI. Un singolo oggetto pagaia può servire sia come giocatore o una pagaia AI. La pagaia giocatore segue solo il mouse:

tPaddle.followMouse = function () {
// Segue il mouse per il controllo del giocatore
this.setImgAngle (90);
this.setPosition (this.x, scene.getMouseY ());
} // Metodo followMouse end

Aggiungi stupidità artificiale per il vostro gioco

In realtà è molto facile da costruire una intelligenza artificiale (AI) per l'avversario. Basta impostare il valore Y del paddle pari al valore Y della palla. Tuttavia, questo sarà noioso, perché l'avversario non potrà mai perdere, e sarà sempre colpire la palla esattamente nel mezzo della pagaia, rendendo più facile tornare. Questo non è divertente a tutti. Dare la pagaia AI qualche tipo di problemi di attenzione.

L'intelligenza artificiale non deve seguire direttamente la palla. Invece, si dovrebbe controllare per vedere se la palla è al di sopra o al di sotto di esso, e rispondere di conseguenza.

Due variabili sono state aggiunte per controllare il movimento del paddle AI. I cervelli costante è una percentuale. Se il cervello è impostato su 0,5, la pagaia controllerà per la posizione palla solo la metà del tempo. Per un gioco più facile, impostare il cervello valore basso.

L'altro valore primario è V_SPEED, o la velocità verticale della pagaia. Questo indica quanto velocemente la pala si sposta verso la palla. Un valore più elevato creerà un più potente riproduttore AI. Trovare la giusta combinazione di questi due valori per ottenere il comportamento AI che si desidera. Ecco il codice per il metodo Automove ():

tPaddle.autoMove = function () {
// Sposta automaticamente
this.setImgAngle (90);

// Non passare ogni turno
if (Math.random () <BRAINS) {
if (this.y> ball.y) {
this.setMoveAngle (0);
} Else {
this.setMoveAngle (180);
} // End if
this.setSpeed ​​(V_SPEED);
} // End if
} // Fine Automove

Costruire una palla a rimbalzare confini

Mentre la palla è un folletto apparentemente semplicistico, ha alcuni comportamenti interessanti. La palla ha uno schema-limite di controllo unico. Si rimbalza parte superiore e inferiore dello schermo, ma se lascia i lati, si avvolge.

Se non si dispone di un sistema di confine che si inserisce uno dei modelli standard, si può semplicemente sovrascrivere i checkBounds () per fare quello che vuoi. (Si noti che non è necessario chiamare esplicitamente checkBounds () Si chiama automaticamente l'aggiornamento dello sprite () metodo La versione personalizzata di checkBounds sostituisce semplicemente il built-in versione Ecco una variante...:

tBall.checkBounds = function () {
// Sovrascrivono checkbounds funzione di dare
// Comportamento personalizzato

// Rimbalzare di alto e in basso
if (this.y <0) {
this.setDY (this.dy * -1);
}
if (this.y> scene.height) {
this.setDY (this.dy * -1);
}

// Avvolgere off di lati
if (this.x <0) {
this.setPosition (scene.width - 150, this.y);
// punteggi di computer
} // End if
if (this.x> scene.width) {
this.setPosition (150, this.y);
// giocatore segna
} // End if
} // checkBounds finali

Se la palla colpisce la parte superiore o inferiore dello schermo, capovolgere dy per fare rimbalzare. Se colpisce sinistra o destra dello schermo, spostarlo verso l'altro lato.

Metti un po 'spin sulla palla gioco

Nelle versioni tradizionali Pong, la sfera può essere controllata scegliendo dove sulla paletta per colpire la pallina. Se si colpisce la palla vicino alla parte superiore della pala, la palla si muoverà verso l'alto. Se si colpisce la palla vicino al centro della pagaia, che volerà attraverso lo schermo in orizzontale, e se si ha colpito vicino al fondo, la palla si sposta verso il basso.

tBall.checkBounce = function (paddle) {
// Risponde a una collisione con la pagaia data
// Max e min dy
MAX = 10
if (this.collidesWith (paddle)) {
this.setDX (this.dx * -1);

dy = this.y - paddle.y;
dy = ((dy / paddle.height) * 2);

dy * = MAX;
this.setDY (dy);
} // End if
} // End checkBounce

Il valore di dx è facile da calcolare, perché semplicemente invertire dx a muoversi nella direzione opposta. Il valore dy viene calcolata determinando la differenza tra la posizione y della palla e quella del paddle:

  1. Determinare un dy massima.

    Questo valore determina il massimo livello di deviazione vi permettete. Se il valore MAX è impostato a 10, il valore dy della palla sarà -10 nella parte superiore della pala, 0 a metà, e 10 nella parte inferiore della pala.
  2. Dx Inverti.

    Se la palla si muove a sinistra, moltiplicare il valore dx da -1 per farlo andare a destra. Se sta andando a destra, la stessa operazione (moltiplicando per -1) farà andare a sinistra. Qualsiasi collisione paddle inverte dx della palla.
  3. Trova la differenza prima in valori y.

    Calcolare quanto distanti il ​​valore y della pagaia e la palla sono.
  4. Normalizzare questo valore.

    Se si divide il valore dy grezzo per l'altezza della pagaia, si otterrà un range tra -.5 e .5. Moltiplicate questo valore per 2 per ottenere un -1 a 1 gamma.
  5. Moltiplicare il dy normalizzata da MAX.

    Moltiplicando il valore dy normalizzato per il valore MAX darà un valore dy tra-MAX e MAX.

Come migliorare il gioco Pong

Anche se questo gioco Pong ha il comportamento di base verso il basso, è tutt'altro che pronto per gioco effettivo. Qui ci sono alcune cose da considerare l'aggiunta di:

  • Aggiungi estetica. Si può fare molto per renderla migliore, da personalizzare le palette per l'aggiunta di animazioni palla ed effetti sonori.
  • Aggiungere scorekeeping. Aggiungere la possibilità di monitorare i punteggi utente e computer. Aggiungere anche un modo per determinare la fine del gioco.
  • Aggiungi powerups. Modificare la dimensione di ogni pala, invertire il controllo della pagaia giocatore, modificare la velocità della palla, fare la palla a volte invisibile, o invertire l'algoritmo di collisione palla-pagaia per cominciare.
  • Tune up l'IA. Diventa abbastanza nervoso quando la palla è in viaggio in una traiettoria piatta. Vedi se riesci a trovare un modo per appianare questo comportamento.