एचटीएमएल 5 गेम, कैनवास या div?

Question

मैं जावास्क्रिप्ट का उपयोग कर HTML5 में रीयल-टाइम मल्टीप्लेयर प्लेटफार्म गेम बनाने की योजना बना रहा हूं। जाल पर लगभग 4 घंटे की खोज करने के बाद, मुझे शाश्वत प्रश्न पर एक अद्यतित उत्तर नहीं मिला: डीओएम के साथ मेरा गेम प्रस्तुत करना कैनवास के अंदर इसे प्रस्तुत करने से तेज़ होगा? खेल पूरा दस्तावेज़ होगा। 2/4 खिलाड़ी मानचित्र पर कूदेंगे और एक-दूसरे पर शूट करेंगे, बम विस्फोट करेंगे। इसलिए? यह क्या हो जाएगा। मुझे याद है कि मैंने दो साल पहले डीओएम के साथ ड्रा ड्रा बनाया था और यह थोड़े आसानी से काम करता था, लेकिन मुझे लगता है कि कैनवास की गति आजकल बेहतर है? आप लोगों को धन्यवाद।

पीएस मैं भी डार्ट का उपयोग करने के बारे में सोचता हूं।

Answer 1

मैं कैनवास का उपयोग करता हूं, और ऐसा करने के लिए कहता हूं क्योंकि यह प्रत्यक्ष ड्राइंग मोड है। हालांकि, आपको पूरी तरह से यह सुनिश्चित करना चाहिए कि जहां भी संभव हो, इसे हार्डवेयर त्वरण में मजबूर किया जाए। आप <canvas> तत्व की शैली को transform:translateZ(0); (या उसमें विभिन्न ब्राउज़र व्याख्याओं, जैसे -webkit-transform:translateZ(0);) की शैली सेट करके ऐसा करते हैं। डीओएम में हेरफेर करना अब धीमा हो सकता है कि कैनवास देशी कोड के करीब और करीब है, खासतौर से सरल तरीकों के साथ इसका सबसे अधिक प्रदर्शन प्राप्त करने के लिए।

मेरे खेल इस के साथ विभिन्न प्लेटफार्मों पर बहुत अच्छी तरह से करने के लिए लगता है - नहीं सार्वभौमिक अच्छी तरह से हर एक मंच (पुराने Android OSes अंतराल है, लेकिन उनके जे एस & ब्राउज़र प्रतिपादन इंजन के साथ शुरू करने के लिए तेजी से नहीं थे) पर है, लेकिन बहुत अच्छी तरह से कई प्लेटफार्मों पर।

Answer 2

कैनवास आपके द्वारा वर्णित गेम के प्रकार के लिए सबसे अच्छा विकल्प है, लेकिन कुछ डीओएम तत्व कैनवास का उपयोग करके भी बहुत उपयोगी हैं, उदाहरण के लिए, प्लेयर के नाम से पूछना, या गेम के अंदर मेन्यू या प्रोफाइल अनुभाग बनाना। जब आप DOM तत्वों को प्रदर्शित करने की आवश्यकता होती है, तो आप अपने कैनवास के शीर्ष पर पूर्ण स्थिति के साथ एक div प्रस्तुत कर सकते हैं, और कैनवास तत्व में ड्राइंग और एनिमेट स्प्राइट्स जैसी सभी "गेम सामग्री" कर सकते हैं।

कैनवास सबसे अच्छा विकल्प क्यों है, यह सरल है।

http://galloman.github.io/ss2d/samples/skeletons2.html

अधिक पर: http://ss2d.wordpress.com/support/