Quali sono i vantaggi/svantaggi di Canvas vs. DOM nello sviluppo di giochi JavaScript?

Question

Quali sono i vantaggi e gli svantaggi della creazione di giochi nel DOM "puro" rispetto all'uso della tela?

Answer 1

Con il canvas è possibile eseguire operazioni come la rotazione che non è possibile eseguire con la dome pura senza utilizzare trucchi "pesanti". In ogni caso, dom è più veloce e puoi usarlo in ogni browser senza problemi. Devi pensare a cosa userai nel gioco, se usi solo le operazioni di base usa il dom, altrimenti scegli la tela.

Answer 2

Guarda qui: Why Canvas is not an obvious choice for web games.

Answer 3

Quando sviluppi con Canvas dovrai usare la tecnica GameLoop che è molto dolorosa perché dovrai ridisegnare tutti gli elementi tutto il tempo.

Quando sviluppi con DOM sarai in grado di ridisegnare solo gli oggetti che sono stati modificati e consentirà il duro lavoro per l'implementazione del browser.

se il gioco ha qualche modifica per frame, allora puoi usare il DOM, altrimenti usa la tela per favore! È molto più veloce!

Answer 4

tela pro:

1. potrebbe manipolare pixel e applicare effetto filtro, così facile per l'elaborazione delle immagini;
2. molto efficiente per le piccole dimensioni, ma centinaia di elementi nel gioco
3. molte librerie per il gioco potrebbe essere trovato utilizzando tela, come ad esempio box2dweb, e potrebbe fare fantastici giochi quali uccelli arrabbiati

contro:

1. è stateless, quindi è necessario registrare gli stati degli elementi nell'area di disegno e gestire da solo l'hit test.
2. basso efficiente per dimensioni molto grandi ma con uno pochi elementi nel gioco
3. grande abilità, grande responsabilità. la libertà di disegnare, porta a farvi carico di tutto il personale di disegno. Fortunatamente, ci sono molte librerie lì, come ad esempio cocos2d-html5, IvanK.

DOM pro:

1. resa dal browser, quindi meno soggetto a errori;

contro:

1. Potrebbe fare semplice animazione solo con i CSS, che rende il gioco non fluente;
2. non va bene per la manipolazione di centinaia di elementi DOM;