یک صفحه وب بسازید که یک مربع قابل مشاهده داشته باشد و با فشردن کلیدهای جهتدار (Arrow keys) مربع درون یک کادر جابهجا شود و با کلیک ماوس روی کادر مربع به محل کلیک منتقل شود.
3.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:55برای حل این مسئله از HTML/CSS برای ساختار و نما و از JavaScript برای ثبت رویدادها استفاده کنید: یک کانتینر با position: relative و یک مربع با position: absolute بسازید، سپس با addEventListener('keydown', ...) برای کلیدهای ArrowLeft/ArrowRight/ArrowUp/ArrowDown موقعیت مربع را با تغییر style.left و style.top بهروزرسانی کنید (یا از transform: translate استفاده کنید). برای کلیک ماوس از addEventListener('click', ...) روی کانتینر استفاده کنید و با event.clientX و event.clientY یا محاسبه مختصات نسبی، مربع را به نقطه کلیک منتقل کنید. نکات: برای جلوگیری از اسکرول شدن صفحه هنگام فشردن کلیدهای جهتدار از event.preventDefault() استفاده کنید، موقعیتها را داخل مرز کانتینر محدود کنید و برای حرکت روانتر میتوانید با نگهداشتن کلید از flag ها یا requestAnimationFrame بهره ببرید.
توسط پژوهشگر در 220 روز قبل ساعت 01:55
نکتهای کوتاه: برای دریافت رویدادهای کلید جهتدار کانتینر باید فوکوسپذیر باشد (مثلاً tabindex="0") تا با Arrow keys حرکت کند و از اسکرول صفحه جلوگیری شود. همچنین برای کلیک روی کانتینر، محاسبه مختصات نسبی با offsetX/offsetY یا نسبتها به کانتینر انجام شود تا مربع دقیقاً به نقطه کلیک منتقل شود. حرکت روانتر را میتوان با استفاده از requestAnimationFrame و یک پرچم (flag) نگهداشت کلید پیادهسازی کرد تا فریمهای پیاپی بهروزرسانی شوند و موقعیت داخل مرز کانتینر محدود بماند. در نهایت نکته دسترسی را فراموش نکنید و وجود کلیدهای WASD را هم پشتیبانی کنید تا کاربر با گزینههای مختلف بتواند مربع را هدایت کند.
گزارش