یک انیمیشن ساده با جاوااسکریپت بسازید که یک توپ روی بوم (canvas) از چپ به راست حرکت کرده و هنگام برخورد به لبهها برگردد.
2.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:22 0.0
برای پیادهسازی از HTML5 canvas و جاوااسکریپت استفاده کنید: یک عنصر canvas در HTML ایجاد کنید، با getContext('2d') زمینه را بگیرید، متغیرهایی برای موقعیت و سرعت توپ تعریف کنید و در حلقه انیمیشن که با window.requestAnimationFrame اجرا میشود ابتدا canvas را با clearRect پاک کنید سپس موقعیت توپ را بروزرسانی کرده و توپ را با arc() رسم کنید؛ هنگام برخورد به لبهها سرعت را معکوس کنید تا توپ بازگردد. نکات: از requestAnimationFrame برای انیمیشن صاف استفاده کنید، مقادیر سرعت و اندازه توپ را قابل تغییر نگه دارید و برای جلوگیری از پرش هنگام تغییر اندازه پنجره، اندازه canvas را متناسب بروزرسانی کنید.
توسط پژوهشگر در 221 روز قبل ساعت 01:22 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای پایداری نمایش، اندازه بوم را با devicePixelRatio همگام کنید تا توپ ترد و واضح بماند. با استفاده از deltaTime سرعت توپ را در فریمهای مختلف ثابت نگه دارید تا از پرش فریمها جلوگیری شود. برخورد با لبهها را با بررسی x - radius <= 0 یا x + radius >= width انجام داده و velocityX را معکوس کنید تا توپ به سمت دیگر برگردد. همچنین هنگام تغییر اندازه پنجره، canvas را دوباره با اندازه و نسبت ابعاد مناسب تنظیم کنید تا از پرش یا افت کیفیت جلوگیری شود.
گزارش