آموزش کانواس+شیء گرایی در جاوااسکریپت

سلام. امروز یکی از جالب ترین کدهایی رو که نوشتم میخوام با افتخار در اینجا قرار بدم:
بازی مار در HTML5
پیشنیاز اجرای این بازی یه مرورگر با ساپورت HTML5 Canvas هستش که البته تقریبا هر مرورگری اینو داره...
برای این که مطمئن بشین هم کافیه برین سایت CanIuse.com و یا ساده تر، این کد رو اجرا کنین... :دی
این مال 2-3 ماه پیشه اما همونطور که گفتم یکی از جالب ترین کدهاییه که نوشتم و چیزهایی رو توش میبینین که شاید برای همه مون تازگی داشته باشه...
سعی کردم با کامنتت، جزء به جزء شو توضیح بدم اما باز هم اگه کوچیکترین ابهامی بود هم در کامنتا و هم در انجمن حاضرم...
همونطور که از عنوان هم مشخصه مهمترین هدف این پست آموزش شیءگرایی و رسم در کانواس بوده و این بازی فقط یه مثاله؛ اونم در حد 2بعدی کانواس...
این یعنی اینکه شما با غرق شدن در این قابلیت میتونین کارهای فوق العاده ای رو انجام بدین!!
الآن که دارم اینجا رو مینویسم واقعا به وجد اومدم (همون جوگیر شدم :دی ) و بهتون به شدت توصیه میکنم به سایت Threejs.org برین و ببینین که دیگه میشه فقط با همین یه قابلیت از HTML5 چه کارا کرد...یکبار در کنسول مرورگرتون به جای getContext('2d')
getContext('webgl') یا getContext('experimental-webgl') رو بزنین تا به عمق فاجعه پی ببرین!
بیخیال؛ کد رو دی یابیم... :دی
نکته خیلی مهم :
اگه میخواین دکمه Save Pic کار کنه باید لینک عکسها از هاست خودتون باشه؛ این یه گزینه امنیتیه و در اصطلاح به کانواسی که از منابع هاست های غیر، استفاده میکنه؛ "آلوده" میگن و از این کانواس دیگه نمیشه خروجی گرفت...
با تشکر... :P

توضیحات (moisrex)

کدهای جالبی هست که در بالا نوشته شده ولی همونطور که دوست عزیزمون هم گفت بیشتر به درد آموزش می خوره. خیلی از قسمت های کد اضافی هستن. یا برای مثال اصلا نیازی به canvas دوم نیست. یا برای مثال قسمت های getter که در کد مشخص شده کدهای اضافی ای هم داره که خیلی راحت با تغییر روش کار میشه مقدار زیادی از کدها رو حذف کرد و مستفیم به دست آورد. اینطوری مرتبا شما باید اسکرول کنید که ببینید این قسمت از کد الآن چه مقداری داره اگر نام گذاری خوبی نداشته باشین.

درباره اون سایتی هم که معرفی کردن اون ها از تکنولوژی webgl اکثرا استفاده شده. canvas دو بعدی از اینترنت اکسپلورر 9 به بعد ساپورت میشه ولی webGl از اینترنت اکسپلورر 11 به بعد. حتی فایرفاکس به طور کامل از اون پشتیبانی نمی کنه حتی در ورژن هایی که هنوز به صورت public در نیومدن مثل nightly.

در کل از زحمات سازنده کد تشکر می کنم ؛ گذشته از عکس هاش بقیه کد جالبه :دی

به قول بیل گیتس همیشه آسون ترین راه رو برای انجام انتخاب کنین نه مثل کد بالا از سخت ترین راه ها برای ساختن ساده ترین چیز ها استفاده کنین :دی

با تشکر