A game made with CSS/HTML only | Hacker News Reader

A game made with CSS/HTML only

victordarras.fr

256 pointswanda68 comments

I'm not OP but the creator of this "game". Nice to see my experimentation here !

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 !

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?

For sure, I already try by avoiding Javascript for simple interaction and UI behaviour in my work. I hope that CSS variables will be fun to play with.

This is exactly why I liked your creation.

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

Your game is too hard, please make it slower.

Personally I found it too easy.

Does the game become harder on a 4K monitor?

Opened the comments with the same sentiment, +1

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 :(

Do you think it would be possible to use svg streaming[1, spec][2, an example] to make the game continue on?

[1] http://dev.w3.org/SVG/modules/streaming/ [2] http://snipplr.com/view/64802/simple-svg-streaming-server/

Yeah probably and that would be awesome ! But it needs JS... well for another experiment !

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.

It's really awesome. The motion is so smooth. I don't know about IE or Safari, but it runs great on Chrome.

I would like see more work from you. Cheers!

I suppose I game is to keep my cursor in the dark area as the game proceeds.

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 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.

If you press a key on your keyboard the mouse cursor goes away and you win!

Got it, it's easy to cheat but the challenge is more in the development. Nice hack ;)

Do you know if this intentional behaviour in Chrome? it can be annoying for some types of interaction, any good workarounds?

Here is a part of answer http://stackoverflow.com/questions/23445468/hover-state-is-m...

Also seems to be the case in ffx ...

If you keep your left mouse button pressed you can cheat too.

This totally reminds me of a game I built a long long time ago using only CSS: http://ryan-kahn.com/static/onlyCSS/

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.

Haha, it tickled me that using php in the process apparently warrants an explanation nowadays 8)

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.

I played it straight a healthy amount of time. Now I am high enough because of the road motion, I can see the webpage moving upwards.

This is an amazing game. Really nicely build. Is it open source?

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.

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!

Doesn't work on Safari (OS X)

Here's the dude's source: http://codepen.io/victordarras/pen/xZOqoE

Not nearly as cool as OP's post, but I once created a 'game' with only CSS and HTML as well:

Street fighter rock paper scissors

http://codepen.io/Andygmb/full/EVbRqP/

That is ridiculous.

In a great way.

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.

Could also do a choose your own adventure type game using HTML on its own.

Somewhat related was a challenge I set myself to create a star chart using only html and css:

http://lee-phillips.org/skymap/

I just lose, I can't get my cursor to the white box without losing.

(Chromium, Ubuntu)

Just drag it to the white box. You'll lose while you do so, but bringing your cursor to the box resets it.

I was confused too, but discovered that on OSX, the game never starts in Chrome or Safari, but it works in Firefox.

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.

Works for me on OS X Chrome. Move cursor to underneath the game area (you'll probably lose in the process); move upwards onto the white box.

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

This isn't true.

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.

This is interesting and creative. Good job.

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).

>I can also imagine CSS compiler targets for these types of things, if they don't exist already.

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".

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 author had said there are crossbrowser issues and adding polyfills may involve introducing JS. Hence losing the entire purpose of a CSS only game

Basically:

1. CSS transitions to slowly move the scenery

2. Hover states for the two walls (and the "game over" screen)

Actually, they're CSS animations, which is why it's able to start over instantly.

It's really hard on a track pad. I lasted 3 second on 10 attempts.

Good argument for a hardware mouse :)

Due to perspective projection, it is much easier to play staying as back as possible rather than forward!

The game becomes easier too with Ctrl + Mousewheel (because the tunnel will get bigger but not the cursor!)

So it's settled at last, CSS and HTML are programming languages. Or at least one of the two is.

Pretty cool, reminds me of CHASM: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&c...

Cool. Now I will spend the rest of my Friday and all weekend trying to get in the end. My wife will hate Victor (the dude) very soon.

Oh no, I got to the end. "Congratulations ! You win"

By your post timestamps, looks like it only took 3 minutes. Not bad!

Can't help but wonder whether or not it's gonna scare the pants off me when you get near the end.

Don't worry, I myself have made that leap and my pants are still attached to my body.

That sounds painful

Really easy to beat on mobile. Just tap the white box, then sit back and watch. :)

The ship's hitbox is the top left of it's sprite (which is above the ship). Turning off the custom cursor made it much easier.

lol, I wish every game had such a good collision detection :(

If you have a touch screen this game is really easy.

Delete both wall right and wall left elements. You will win! ;)

Right click is more elegant

COOOOOL :) LIKE!

First try! :) I like it

click and hold

Reply on news.ycombinator.com