یک مربع در صفحه وجود دارد. می‌خواهیم با فشرده شدن کلیدهای جهت صفحه کلید (بالا، پایین، راست، چپ) مربع بر روی صفحه در همین جهت‌ها حرکت کند.

کد HTML و CSS نوشته شده است و به شما داده می‌شود. از شما می‌خواهیم عملکرد موردنظر را با JavaScript پیاده‌سازی کنید.

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است:

simple-movement
├── index.html
└── style.css

جزئیات

باید با فشرده شدن هریک از کلیدهای بالا، پایین، راست و چپ، مربع (بلوک div با شناسه square) یک پیکسل در جهت موردنظر حرکت کند.

در صورتی که هنگام فشرده شدن کلید جهت، کلید shift نیز نگه داشته شده باشد، حرکت مربع بجای یک پیکسل، باید ۱۰ پیکسل باشد. مثلاً با فشردن shift + up، مربع باید ۱۰ پیکسل به بالا حرکت کند.

می‌توانید در کنار index.html، تعدادی فایل .js (کتابخوانه‌های آماده و یا کد خودتان) قرار دهید و استفاده کنید.

نکات

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

• حرکت مربع باید بلافاصله پس از فشردن کلید به صورت کامل و لحظه‌ای انجام شود. بنابراین در صورتی که حرکت مربع کمی طول بکشد، پاسخ شما نمره نخواهد گرفت.

• همان‌طور که در فایل CSS داده شده مشاهده می‌کنید مکان اولیه‌ی مربع (200, 200) است. اما کد شما نباید به این اعداد وابسته باشد، زیرا هنگام داوری خودکار یک فایل CSS دیگر جایگزین می‌شود و مکان اولیه مربع متفاوت خواهد بود.

• توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود، پس دقت کنید که شناسه‌های موجود را تغییر ندهید.

• فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایل‌های موجود در وب (CDN ها) خودداری کنید.

• پروژه را با ساختار زیر ارسال کنید. تغییر تنها در مواردی که با * مشخص شده مجاز است و ارسال سایر فایل‌ها الزامی نیست.

[your-zip-file-name].zip
├── index.html  *
├── style.css
└── your .js files (Optional)  *