Sorry for that so bad crossbrowsing, clip-path property is not easy to use. Safari and IE won't work apparently.
Ask me anything about it, I'll take time to answer !
IIRC the gist of it was:
1) The page was never done loading
2) Each element (slot for a piece) was tied to a unique piece of css (for the hover state? active state?)
3) When the element of was clicked it would trigger a resource request from the server
4) The server used that as a cue to spit out some more html onto the ever loading page.
Using an ordinary mouse with X11's standard acceleration settings I don't have enough precision and keep hitting the walls - it's so bad I can't get past the first 3 or 4 seconds :(
But after the start of the game, if I don't move my cursor at all, I win every time (even cursor goes to the lighter area in between).
This exploration of logic gates in CSS is a really great example too:
I would like see more work from you. Cheers!
Kudos! I love it.
(edit) The game's end screen no longer works, and I built a level generator for it in php (remember, years ago) and am no longer using that host.
This is an amazing game. Really nicely build. Is it open source?
It might be a useful starting point to use this: http://ryan-kahn.com/static/onlyCSS/testRoad.html
That's what I used to play around with the styles for the cars themselves. Feel free to take it wherever you want and let me know what you end up with!
Street fighter rock paper scissors
In a great way.
In Chrome & Safari, even if you reload with the mouse over the white box, any mouse or keyboard event at all results in You Lose.
In Firefox, this is a very cool exercise!
It got a lot easier to win as soon as I stopped trying to only move left/right, and started moving up/down too.
Then I started typing this comment to wonder out loud what might be different, and in the process checked my version of Chrome. As soon as I did, Chrome started updating itself, and after a re-launch, the game works. Nice!
Chrome 46.0.2490.86 (64-bit) - no worky
Chrome 47.0.2526.111 (64-bit) - happy fun times
I guess this game is on the bleeding edge of feature support. :P
Actually I can trick the game by holding down click, moving my mouse to the box, and letting go--but at that point the game doesn't start. No winning or losing, either one.
I can also imagine CSS compiler targets for these types of things, if they don't exist already.
Something to think about in the coming years (or now).
This is a bit of a stretch. CSS is not turing complete in the traditional sense and is only suitable for a narrow range of "programs".
1. CSS transitions to slowly move the scenery
2. Hover states for the two walls (and the "game over" screen)
We detached this subthread from https://news.ycombinator.com/item?id=10913899 and marked it off-topic.
>HN is slowly becoming Reddit.