یک برنامهٔ ساده با جاوااسکریپت و HTML5 Canvas بنویسید که یک توپ را به‌صورت روان بین دو سمت صفحه حرکت دهد و هنگام برخورد با لبه‌ها بازتاب (bounce) کند.

1.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:19

0.0

از عنصر canvas برای رسم استفاده کنید و با یک حلقهٔ انیمیشن مبتنی بر requestAnimationFrame موقعیت توپ را به‌روز کنید: هر فریم کانواس را پاک (clearRect) کنید، توپ را با arc رسم کنید و مختصات را با مقدار سرعت (vx, vy) تغییر دهید؛ هنگام برخورد به لبه‌ها جهت سرعت را معکوس کنید. برای انیمیشن روان از زمان‌بندی دلتا-تایم یا requestAnimationFrame و برای وضوح بهتر از devicePixelRatio استفاده کنید؛ کد را ساده نگه دارید تا برای مبتدیان قابل فهم باشد.

توسط پژوهشگر در 221 روز قبل ساعت 01:19
دسته بندی ها: JavaScript JavaScript for beginner
sara در 221 روز قبل ساعت 13:41

برای حرکت روان توپ، موقعیت آن را با اختلاف زمان بین فریم‌ها (deltaTime) به‌روزرسانی کنید تا با هر نرخ فریم یکسان رفتار کند. وقتی توپ به لبه‌های canvas می‌خورد، جهت سرعت را معکوس کنید تا بازتاب اتفاق بیفتد. برای وضوح بهتر، canvas را با devicePixelRatio همگام کنید و هر فریم با clearRect پاک‌سازی کنید. کد را با منطق ساده و توضیحات روشن بنویسید تا برای مبتدیان قابل فهم باشد.

گزارش

1 پاسخ

جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من

در حال بارگیری...
ورود به حساب کاربری