مهارت‌های لازم:

• آشنایی با JS

در این سوال قصد داریم بخشی از بازی نقطه خط را با استفاده از js و بدون استفاده از کتابخانه جانبی پیاده سازی کنیم.ظاهر کلی برنامه بدین صورت است:

پروژه اولیه

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

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

جزئیات

ظاهر این سوال به شکل کامل پیاده سازی شده است. شما باید عملکرد های زیر را با استفاده از جاوا اسکرپیت به بازی اضافه کنید:

• با کلیک کردن بر روی هر کدام از خط ها، با در نظر گرفتن نوبت بازیکن ها، رنگ خط مورد نظر به آبی یا قرمز تغییر پیدا می کند.
• وضیعت نوبت بازیکن ها را یک عنصر با شناسه 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