یک مربع در صفحه وجود دارد. می‌خواهیم با فشرده شدن کلیدهای جهت صفحه کلید (بالا، پایین، راست، چپ) مربع بر روی صفحه در همین جهت‌ها حرکت کند.  کد HTML و CSS نوشته شده است و به شما داده می‌شود. از شما می‌خواهیم عملکرد موردنظر را با JavaScript پیاده‌سازی کنید. # فایل‌های اولیه فایل‌های اولیه را از [اینجا](http://bayanbox.ir/download/8820622022963978567/movement-initial.zip) دانلود کنید. ساختار این فایل‌ها به شرح زیر است: ``` initial ├── index.html └── style.css ``` # جزئیات باید با فشرده شدن هریک از کلیدهای بالا، پایین، راست و چپ، مربع (بلوک div با شناسه `square`) یک پیکسل در جهت موردنظر حرکت کند. در صورتی که هنگام فشرده شدن کلید جهت، کلید shift نیز نگه داشته شده باشد، حرکت مربع بجای یک پیکسل، باید ۱۰ پیکسل باشد. مثلاً با فشردن `shift + up`، مربع باید ۱۰ پیکسل به بالا حرکت کند. می‌توانید در کنار `index.html`، تعدادی فایل `.js` (کتابخوانه‌های آماده و یا کد خودتان) قرار دهید و استفاده کنید. # نکات - کافیست با هر بار زدن کلید، یک بار حرکت موردنظر انجام شود. نیازی نیست تا زمانی که کلید پایین است، مربع به حرکت ادامه دهد. - حرکت مربع باید بلافاصله پس از فشردن کلید به صورت کامل و سریع انجام شود. - همان‌طور که در فایل CSS داده شده مشاهده می‌کنید مکان اولیه‌ی مربع `(200, 200)` است. اما کد شما نباید به این موقعیت وابسته باشد، زیرا هنگام داوری خودکار یک فایل CSS دیگر جایگزین می‌شود و مکان اولیه مربع متفاوت خواهد بود. - توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود، پس دقت کنید که شناسه‌های موجود را تغییر ندهید. - ساختار فایل ارسالی باید دقیقاً مطابق زیر باشد. در این غیر این صورت، کد شما قابل دسترسی برای داوری آنلاین نخواهد بود. ``` [your-zip-file-name].zip ├── index.html ├── [file-1].js (Optional) ├── [file-2].js (Optional) │ ... └── [file-n].js (Optional) ```

حل سؤال در بانک سؤالات