CSS animation and interaction delay.

Tap tap tapping.

A blog written in 3rd person. For no reason.

 

For this game Ben Evans wanted some very simple controls. Basically a single tap anywhere to control it. And you can't get much simpler than that!

From a coding perspective, this will involve putting a stack of labels as invisible layers on top of everything. The label will be linked to a checkbox or radio button, which will control what is displayed.

So: Display a label > user taps label > label's 'for' attribute is connected with ID of input > if input is checked then animate the snake the appropriate way.

<label for="right-start"></label>
<input id="right-start" name="start" type="radio" />

#right-start:checked ~ .start-right {
  display: block;
}

 

So that's all good. The next problem Ben needed to solve is how to bring these labels in fast. He wanted them to animate in sequence; up, right, down, left. On a timer. So that when the user taps the screen, it could go in the direction currently displaying, as it cycles through the loop.

The trouble is, it seems, is that there is a delay in when something is shown and when it is clickable.

Ben had previously built a table tennis game, using a similar timing device and this seemed to work fine. But he didn't notice the lag. Possible because it wasn't super fast.

 

But this time Ben requires it to happen faster, and the lag seems very noticeable. Sad Face ☹

He has built a simple example of it on CodePen for you to see for yourself. If you tap 'Edit on CodePen' then you can adjust the timings:

 

It actually seems very usable on a two second repeat. If you change $t to one then it only responds on double taps. But this is based on Ben's laptop. It probably depends on the GPU and CPU speed. And probably also on how complex the future CSS will be.

Ben would be interested to find out how it behaves for you. Please leave a comment on whether the appropriate radio is checked when you tap the screen. He would be very much appreciative 🙏