2012-10-15 4 views
10

player stackEsiste una libreria di fisica JavaScript che funzioni con elementi HTML come div anziché in canvas?

Sto lavorando su una pila semplice per un gioco in cui i giocatori si muovono pezzi numerati in giro per tenere traccia di quanto sono vicini alla finitura raccolta di una mano vincente di pezzi.

Attualmente sono andato con jQuery UI è trascinabile e trascinabile. È consigliabile avviarlo facilmente, ma i pezzi possono essere spostati solo un pezzo alla volta: http://cssdeck.com/labs/cowmmudd/4.

  • Vorrei esternalizzare gli elementi mobili in una vera libreria di fisica JavaScript piuttosto che utilizzare l'interfaccia utente di jQuery. (In modo che quando si sposta il 4 blu nella riga superiore completamente sinistra, forza tutti i pezzi su quella riga insieme.)
  • Voglio continuare a utilizzare i normali elementi HTML per rappresentare i miei pezzi in quanto questi sono più facili da stile e motivo per (Tutte le librerie Javascript fisica mi hanno dato un'occhiata a uso canvas ma voglio raggiungere te stesso di Google ha fatto una volta: http://mrdoob.com/projects/chromeexperiments/google-gravity/)

Qualcuno può fornire un esempio di minimalista di controllare il posizionamento e le collisioni di normale, non- elementi HTML in-canvas che utilizzano la migliore libreria di fisica JavaScript di cui sono a conoscenza?

+0

Sei sicuro utilizzando una libreria esterna supplementare è la strada da percorrere? che ne dici di controllare le tessere alla stessa altezza quando cadono e se possono essere spostate a sinistra le animano lì? –

+1

@BenjaminGruenbaum Non voglio scrivere un sacco di codice non gestibile perché sono un noob completo in fisica, matematica e geometria, lo nominate. Voglio dichiarare le proprietà degli oggetti del gioco e avere una libreria adeguata che si occupi delle collisioni e del posizionamento per me. –

+1

La versione JS di box2d ha un renderer di debug che usa canvas, ma è solo l'impostazione predefinita. Puoi rendere gli oggetti come vuoi: la simulazione e il disegno sono indipendenti. –

risposta

4

L'esempio più semplice che ho trovato finora: http://bl.ocks.org/3411189

Aggiornamento: un semplice adattamento ai miei pezzi: http://cssdeck.com/labs/fe3z2cfx/6

+1

Alcuni di questi collegamenti sono soggetti a cancellazione senza preavviso o sono fissi permanenti? Nella maggior parte dei casi, è meglio incollare il codice effettivo nella risposta e fare riferimento al collegamento. Altrimenti, la tua risposta diventa inutile se le risorse scompaiono all'improvviso. Vedi anche http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers –

+0

@RobertHarvey: hai ragione, modifico il cssdeck come da i tuoi suggerimenti! –

+0

@RobertHarvey: ho aggiornato la mia risposta incorporando i due brevi frammenti JS e aggiungendo riferimenti alle loro fonti originali. –