**JavaScript** - DOM Manipulation - Event Handling - Web Animation API --- با گذر زمان و رشد پمبه در شرکت، مدیر پمبه می‌خواهد به او ترفیع بدهد؛ بنابراین از این به‌بعد، اکثر کارهایی که از پمبه خواسته می‌شود، به طور مستقیم مربوط به بازی‌سازی است. به‌عنوان اولین کاری که پمبه باید انجام دهد، از او خواسته شده است تا قسمتی از یک بازی تیراندازی را پیاده‌سازی نماید. ## توضیحات سوال <details class="green"> <summary>تصویر خروجی نمونه</summary> ![خروجی نمونه](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-06.png) </details> می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، [این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-06.mp4) را مشاهده کنید. ## پروژه اولیه پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/140013) دانلود کنید. <details class="blue"> <summary>ساختار فایل‌ها</summary> ``` initial-project-07.zip ├── illustrations │ ├── bullet.svg │ ├── crosshair.svg │ └── pistol.svg ├── dynamic.js ├── index.html └── static.css ``` </details> <details class="pink"> <summary>راه‌اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> ## خواسته‌های مسئله - با جا‌به‌جایی ماوس، `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 ```

Gunslinger

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

راه‌اندازی پروژه

ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
سپس فایل index.html را در مرورگر خود باز کنید.

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

با جا‌به‌جایی ماوس، crosshair باید با استفاده از متغیرهایی که داخل static.css وجود دارند، جا‌به‌جا شود
همواره زاویۀ pistol باید به گونه‌ای باشد که مگسک آن به وسط crosshair اشاره کند
چرخش pistol باید نسبت به وسط آن صورت بگیرد
در صورتی که فاصلۀ ماوس از وسط صفحه کمتر از 240px باشد، باید به pistol کلاس disabled داده شود و کاربر نباید بتواند شلیک کند
در صورتی که کاربر بر روی صفحه کلیک کند، باید یک img با کلاس bullet و src مساوی‌ با عبارت زیر به body اضافه شود
```
./illustrations/bullet.svg
```
Plain text
در لحظۀ ساخت گلوله، موقعیت گوشۀ بالا-چپ آن باید با توجه به spawn-point در نظر گرفته شود
گلوله باید با توجه به موقعیت ماوس، مسیر 1000px را در یک ثانیه طی نماید و پس از آن از صفحه حذف شود

نکات🔗

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

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