This is cool, but since hover states don't update until mouse move in chrome, it's easy to cheat. Move your mouse to the start, and then don't touch it until you win.
Definitely tried that combo, and it definitely didn't work for me. Tried again just to be sure.
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.
When native CSS variables become possible in a future planned release, do you intend to do anything similar to see how far non-javascript web apps / games can go?
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 :(
It might not actually! I saw a post here on hn recently where somebody made a version of connect 4 that didn't need javascript OR page reloads.
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.
On Windows 8/Chrome, the car controlled by the player can get outside the browser window and overlap the taskbar at the bottom, which is absolutely mind-boggling.
Ha! That's the only image I used on the page. I changed the mouse pointer to be the image of the car. I'm really surprised you can still change the cursor to an image.
Ha, kinda? It's all in the view/source. Feel free to do anything you want w/ it. If you want me to I might be able to track down the original php script and give you a link.
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!
I finally won after about 12 tries (and not cheating). Just the other day my daughter was asking if video games are ever made using HTML and I said yes with Javascript. Well now I have an example that doesn't even have javascript. Pretty cool.
For a second I thought this was a joke and the game was to figure out how to get the cursor on the white dot (ex. impossible) but its just this not working on Safari.
The first thing that comes to mind for me is licensing. This is software. Normally when we think about software on the web, we think about JavaScript---users will disable JavaScript or use LibreJS or something along those lines if they wish to avoid downloading these programs, or avoid using nonfree software.
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).
76 comments
[ 2.3 ms ] story [ 139 ms ] thread1. CSS transitions to slowly move the scenery
2. Hover states for the two walls (and the "game over" screen)
(Chromium, Ubuntu)
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.
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 !
Sure, pushing the boundaries of CSS is cool, but the message is what really matters: reserve the JavaScript for applications.
This exploration of logic gates in CSS is a really great example too:
http://silon.slaks.net
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 :(
[1] http://dev.w3.org/SVG/modules/streaming/ [2] http://snipplr.com/view/64802/simple-svg-streaming-server/
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.
I would like see more work from you. Cheers!
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).
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!
http://lee-phillips.org/skymap/
The first thing that comes to mind for me is licensing. This is software. Normally when we think about software on the web, we think about JavaScript---users will disable JavaScript or use LibreJS or something along those lines if they wish to avoid downloading these programs, or avoid using nonfree software.
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".
Street fighter rock paper scissors
http://codepen.io/Andygmb/full/EVbRqP/
In a great way.