Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

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

سلام. امروز یکی از جالب ترین کدهایی رو که نوشتم میخوام با افتخار در اینجا قرار بدم:
بازی مار در 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.

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

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

با تشکر

من بیکار بیکار رفتم ی وب ساختم کردمش قالب این کدو بعد ب وب اصلیم لینک کردم ب اسم بازی اسنیکز
سلام داداش
یه کدو میخوام دیکد کنم
به هر دری زدم نتونستم
کدو میزارم توی انجمن تو رو خدا کمکم کن
خواهش میکنم... شکلک
همونطور که گفتم این کد رو بیشتر برای آموزش گذاشتم و getter ها و setter ها هم دقیقا به همین دلیل اونجا هستن.
------------------
خیر. با اونم کار کردم ولی اگه تو هم باهاش کار کرده باشی میبینی که فقط js خروجی اون چیزی در 1.5 مگابایته!
ممنون
این بازی که گذاشتید با نرم افزار ساخت بازی به نام Construct 2 ساخته شده

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4408
تعداد اعضا : 36856
افراد آنلاین : 5
بازدید امروز : 575
بازدید دیروز : 3,042
گوگل امروز : 5
گوگل دیروز : 41
بازدید هفته : 575
بازدید ماه : 19,283
بازدید سال : 233,702
بازدید کلی : 11,015,404