**مهارت‌های لازم:** - آشنایی با `JS` -------------------------------------------------- در این سوال قصد داریم بخشی از بازی نقطه خط را با استفاده از `js` و بدون استفاده از کتابخانه جانبی پیاده سازی کنیم.ظاهر کلی برنامه بدین صورت است:  # پروژه اولیه پروژه اولیه را از [این لینک](/problemset/assignments/4367/download_problem_initial_project/98447/) دانلود کنید. <details class="green"> <summary> ساختار فایل‌های این پروژه به این صورت است </summary> ``` dots-and-boxes-master ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ └── sample.spec.js │ ├── plugins │ │ └── index.js │ └── support │ ├── commands.js │ └── index.js ├── .qsampletest ├── cypress.json ├── index.html ├── index.js ├── package.json └── style.css ``` </details> <details class="brown"> <summary> راه اندازی پروژه </summary> + ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> # جزئیات ظاهر این سوال به شکل کامل پیاده سازی شده است. شما باید عملکرد های زیر را با استفاده از جاوا اسکرپیت به بازی اضافه کنید: - با کلیک کردن بر روی هر کدام از خط ها، با در نظر گرفتن نوبت بازیکن ها، رنگ خط مورد نظر به آبی یا قرمز تغییر پیدا می کند. - وضیعت نوبت بازیکن ها را یک عنصر با شناسه `game_status` نمایش دهید. - در صورت اینکه نوبت بازیکن قرمز باشد، متن مورد نظر باید _Player red's turn_ و در صورت اینکه نوبت بازیکن آبی باشد متن مورد نظر باید _Player blue's turn_ باشد. - همچنین در صورت اینکه نشانگر ماوس رو یکی از خط ها برده شود(رویداد _mouseenter_)، رنگ خط باید مطابق با نوبت بازیکن ها تغییر کند و هنگامی که نشانگر ماوس از روی خط ها به بیرون برده شود(رویداد _mouseleave_) رنگ خطوط به حالت عادی بر میگردد. توضیحات فایل _index.html_ و _style.css_ : - هر کدام از خطوط بازی به عنوان یک عنصر `div` در نظر گرفته شده اند. خطوط بازی یا _horizontal_ (افقی) هستند یا _vertical_(عمودی) هستند. برای خطوط افقی کلاس `horizontal_line` در نظر گرفته شده است و برای خطوط عمودی کلاس `vertical_line` در نظر گرفته شده است. - در فایل _style.css_ نیز استایل دهی های لازم جهت قرار گیری المان ها آورده شده است. - شما نیازی به ایجاد تغییر در فایل های بالا ندارید. # نکات - رنگ های آبی و قرمز به ترتیب `#87ceeb` و `#fa8072` هستند. - همچنین کلاس های مربوط به این رنگ ها `blue` و `red` هستند. - تغییرات را تنها در فایل `index.js` اعمال کنید. تغییرات در بقیه فایل ها نادیده گرفته می شوند. - توجه کنید که داوری خودکار بر مبنای نام کلاس های انجام می‌شود. - پروژه را با ساختار زیر ارسال کنید. ``` [your-zip-file-name].zip └── index.js ```