CSS Snake.

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

 

London based CSS Artist, Ben Evans, has had some lofty ideas in the past and this one follows that trend... His current aim is to make, or even remake, some form of the Nokia classic: Snake. Using only CSS. He's not currently sure if this is possible but he would love you to join him on his journey to finding out...
 

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

 

Like most of Ben's CodePen's, there is also a video detailing the creation process on his YouTube Channel. This one can be found here:

 

Ben, also known as ivorjetski, has already set to work on Snake. So far he's spent far too long drawing the background entirely with CSS:

 

He thought it would be fun to recreate the old Windows 10 default lockscreen in CSS. He was probably wrong about this.

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 create the texture using text! 😮 Surely this is where the word TEXTure comes from, he thought to himself, not silly enough to write it in a blog. Little did he know his thoughts could be heard by the alter-ego journalist.

Ben exclaimed: "It's pseudo classes, with the content declaration filled with random ascii shapes. Like this:"

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

 

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

 

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.

 

Stay tuned for more...