انیمیشن CSS و تاخیر تعامل.

روی ضربه زدن ضربه بزنید.
وبلاگی که به صورت سوم شخص نوشته شده است. بدون دلیل.
برای این بازی بن ایوانز چند کنترل بسیار ساده می خواست. اساساً یک ضربه در هر جایی برای کنترل آن. و شما نمی توانید خیلی ساده تر از آن!
از منظر کدنویسی، این شامل قرار دادن دسته ای از برچسب ها به عنوان لایه های نامرئی در بالای همه چیز است. برچسب به کادر تأیید یا دکمه رادیویی پیوند داده میشود که آنچه را که نمایش داده میشود کنترل میکند.
بنابراین: نمایش یک برچسب > برچسب کاربر ضربه می زند > ویژگی ‘for’ برچسب با شناسه ورودی مرتبط است > اگر ورودی بررسی شد، مار را به روش مناسب متحرک کنید.
<label for="right-start"></label>
<input id="right-start" name="start" type="radio" />
#right-start:checked ~ .start-right {
display: block;
}
پس این همه خوب است. مشکل بعدی که بن باید حل کند این است که چگونه این برچسب ها را سریع وارد کند. او می خواست آنها را به ترتیب متحرک کنند. بالا، راست، پایین، چپ. روی یک تایمر به طوری که وقتی کاربر روی صفحه ضربه می زند، می تواند در جهتی که در حال حاضر نمایش داده می شود، در حالی که در حلقه می چرخد، برود.
مشکل این است که به نظر می رسد این است که در زمان نمایش چیزی و زمانی که قابل کلیک است تاخیر وجود دارد.
بن قبلاً یک بازی تنیس روی میز با استفاده از دستگاه زمانبندی مشابه ساخته بود و به نظر میرسید که این بازی خوب کار میکرد. اما او متوجه این تاخیر نشد. ممکن است زیرا فوق العاده سریع نبود.
اما این بار بن می خواهد که سریعتر اتفاق بیفتد و تاخیر بسیار محسوس به نظر می رسد. چهره غمگین ☹
او یک نمونه ساده از آن را روی CodePen ساخته است تا خودتان ببینید. اگر روی «ویرایش در CodePen» ضربه بزنید، میتوانید زمانبندی را تنظیم کنید:
در واقع در تکرار دو ثانیه ای بسیار قابل استفاده به نظر می رسد. اگر $t را به یک تغییر دهید، فقط با دو بار ضربه زدن پاسخ می دهد. اما این بر اساس لپ تاپ بن است. احتمالا به سرعت پردازنده گرافیکی و پردازنده بستگی دارد. و احتمالاً همچنین در مورد اینکه CSS آینده چقدر پیچیده خواهد بود.
بن علاقه مند است که بداند چگونه برای شما رفتار می کند. لطفاً نظر خود را در مورد اینکه آیا رادیو مناسب هنگام ضربه زدن روی صفحه علامت زده می شود، بگذارید. او بسیار قدردان خواهد بود 🙏