
A game made with CSS/HTML only - wanda
http://victordarras.fr/cssgame
======
victordarras
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 !

~~~
frozenport
Your game is too hard, please make it slower.

~~~
jbpetersen
Personally I found it too easy.

~~~
frozenport
Does the game become harder on a 4K monitor?

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

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

~~~
victordarras
Here is a part of answer [http://stackoverflow.com/questions/23445468/hover-
state-is-m...](http://stackoverflow.com/questions/23445468/hover-state-is-
maintained-during-a-transition-even-if-the-element-has-gone)

------
Myztiq
This totally reminds me of a game I built a long long time ago using only CSS:
[http://ryan-kahn.com/static/onlyCSS/](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.

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

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

------
michaelchum
Doesn't work on Safari (OS X)

------
wanda
Here's the dude's source:
[http://codepen.io/victordarras/pen/xZOqoE](http://codepen.io/victordarras/pen/xZOqoE)

------
andygmb
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/](http://codepen.io/Andygmb/full/EVbRqP/)

~~~
ikawe
That is ridiculous.

In a great way.

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

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

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

[http://lee-phillips.org/skymap/](http://lee-phillips.org/skymap/)

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

(Chromium, Ubuntu)

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

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

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

~~~
dahart
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

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

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

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

~~~
bl4ckdu5t
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

------
abluecloud
Basically:

1\. CSS transitions to slowly move the scenery

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

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

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

~~~
softawre
Good argument for a hardware mouse :)

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

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

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

------
HAL9OOO
Pretty cool, reminds me of CHASM:
[https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&c...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&uact=8&ved=0ahUKEwjDk-
GrnqzKAhXJKB4KHTgUDR0QjBAIJjAE&url=http%3A%2F%2Fwww.spikything.com%2Fgames%2Fchasm%2F&usg=AFQjCNERg0rJdc8i27JviuxdTkTJVkYtFw&sig2=3N7ucF1B37gK7zj0VOZdIg)

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

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

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

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

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

~~~
purplerabbit
That sounds painful

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

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

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

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

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

~~~
vinchuco
Right click is more elegant

------
thomasdd
COOOOOL :) LIKE!

------
Radle
First try! :) I like it

------
gondo
click and hold

