آموزش جاوا اسکریپت Vanilla: برنامه نویسی بازی موبایل

سرفصل ها و درس ها

مقدمه Introduction

• JavaScript خود را با یک بازی بهینه کنید Optimize your JavaScript with a game

• چه چیزی میخواهید بدانید What you need to know

1. برنامه نویسی بازی 1. Game Programming

• مبانی برنامه نویسی بازی Game programming basics

• ویرایشگر را انتخاب کنید Choose an editor

• نمایش محصول نهایی Demo the finished product

2. اولین بازی شما 2. Your First Game

• اولین بازی شما Your first game

• شرایط اولیه را با استفاده از CSS تعریف کنید و شیوه نامه را به HTML پیوند دهید Define the initial conditions using CSS and link the style sheet to HTML

• اشیاء بازی را با استفاده از JavaScript تعریف کنید Define the objects for the game using JavaScript

• اشیاء بازی را دراز کنید Lay out the game objects

• برای جابجایی نقطه بازی از اعداد تصادفی استفاده کنید Use random numbers to move the game's dot

• حلقه بازی را ایجاد کنید و آن را راه اندازی کنید Create the game loop and start it up

3. انیمیشن 3. Animation

• مبانی انیمیشن Animation basics

• با انیمیشن جایگزینی شروع کنید Get started with replacement animation

• با استفاده از JavaScript انیمیشن جایگزینی ایجاد کنید Create replacement animation using JavaScript

• اضافه کردن برخی از ریاضیات: با انیمیشن نقطه به نقطه شروع کنید Add some math: Get started with point-to-point animation

• برای تحریک کردن اشیاء از یک فرمول استفاده کنید Use a formula to animate objects

• سیستم مختصات جاوا اسکریپت The JavaScript coordinate system

• برخورد مرزی و نحوه شبیه سازی آنها Boundary collisions and how to simulate them

4. Moving On: تنظیم بازی Rebound 4. Moving On: Setting up the Rebound Game

• عناصر بازی را با استفاده از HTML ایجاد کنید Create the game elements using HTML

• عناصر بازی را با استفاده از HTML ایجاد کنید Create the game elements using HTML

• یک صفحه سبک به بازی اضافه کنید Add a stylesheet to the game

• از CSS برای سبک و قرار دادن عناصر بازی استفاده کنید Use CSS to style and position the game elements

• CSS بازی را با استفاده از ابزارهای برنامه نویس Chrome تست کنید Test the game's CSS using Chrome's Developer Tools

• متغیرهایی را برای اشیاء DOM با استفاده از JavaScript ایجاد کنید Create variables for the DOM objects using JavaScript

• اشیاء DOM HTML را اولیه کنید Initialize the HTML DOM objects

• طرح بندی منطقه بازی Layout the gaming area

• رویدادهای صفحه کلید را گوش دهید و آنها را کنترل کنید Listen for and handle keyboard events

• جاوا اسکریپت خود را بهینه کنید Optimize your JavaScript

5. حلقه بازی 5. The Game Loop

• حلقه بازی را شروع کنید Start the game loop

• مقدمه ای برای درخواستAnimationFrame () Introduction to requestAnimationFrame()

• استفاده از درخواستAnimationFrame () Use requestAnimationFrame()

• Rendering: رسم اشیاء بازی روی صفحه Rendering: Drawing game objects on-screen

• فیزیک: برخورد را تشخیص دهید Physics: Detect collisions

• قابلیت پخش: مدیریت مشکل Playability: Manage difficulty

• شرایط پایان را اجرا کنید Implement end conditions

6. آن را موبایل کنید! 6. Make It Mobile!

• وقایع لمسی و ماوس را پشتیبانی کنید Support touch and mouse events

• شنوندگان رویداد را برای رویدادهای ماوس و لمس اضافه کنید Add event listeners for mouse and touch events

• موس و رویدادهای لمسی رویداد را به اسکریپت اضافه کنید Add mouse and touch event handlers to the script

• بهبود بازی: تشخیص بهتر برخورد Improving game play: Better collision detection

• پیاده سازی بهبود یافته برخورد Implement improved collision detection

• تست در شبیه ساز اندروید و شبیه ساز iOS Testing in the Android emulator and iOS simulator

7. کنترل بازی 7. Game Controls

• با یک صفحه تنظیمات کنترل خاصی را به کاربر بدهید Give the user some control with a settings screen

• اضافه کردن بازی کنترل اشیاء DOM Add the game controls DOM objects

• شنوندگان رویداد و دستگیرندگان را برای کنترل بازی اضافه کنید Add event listeners and handlers for the game controls

• مشکل بازی را تغییر دهید Change the difficulty of the game

• یک بازی جدید را شروع کنید Start a new game

8. اضافه کردن برخی از سر و صدا! 8. Add Some Noise!

• عناصر HTML را برای صدا اضافه کنید Add the HTML elements for sound

• اشیاء DOM را برای صدا اولیه تنظیم کنید Initialize the DOM objects for sound

• صداها را از طریق دستگاه تلفن همراه پخش کنید Play sounds on a mobile device

• جلوه های صوتی را تغییر دهید Toggle sound effects

• موسیقی پس زمینه را تغییر دهید Toggle background music

نتیجه Conclusion

• مرورگر و پشتیبانی دستگاه Browser and device support

• گسترش Deployment

• بهینه سازی ها را مرور کنید Review optimizations

• مراحل بعدی Next steps