JavaScript

• DOM Manipulation
• Event Handling
• Web Animation API

با گذر زمان و رشد پمبه در شرکت، مدیر پمبه می‌خواهد به او ترفیع بدهد؛ بنابراین از این به‌بعد، اکثر کارهایی که از پمبه خواسته می‌شود، به طور مستقیم مربوط به بازی‌سازی است. به‌عنوان اولین کاری که پمبه باید انجام دهد، از او خواسته شده است تا قسمتی از یک بازی تیراندازی را پیاده‌سازی نماید.

توضیحات سوال

می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، این فیلم را مشاهده کنید.

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

initial-project-07.zip
├── illustrations
│   ├── bullet.svg
│   ├── crosshair.svg
│   └── pistol.svg
├── dynamic.js
├── index.html
└── static.css

خواسته‌های مسئله

• با جا‌به‌جایی ماوس، crosshair باید با استفاده از متغیرهایی که داخل static.css وجود دارند، جا‌به‌جا شود
• همواره زاویۀ pistol باید به گونه‌ای باشد که مگسک آن به وسط crosshair اشاره کند
• چرخش pistol باید نسبت به وسط آن صورت بگیرد
• در صورتی که فاصلۀ ماوس از وسط صفحه کمتر از 240px باشد، باید به pistol کلاس disabled داده شود و کاربر نباید بتواند شلیک کند
• در صورتی که کاربر بر روی صفحه کلیک کند، باید یک img با کلاس bullet و src مساوی‌ با عبارت زیر به body اضافه شود

./illustrations/bullet.svg

• در لحظۀ ساخت گلوله، موقعیت گوشۀ بالا-چپ آن باید با توجه به spawn-point در نظر گرفته شود
• گلوله باید با توجه به موقعیت ماوس، مسیر 1000px را در یک ثانیه طی نماید و پس از آن از صفحه حذف شود

نکات

• شما تنها مجاز به تغییر در فایل dynamic.js هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
• توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
• برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
└── dynamic.js