Share
Bene, ci stiamo avvicinando alla fine del 2009 e, come sempre, questi ultimi giorni a dicembre sono un momento di riflessione, ricordi e nostalgia. In Activetuts + ci sforziamo di essere lungimiranti, muovendo con i tempi e abbracciando la tecnologia. Detto questo, è anche importante fare appello tutti i nostri lettori, quindi per quelli di voi che non hanno ancora fatto il salto, finiamo l'anno con un po 'di ActionScript 2.0!
In questo tutorial creerai un semplice gioco di serpenti AS2.
Avvia Flash e fai clic Crea nuovo: file Flash (Actionscript 2.0). Puoi impostare le dimensioni dello stage in base alle tue esigenze: ho impostato il mio a 500 x 350. Ti consiglio di impostare il framerate su 30 fps.
Ora, puoi decidere di seguire questo passaggio e disegnare da te i filmati necessari, oppure puoi saltare avanti e usare quelli che ho creato. Se vuoi usare quelli che ho creato puoi trovarli nel file sorgente. Basta aggiungerli alla libreria e trascinarli sul palco. Se vuoi disegnare il tuo: non devi letteralmente disegnare come ho fatto io, ma assicurati di rispettare le dimensioni.
La prima cosa che creeremo è la buca per il serpente che gira intorno. Crea un rettangolo di 400 x 250 e convertilo in un Movie Clip. Assicurati di prestare attenzione al punto di registrazione; fallo in alto a sinistra.
Assicurati di assegnare al pit pit il nome dell'istanza Snakepit e allinearlo leggermente al di sopra del centro del palco (in modo che possiamo aggiungere il testo al di sotto di esso più tardi, senza rovinare l'estetica).
Disegna un quadrato (magari con angoli arrotondati) senza un bordo (misura 25 x 25) e copialo in modo da avere 2 esattamente uguali. Converti uno di loro in un Movie Clip. Di nuovo, presta attenzione alla registrazione in alto a sinistra.
Assicurati di dargli il nome dell'istanza bodypart0 e controlla due volte che la sua dimensione sia 25 x 25.
Inserisci il Movie Clip "testa". Una volta dentro, aggiungi questa linea di codice al primo e solo frame:
Stop();
Ora, disegna una piccola faccia sulla testa del serpente, così puoi distinguerla dagli altri bodyparts.
Aggiungi un secondo fotogramma al Movie Clip "testa" e, su questa cornice, disegna una faccia triste o morta.
Ricorda il quadrato duplicato creato nel passaggio 3? Ora lo convertiamo in un Movie Clip. Prestare nuovamente attenzione al punto di registrazione.
Assicurati di dargli il nome dell'istanza parte del corpo.
Crea un campo di testo dinamico sotto l'angolo destro della fossa dei serpenti. Assicurati di impostare la variabile su Punto. Inoltre, assicurati che il campo sia sufficientemente ampio per diversi caratteri e allineato a destra. Il resto delle impostazioni può essere impostato in base al tuo stile: ho usato Tahoma 24 Bold.
Dato che si tratta di un campo di testo dinamico, dovremo incorporare il carattere. Fai clic sul pulsante incorporato nel pannello delle proprietà (in cui hai appena definito la variabile e lo stile del testo).
Vedrai il popup mostrato sotto. Assicurati di selezionare Numeri [0 ... 9].
Disegna un cerchio blu senza bordo, misura 25 x 25, quindi cancella il centro usando lo strumento gomma. Ora seleziona il cerchio che rimane e convertilo in un Movie Clip. In alternativa, puoi progettare un pezzo di cibo per te, purché rimanga 25 x 25.
Dare al cibo un nome di istanza sorprendente di cibo. Verifica che la sua dimensione sia 25 x 25.
Sinistra-sotto il pozzo del serpente sembrava un buon posto per mettere alcuni indicatori. Digita semplicemente il testo statico "Usa i tasti freccia per spostarti" qui. Lo so, i tasti freccia non funzionano ancora, ma ci arriveremo a breve. lo prometto!
Disegna un quadrato bianco (da qualche parte fuori dal palco, per ora) e aggiungi il testo "Sei morto!" ad esso. Questo è il popup che mostreremo dopo che qualcuno ha perso una partita.
Convertilo in un Movie Clip e assegnagli il nome dell'istanza apparire anche. Per motivi di allineamento, ho impostato il punto di registrazione al centro.
Fai doppio clic sul popup che hai appena creato per inserirlo. Una volta dentro, crea un campo di testo dinamico (variabile = Punto) e un pulsante per leggere il testo Gioca di nuovo.
Il pulsante dovrebbe avere il nome dell'istanza againbutton.
All'interno del pulsante, puoi creare uno stato "Sopra" leggermente più scuro e uno più scuro di "Giù".
Congratulazioni, hai creato tutti gli oggetti visivi necessari per il gioco del serpente. Ora oltre al codice!
Prima di buttarti un pezzo di codice, ti dirò cosa farne. Tutto il codice in questo tutorial va sul primo e solo frame del tuo film. Non è necessario collegarlo ai pulsanti o altro. Ora, dai un'occhiata a questo pezzo di ActionScript.
Nota dell'editore: Ci scusiamo per questo, l'evidenziatore della sintassi del codice non vuole mostrare questo particolare frammento di ActionScript in FireFox. Dai un'occhiata al codice qui.
In poche parole, questo bit di codice fa quanto segue. Innanzitutto, il bodypart originale è reso invisibile - presto useremo i duplicati. Alcuni valori predefiniti sono (ri) impostati, tutti i duplicati rimasti dal gioco precedente vengono cancellati. Nel ciclo do while (), al cibo e al bodypart0 (la testa) viene assegnata una coordinata xey. Se questo corrisponde (quindi sono esattamente nello stesso punto), viene assegnata una nuova coordinata, finché non abbiamo più una corrispondenza. Quindi, gli array sono impostati in cui conterremo le coordinate xey del bodyparts.
In questo bit di codice, creiamo un oggetto keyListener, che colleghiamo a Key, che rappresenta la tastiera. Ogni volta che viene premuto un tasto, viene attivata la funzione onKeyDown. Dalla funzione getCode (), ricaveremo quale tasto è stato premuto e quindi definire la direzione in base a questo. Lo memorizzeremo nel direzione variabile per un uso successivo. Ricorda: tutto il codice di questo tutorial va sul primo e solo frame del tuo film.
keyListener = new Object (); keyListener.onKeyDown = function () keycode = Key.getCode () if (keycode == 37) direction = 'left' else if (keycode == 38) direction = 'up' else if (keycode == 39) direction = 'right' else if (keycode == 40) direction = 'down'; Key.addListener (keyListener);
La funzione qui è grande. Viene eseguito su ogni fotogramma, ma fa veramente qualcosa ogni 5 fotogrammi. Controlla se il serpente non si muove fuori dalla scatola e poi sposta tutti i bodyparts nella loro nuova posizione. Quindi controlla se c'è anche il cibo e poi lo mangia usando la funzione eat () di cui discuteremo più avanti. Quindi, controlla se il serpente si schianta contro un muro e infine controlla se il serpente si morde nella coda. Tutte queste funzioni saranno presto aggiunte (insideSnake (), dead (), eccetera). Ricorda: tutto il codice di questo tutorial va sul primo e solo frame del tuo film.
Accentsconagua
this.onEnterFrame = function () if (game) if (framecount / 5 == Math.ceil (framecount / 5)) if (! (bodypart0._y <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2 && direction == 'down') &&! (bodypart0._x + bodypart0._width> = snakepit._x + snakepit._width - 2 && direction == 'right') &&! ( bodypart0._x <= snakepit._x && direction == 'left')) bodypartsy[0] = bodypart0._y; bodypartsx[0] = bodypart0._x; for (i=bodypartsy.length-1;i > 0; i--) eval ('bodypart' + i) ._ y = bodypartsy [(i-1)] eval ('bodypart' + i) ._ x = bodypartsx [(i-1)] bodypartsy [i] = eval ( 'bodypart' + i) ._ y bodypartsx [i] = eval ('bodypart' + i) ._ x if (cibo._x == bodypart0._x && cibo._y == bodypart0._y) eat () if (direction) if (direction == 'up') if (bodypart0._y <= snakepit._y) dead() else bodypart0._y-= bodypart0._width else if (direction == 'down') if (bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2) dead () else bodypart0._y + = bodypart0._width else if (direction == 'right') if (bodypart0._x + bodypart0._width> = snakepit ._x + snakepit._width - 2) dead () else bodypart0._x + = bodypart0._width if if (direction == 'left') if (bodypart0._x <= snakepit._x) dead() else bodypart0._x-= bodypart0._width if (game) if (insideSnake(bodypart0._x,bodypart0._y,true)) dead() framecount++ Questo è bello e facile. Esegue le azioni che devono essere eseguite quando il serpente muore: il punteggio deve essere definito nel popup, il popup mostrato, il dead-face del serpente mostrato e la variabile di gioco impostata su false (al termine del gioco).
function dead () popup.score = 'score:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) game = false;
La funzione seguente viene attivata nella funzione onEnterFrame di cui abbiamo parlato in precedenza, quando il cibo viene prelevato. Prima duplica una parte del corpo del serpente, quindi lo posiziona nel punto dell'ultima parte del corpo (in modo che si unisca alla linea sul fotogramma successivo). Le sue coordinate vengono aggiunte alle coordinate contenenti gli array e il cibo viene riposizionato (da qualche parte non all'interno del serpente!). Inoltre, il punteggio è aggiornato.
function eat () duplicateMovieClip (bodypart, 'bodypart' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.swapDepths (this.getNextHighestDepth ()) eval ('bodypart' + bodypartsy.length) ._ y = eval ('bodypart '+ (bodypartsy.length-1)) ._ y eval (' bodypart '+ bodypartsx.length) ._ x = eval (' bodypart '+ (bodypartsy.length-1)) ._ x bodypartsy.push (eval (' bodypart ') + bodypartsy.length) ._ y) bodypartsx.push (eval ('bodypart' + bodypartsx.length) ._ x) do cibo._x = snakepit._x + Math.floor (((snakepit._width-food._width) / food._width) * Math.random ()) * food._width food._y = snakepit._y + Math.floor (((snakepit._height-food._height) /food._height) * Math.random ()) * food._height while (insideSnake (food._x, food._y)); score = bodypartsx.length-1 Questa funzione controlla semplicemente se le coordinate immesse corrispondono a una qualsiasi delle coordinate del corpo del serpente. Se skiphead è impostato su true, è consentito abbinare le coordinate della testa (quando si controlla se la testa si morde la coda, questo è utile).
