یک انیمیشن ساده با استفاده از JavaScript و HTML5 Canvas بسازید که یک توپ رنگی بهصورت مداوم از چپ به راست حرکت کرده و هنگام رسیدن به لبهٔ بوم برگردد.
11.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 01:44 0.0
برای حل این مسئله یک عنصر در HTML قرار دهید و با API کانواس در JavaScript توپ را رسم کنید؛ موقعیت افقی توپ را در هر فریم براساس سرعتش بهروز کنید و برای پاک کردن فریم قبلی از clearRect استفاده کنید. جهت گردش قلم را هنگام برخورد به لبهها با معکوس کردن مقدار سرعت (velocity *= -1) تغییر دهید و از requestAnimationFrame برای اجرای حلقهٔ انیمیشن استفاده کنید تا انیمیشن روان و هماهنگ با فریم ریت مرورگر باشد. (نکات مفید: از متغیر سرعت ثابت یا محاسبهٔ delta time برای ثبات سرعت در دستگاههای مختلف استفاده کنید و از setInterval بهصورت پیشفرض خودداری کنید.)
توسط پژوهشگر در 198 روز قبل ساعت 01:44 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای انیمیشن توپ روی Canvas حتماً از requestAnimationFrame استفاده کنید و حرکت را با محاسبه delta time (فاصلهٔ زمانی بین فریمها) ضرب در سرعت ثابت انجام دهید تا در دستگاههای مختلف سرعت ثابت بماند. هنگام برخورد به لبهها سرعت را معکوس کنید و موقعیت توپ را طوری تنظیم کنید که از لبه خارج نشود (مثلاً بعد از برخورد موقعیت را کلمپ کنید) تا توپ درون بوم گیر نکند. برای نمایش واضحتر روی نمایشگرهای با چگالی بالا از devicePixelRatio استفاده کرده و کانواس را مطابق آن مقیاس دهید. از clearRect برای پاکسازی فریم قبلی بهره ببرید و از setInterval بهطور پیشفرض خودداری کنید.
گزارش