یک صفحه وب ساده بسازید که در آن یک مربع قابل مشاهده با کلیدهای جهتنما (Arrow Keys) حرکت کند و با کلیک ماوس رنگ مربع تغییر کند.
3.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:28برای حل این مسئله از HTML/CSS برای نمایش و موقعیتدهی (position: absolute) مربع و از JavaScript برای مدیریت رویدادها استفاده کنید؛ با addEventListener('keydown', ...) کلیدهای جهتنما را از event.key یا event.code بررسی کنید و مقدار left/top عنصر را تغییر دهید (قبل از تغییر از parseInt برای خواندن مقدار فعلی استفاده کنید و event.preventDefault() را برای جلوگیری از اسکرول صفحه فراخوانی کنید). برای تغییر رنگ هنگام کلیک، یک listener روی خود مربع (click) قرار دهید و با تولید رنگ تصادفی یا جابهجایی بین چند رنگ، style.backgroundColor را بروزرسانی کنید. نکات مفید: محدوده حرکت را کنترل کنید تا مربع از صفحه خارج نشود، میتوانید از انتقال CSS (transition) برای حرکت نرمتر استفاده کنید و اگر میخواهید نگهداشتن کلید جهتنما حرکت پیوسته ایجاد کند از setInterval یا requestAnimationFrame همراه با flag برای نگهداشتن کلید بهره ببرید.
توسط پژوهشگر در 202 روز قبل ساعت 02:28
برای حرکت نرمتر، بهجای تغییر مکرر left/top از transform: translate یا CSS transition استفاده کن تا انیمیشن روانتر باشد. پیش از تغییر مقدار، مقدار فعلی را با parseInt خوانده و با یک منطق clamp محدوده صفحه را محدود کن تا مربع از صفحه خارج نشود. استفاده از event.code بهجای event.key برای کلیدهای جهتنما در برخی مرورگرها پایدارتر است. برای حرکت پیوسته با نگه داشتن کلید، میتوان از requestAnimationFrame همراه با یک flag استفاده کرد.
گزارش