Is collision detection with CSS possible?

CSS Snake.

A blog written in 3rd person. Well, why not...

Ben's aim is to make some form of the Nokia classic: Snake, using only CSS. He's not sure if it's possible but join him on his journey to finding out...

Ben has previously built things with movement grids, the peak of that being this 3D maze game (which unfortunately doesn't like Safari, or any iOS browser, because they are all Safari really):

https://codepen.io/ivorjetski/pen/poQpveN

There is a video with the creation process here:

https://www.youtube.com/watch?v=Z0VHM4KcMFQ

Evans has started working on Snake... So far he's spent far too long drawing the background with CSS:

He thought it would be fun to recreate the old Windows 10 default lockscreen in CSS.

He tried to keep the background down to a fewer lines of CSS as possible. It's about 1000. Which isn't bad considering the crazy amount of texture that he needed to do for the rocks.

Ben realised he could do the texture with text! 😮 Surely this is where the word TEXTure comes from, he thought to himself, not silly enough to write it down in a blog 🙃

It's pseudo classes filled with random ascii shapes in the content. Like this:

    
            &:after, &:before {
            content: '●◖●  ●◖●  .● ●  ◖●◖●  ●  ◖-●  ●◖◖● ●◖ ●.●  ●◖●◖● ●●  ●.●◖●●';
            }
        

He's also designed a super simple movement grid for it... And then converted it into this pointless chess like thing, so it would make sense when sharing it on CodePen:

https://codepen.io/ivorjetski/pen/LYawGQZ

This does everything Ben requires for a good basis to build from, and he has managed to get the code down to about 100 lines (not including his CSS drawn initials). He is pretty pleased with how this works. The directional buttons are actually all the same, but rotate themselves, putting themselves in the required position for left, right, up and down. Depending on what ID is shown in relation to what grid square the user is in. There is also a basic boundary detection in place, that Ben would need for the Snake game to work.