با استفاده از HTML Canvas و JavaScript یک انیمیشن ساده بسازید که یک توپ رنگی داخل صفحه حرکت کند و هنگام برخورد با دیوارهها بازتاب (bounce) داشته باشد.
1.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:23 0.0
برای حل این تمرین از عنصر canvas در HTML و رابط 2D context استفاده کنید؛ با requestAnimationFrame حلقهٔ انیمیشن بسازید، در هر فریم با clearRect صفحه را پاک کرده و با arc توپ را رسم کنید، سپس موقعیت توپ را با سرعت (velocity) بهروزرسانی کنید و هنگام برخورد به لبههای canvas جهت سرعت را معکوس کنید تا بازتاب شبیهسازی شود. نکات و ترفندها: اندازهٔ canvas را تنظیم کنید و برای سرعت ثابت از delta time استفاده کنید، از window.devicePixelRatio برای وضوح بهتر بهره ببرید، و برای جلوگیری از لرزش موقعیت و برخورد از بررسی مرکز توپ نسبت به مرزها با در نظر گرفتن شعاع استفاده کنید.
توسط پژوهشگر در 221 روز قبل ساعت 01:23 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکته: برای جلوگیری از لرزش موقعیت، DeltaTime را محدود کنید و موقعیت توپ را با ضرب سرعت در deltaTime بهروزرسانی کنید. همچنین از devicePixelRatio استفاده کنید تا وضوح canvas در دستگاههای مختلف حفظ شود و اندازهٔ canvas بهدرستی تنظیم گردد. هنگام برخورد با دیوارهها، موقعیت مرکز توپ را نسبت به شعاع آن بررسی کنید تا از عبور توپ از مرز جلوگیری و بازتاب بهدرستی انجام شود. با این کار فریمها همواره صاف و بازتابها طبیعی خواهند بود.
گزارش