Basit oyunlar için Canvas vs SVG

Question

Basit bir oyun (yılan, dama, pacman veya her neyse) yapmak istedim, daha iyi bir yaklaşım ne olurdu? - SVG veya Canvas? (SVG vs Canvas öğrenme eğrisi) uygulanması

1. Kolaylığı:

   şeyler ben ilgileniyorum. Örneğin, SVG'nin benim için çok önemli olan daha az öğretici ve topluluk desteği varsa. (Bana kritik ama hala önemli değil)

Ve ayrıca, oyun alanında, orada SVG daha uygun olduğuna özgü oyunlar

Performansı (tersi ya?) Tuval daha

için

Answer 1

Çok fazla fare etkileşimi gerektiren ve çok fazla sürekli animasyon gerektirmeyen oyunlar (örneğin, dama veya satranç veya bu konuda herhangi bir masa oyunu gibi) SVG için daha uygundur çünkü dom elemanları ile çalışıyorsunuz. Basit bir düğmenin üzerine geldiğinizde, SVG'de etkinlik dinleyicileri ekleyebilir veya hatta CSS'nize g.button:hover path {fill: blue;}'u yerleştirebilirsiniz ve işe yarayacaktır. Diğer taraftan Canvas, hit alanın kaydını tutmayı ve Javascript'te her şeyi çizmeyi gerektirir.

Yılan ve Pacman, tuval için daha uygun olurdu, klavyenizle her şeyi kontrol edersiniz ve boyamak, tuvalete SVG'nin etrafındaki öğeleri taşımaktan daha ucuzdur. Tuval için mükemmel oyun kütüphaneleri var, impact.js bunlardan biri.

ele almak puan: Kullanım

kolaylığı: Saf javascript DOM manipülasyon SVG aşina ise çocuk oyuncağı. Boş bir tahta isminiz varsa, tuvali boyadığınız için tuvali kavramanın daha kolay olduğunu söyleyebilirim.

Topluluk desteği: Oyun tuvali için eller aşağı indirir. Oyun alanında güçlü bir SVG topluluğu var ama yok.

Performans: Karışık. Birkaç hile yapmazsanız, tuval ve SVG yavaş olabilir. Örneğin, tek bir kareyi soldan sağa hareket ettirmek, tüm kareleri tüm çerçeveye yeniden çizerseniz, tuvalette sarsıntılı olabilir. Değişen alanı yeniden boyayıp sonra pürüzsüz. SVG bu davayı aksamadan hallederdi. Fakat diğer yandan, aynı anda binlerce dikdörtgeni canlandırmak istiyorsanız, tuval düzgün bir şekilde işlenir ve eğer bir gruptaki rectleri sarmaz ve grubu hareket ettirirseniz, SVG aşağı doğru sarkar.

Her şeyden önce, javascript'te oyunu keşfetmek istiyorsanız belki de Canvas daha iyi bir seçenektir. SVG'de üç oyun yaptım, en sonuncusu http://color.method.ac olmakla birlikte, bende tuvalin içine düştüm ve oyun için daha uygun olduğunu düşünüyorum.