Esempi di buoni giochi basati su Javascript / HTML5 [chiuso]

Ora che Flash viene in gran parte sostituito con elementi HTML5 (video, audio, canvas, ecc.) Ci sono dei buoni esempi di giochi basati sul web basati su standard completamente aperti (ovvero Javascript, HTML e CSS)? Vedo molti esempi di implementazioni HTML5 pure di quello che una volta era solo in Flash (come roba qui: http://www.html5rocks.com/ ) ma non molti giochi, un dominio che sembra ancora dominato da Flash. Sono curioso di sapere cosa sia possibile e quali siano i limiti.

C'è molto clamore intorno a HTML5, ma dire che Flash è in gran parte sostituito da esso è un'esagerazione. Mentre i tag audio e video possono guadagnare terreno, i giochi saranno un'area che dura a lungo, non solo per i migliori strumenti e prestazioni, ma anche perché esiste un'infrastruttura aziendale costruita attorno alla distribuzione di file Swf, che non sarebbe facile adattarsi a HTML e js. I giochi html5 che ho visto usando canvas sono all'incirca 7 anni fa, quando Flash era già ampiamente diffuso e quando ie9 è ampiamente distribuito in modo tale che canvas sia un'opzione praticabile, Flash avrà già introdotto le sue funzionalità di accelerazione hardware e 3d pianificate.

Nell'interesse di esplorare fino a che punto puoi portare il più recente ritaglio di browser, io e alcuni colleghi abbiamo compilato la porta Java open source di Quake II su Safari / Chrome (a un certo punto dovrebbe funzionare anche su Firefox, sebbene inizialmente non lo fosse, in gran parte per motivi prestazionali). Il progetto è qui: http://code.google.com/p/quake2-gwt-port/

Richiede ancora un po 'di cura e alimentazione per attivarlo (ad esempio, WebGL non è ancora abilitato per impostazione predefinita in nessun browser di spedizione), ma abbiamo caricato un video qui: http://www.youtube.com/watch?v = XhMN0wlITLk (mi dispiace che sia così buio - i problemi di gamma rimangono) e puoi vedere il nostro I / O di Google parlare qui: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Non so quanto tempo ci vorrà prima che possiamo realisticamente dipendere da tutte queste nuove funzionalità del browser (WebGL, WebSocket, audio / video, archiviazione locale, ecc.), Ma se tutto si riunisce potrebbe fare una grande differenza nella capacità di spedire giochi direttamente sul web. Rimangono tuttavia molti ostacoli (ad esempio, non trattenere il respiro affinché Microsoft attui WebGL in IE10).

Lord of Ultima di EA è probabilmente il gioco basato su Javascript / HTML più impressionante che abbia mai visto.

Nota: è un gioco di strategia e non un titolo d'azione, quindi mentre ha una bella mappa scorrevole, non c'è niente oltre al clic sui pulsanti per quanto riguarda l'interattività diretta.

"Sono curioso di sapere cosa sia possibile e quali siano i limiti."

Le limitazioni sono basate sul browser. Se stai usando qualcosa di caldo come i nightly di Webkit, fondamentalmente non c'è nulla che Flash possa fare che il browser non possa fare in modo nativo, come:

• Grafica 2d (via canvas) con rotazione, ridimensionamento, opacità, ecc.
• 3d (via canvas e WebGL)
• Audio (tramite il tag audio, anche se attualmente fa schifo anche nei browser che lo supportano)
• HTTP (tramite XMLHTTPRequest)
• Archiviazione locale (tramite l'API localStorage)
• Socket (tramite Web Socket)
• SVG
• Video (tramite il tag video)

AFAIK è tutto possibile anche in Google Chrome (e se non lo è, lo sarà presto). Mi sembra un ambiente di gioco completo :)

(Ho incluso i collegamenti a tutte queste cose nella mia prima bozza ma StackExchange non mi ha permesso di pubblicarli da quando sono nuovo; scusate!)

Dai un'occhiata a questi siti Web:

• http://html5games.com/
• http://web.appstorm.net/roundups/browsers/10-html5-games-paving-the-way/

Un ragazzo di jquery sta costruendo un motore di gioco chiamato Aves usando javascript / html. Questo video descrive alcune delle sfide che ha incontrato durante lo sviluppo. Ha parlato molto di quanto fosse lenta la tela e che attualmente non sia accelerata.

Potresti anche trovare un sacco di giochi sviluppati utilizzando il motore Effect Games. Sebbene il motore appaia abbastanza sandbox nel suo sito con tutti gli strumenti e le risorse esistenti lì.

IMO il limite più grande dello sviluppo di un gioco js / html è valido. Il tag si comporta diversamente per quanto riguarda gli eventi su safari / firefox / chrome, che devono essere tutte le versioni più recenti. L'ultima volta che ho controllato Safari ha funzionato solo con MP3 e Firefox funziona solo con OGG. Anche se è del tutto possibile superarlo con una combinazione di logica lato server.

Al momento mi diletto a scrivere giochi Flash e non riesco a vedere quel dominio superato da HTML5 (js / css / html) fino a quando i portali non iniziano ad accettarli o gli app store web non vanno online.

Contrasaurus

Questo gioco è stato accuratamente creato con sangue, sudore, lacrime e HTML5. La libreria di trasformazione della matrice principale è stata creata come Matrix.js . Inoltre, molte delle estensioni del linguaggio di base, sprite, suoni e librerie di tela si stanno facendo strada The Pixie Game Platform .

Nessun flash, tutta la tela e l'audio HTML5. Funziona meglio con Chrome.

Devi VERAMENTE dare un'occhiata alla libreria CAAT - è fantastico! È una libreria scenegraph (es. Thing.addchild / thing2.removechild) per la tela.

Questa demo mi ha lasciato senza fiato, insieme al gioco contenuto anche in quella pagina: http://labs.hyperandroid.com/animation

Tanto che mi sono trasferito sul nostro gioco per usarlo e mi ci è voluto solo una notte.

Entra, lotta a palle di neve multiplayer http://holiday2010.ogilvy.com

Tanto che ho provato a migliorare il lirario e ad aggiungere cose al suo interno: http://github.com/onedayitwillmake/CAAT-Hello

Disponibile su github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack

Anche se i controlli sono sbagliati / hanno bisogno di lavoro, sono affezionato ad Akihabara - http://www.kesiev.com/akihabara/

Google Pacman deve essere uno dei giochi JS / HTML più impressionanti che abbia mai visto (scontato, è l' unico che ho visto, ma è comunque davvero impressionante :)

Posizioni del codice sorgente

Esistono ottimi tutorial per le biblioteche di Akihabara messi insieme da Darius Kazemi e Darren Torpey su: Akihabara Tutorials

Biolab Disaster è un platform abbastanza sidescrolling che mostra cosa si può fare con html5 e js. http://playbiolab.com/

Ho appena finito il porting del mio gioco di strategia spaziale da Silverlight / C # a puro HTML5 / Javascript / Canvas:

Astriarca - Righello delle stelle

È un gioco 2D e graficamente molto semplice, quindi si presta perfettamente all'utilizzo della tela perché non c'è molta pittura in corso. Detto questo, sono impressionato da ciò che alcuni altri giochi più animati stanno facendo là fuori con la stessa tecnologia. Come gli uccelli arrabbiati nel Chrome Web Store: Angry Birds , potresti anche voler dare un'occhiata ad alcuni degli altri giochi nel Chrome Web Store per ulteriori esempi.

Uno dei motivi per cui ho effettuato il porting del mio gioco era che volevo che fosse in grado di funzionare su tablet / dispositivi mobili senza dover ricodificare il tutto in Java o nell'Obiettivo C. iOS e Android hanno entrambi i controlli 'WebView' per rendere tutto più semplice, ma Ho avuto problemi nel piccolo armeggiare che ho fatto con esso (iOS richiede che tutte le tue risorse siano in una cartella per quanto ho visto).

Questo tipo di requisiti multipiattaforma è una buona ragione per cui alcune persone si stanno allontanando da Flash e verso HTML5, ma il rovescio della medaglia è che devi testare su N diversi browser e versioni e avere tutti i mal di testa associati allo sviluppo web tipico. Questi problemi sono alleviati da librerie come jQuery e alcune delle altre librerie / piattaforme di giochi HTML5 menzionate qui ( ImpactJS è uno che ho visto ma non ho provato). Inoltre, questi problemi non saranno tanto un problema quando FireFox 7 è uscito e IE 9+ diventa più pervasivo.

Se sei interessato ad alcuni dei problemi che ho riscontrato nel porting da Silverlight a HTML5 Canvas, dai un'occhiata al mio post sul blog qui: Porting dell'app Silverlight su javascript usando il tag HTML5 Canvas

Ecco 3 fantastici giochi che utilizzano il motore ImpactJS .

Impact è un motore di gioco JavaScript che ti consente di sviluppare incredibili giochi HTML5 per browser desktop e mobili.

Se al momento non sei sicuro di cosa puoi fare con HTML5, direi che questi sono attualmente i migliori esempi. Tieni presente però che, poiché si tratta di un argomento così caldo, il campo sta cambiando rapidamente!

Z-Type

A Space Shoot'em'Up in cui si digita per sparare.

Biolab

Fatti strada attraverso un Biolab infetto in questo Jump'n'Run. Usa la tua pistola al plasma per sparare a tutto ciò che si muove! Ci sono 3 livelli da esplorare e 6 tipi di nemici da combattere.

Creature e castelli

Un gioco puzzle di azione in cui aiuti un giovane cacciatore di tesori a rubare enormi quantità di tesori da un castello medievale.

Per coincidenza, oggi c'era una domanda su Slashdot sui giochi html5 / javascript:

http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming

Menziona specificamente Galactic Plunder, uno sparatutto spaziale a scorrimento laterale:

http://dougx.net/plunder/plunder.html

http://www.javascriptgaming.com/

Un framework di sviluppo HTML5 davvero interessante su cui mi sono imbattuto di recente è Sencha. È principalmente per dispositivi portatili / touch, ma cosa non sarà basato sul touch tra un paio d'anni? Ecco alcune demo interessanti, tra cui un gioco di carte:

http://www.sencha.com/products/touch/demos.php

Qui ci sono alcuni giochi HTML5 su Giochi di effetti ... ci sono anche progetti in cui puoi saltare per essere coinvolto. Ho trascorso del tempo tra le compilazioni principalmente con la loro demo Crystal Galaxy

Dal sito: "Cycleblob è implementato utilizzando elementi canvas WebGL e HTML 5 ed è scritto completamente in JavaScript."

http://cycleblob.com/

prova Private Joe per uno sparatutto arcade retrò in 2D completo

se desideri provare i giochi ottimizzati per dispositivi mobili, vai su marketJS