Checkbox and radio button hacks are the (in)well-known trick for creating video games utilizing simply CSS. But it surely seems that different components based mostly on person enter might be hacked and gamified. There are very cool examples of builders getting inventive with CSS video games based mostly on the :hover pseudo-class, and even different video games based mostly on the :legitimate pseudo-class.
What I’ve discovered, although, is that the :goal pseudo-class appears comparatively unexplored territory in this space of CSS hacking. It’s an underrated highly effective CSS characteristic when you concentrate on it: :goal permits us to type something based mostly on the chosen leap hyperlink, so we’ve a primitive model of client-side routing constructed into the browser! Let’s go mad scientist with it and see the place that takes us.
Unbeatable AI in CSS
Did I sort these phrases collectively? Are we going to hack CSS so exhausting that we hit the singularity? Attempt to beat the stylesheet under at Tic Tac Toe and resolve for your self.
The stylesheet will generally permit the sport to finish in a draw, so you at the least have a smidge of hope.
No want to fret! CSS hasn’t gone Skynet on us but. Like every CSS hack, the rule of thumb to find out whether or not a recreation is feasible to implement with CSS is the variety of potential recreation states. I realized that when I used to be in a position to create a 4×4 Sudoku solver however discovered a 9×9 model fairly darn close to unattainable. That’s as a result of CSS hacks come all the way down to hiding and exhibiting recreation states based mostly on selectors that reply to person enter.
Tic Tac Toe has 5,478 authorized states reachable if X strikes first and there’s a well-known algorithm that may calculate the optimum transfer for any authorized state. It stands to cause, then, that we are able to hack collectively the Tic Tac Toe recreation fully in CSS.
OK, however how?
In a method, we aren’t hacking CSS in any respect, however relatively utilizing CSS as the Lord Almighty meant: to cover, present, and animate stuff. The “intelligence” is how the HTML is generated. It’s like a “select your personal journey” e book of each potential state within the Tic Tac Toe multiverse with the empty squares linked to the optimum subsequent transfer for the pc.
We generate this utilizing a mutant model of the minimax algorithm carried out in Ruby. And do you know that since CodePen helps HAML (which helps Ruby blocks), we are able to use it secretly as a Ruby playground? Now you do.
Every state our HAML generates appears like this in HTML:
<div class="b" id="--OOX----">
<svg class="o s">
<circle></circle>
</svg>
<a category="s" href="#OXOOX----">
<div></div>
</a>
<svg class="o s">
<circle class="c"></circle>
</svg>
<svg class="o s">
<circle class="c"></circle>
</svg>
<div class="x"></div>
<a category="s" href="#O-OOXX---">
<div></div>
</a>
<a category="s" href="#O-OOX-X--">
<div></div>
</a>
<a category="s" href="#O-OOX--X-">
<div></div>
</a>
<a category="s" href="#O-OOX---X">
<div></div>
</a>
</div>With a sprinkling of surprisingly simple CSS, we will show solely the at the moment chosen recreation state utilizing :goal selectors. We’ll additionally add a .c class to historic laptop strikes — that method, we solely set off the handwriting animation for the laptop’s newest transfer. This provides the phantasm that we’re solely enjoying on a single gameboard when we’re, in actuality, leaping between totally different sections of the doc.
/* Recreation's dad or mum container */
.b, physique:has(:goal) #--------- {
/* Recreation states */
.s {
show: none;
}
}
/* Recreation items with :goal, components with href */
:goal, #--------- {
width: 300px;
top: 300px; /
left: calc(50vw - 150px);
high: calc(50vh - 150px);
background-image: url(/path/to/animated/grid.gif);
background-repeat: no-repeat;
background-size: 100% auto;
/* Show that recreation state and convey it to the forefront */
.s {
z-index: 1;
show: inline-block;
}
/* The participant's transfer */
.x {
z-index: 1;
show: inline-block;
background-image: url("information:picture/svg+xml [...]"); /** shortened for brevity **/
top: 100px;
width: 100px;
}
/* The browser's transfer */
circle {
animation-fill-mode: forwards;
animation-name: draw;
animation-duration: 1s;
/* Solely animate the browser's newest flip */
&.c {
animation-play-state: paused;
animation-delay: -1s;
}
}
}When a leap hyperlink is chosen by clicking an empty sq., the :goal pseudo-class shows the up to date recreation state(.s), styled in order that the pc’s precalculated response makes an animated entrance (.c).
Observe the particular case once we begin the sport: We have to show the preliminary empty grid earlier than the person selects any leap hyperlink. There’s nothing to type with :goal in the beginning, so we cover the preliminary state — with the:physique:has(:goal) #--------- selector — as soon as a leap hyperlink is chosen. Equally, for those who create your experiments utilizing :goal you’ll wish to current an preliminary view earlier than the person begins interacting along with your web page.
Wrapping up
I received’t go into “why” we’d wish to implement this in CSS as a substitute of what could be an “simpler” path with JavaScript. It’s merely enjoyable and academic to push the boundaries of CSS. We may, for instance, pull this off with the basic checkbox hack — somebody did, actually.
Is there something attention-grabbing about utilizing :goal as a substitute? I believe so as a result of:
- We are able to save video games in CSS! Bookmark the URL and are available again to it anytime within the state you left it.
- There’s a possible to make use of the browser’s Again and Ahead buttons as recreation controls. It’s potential to undo a transfer by going Again in time or replay a transfer by navigating Ahead. Think about combining
:goalwith the checkbox hack to create video games with a time-travel mechanic within the custom of Braid. - Share your recreation states. There’s the potential of Wordle-like bragging rights. For those who handle to pull off a win or a draw towards the unbeatable CSS Tic Tac Toe algorithm, you would present your achievement off to the world by sharing the URL.
- It’s fully semantic HTML. The checkbox hack requires you to cover checkboxes or radio buttons, so it will at all times be a little bit of a hack and painful horse-trading in relation to accessibility. This method arguably isn’t a hack since all we’re doing is utilizing leap hyperlinks and divs and their styling. This will likely even make it — dare I say —“simpler” to supply a extra accessible expertise. That’s to not say that is accessible proper out of the field, although.
