9 ms·
A game made with CSS/HTML only
- wanda 11y agoHere's the dude's source: http://codepen.io/victordarras/pen/xZOqoE http://codepen.io/victordarras/pen/xZOqoE
- grimmdude 11y agoNice, very concise.
- colept 11y agoCan't help but wonder whether or not it's gonna scare the pants off me when you get near the end.
- Bjorkbat 11y agoDon't worry, I myself have made that leap and my pants are still attached to my body.
- purplerabbit 11y agoThat sounds painful
- abluecloud 11y agoBasically: 1. CSS transitions to slowly move the scenery 2. Hover states for the two walls (and the "game over" screen)
- mistercow 11y agoActually, they're CSS animations, which is why it's able to start over instantly.
- deleted 11y ago[deleted]
- michaelchum 11y agoDoesn't work on Safari (OS X)
- mistercow 11y agoThis 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.
- kingkool68 11y agoIf you press a key on your keyboard the mouse cursor goes away and you win!
- victordarras 11y agoGot it, it's easy to cheat but the challenge is more in the development. Nice hack ;)
- aubergene 11y agoDo you know if this intentional behaviour in Chrome? it can be annoying for some types of interaction, any good workarounds?
- victordarras 11y agoHere is a part of answer http://stackoverflow.com/questions/23445468/hover-state-is-maintained-during-a-transition-even-if-the-element-has-gone http://stackoverflow.com/questions/23445468/hover-state-is-m...
- jisaacstone 11y agoAlso seems to be the case in ffx ...
- exprI 11y agoffx is a name of one of my computers, but indeed, it seems to be the case for my Firefox as well.
- Herrera 11y agoIf you keep your left mouse button pressed you can cheat too.
- HAL9OOO 11y agoPretty cool, reminds me of CHASM: 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 https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&c...
- mod 11y agoI just lose, I can't get my cursor to the white box without losing. (Chromium, Ubuntu)
- morgante 11y agoJust drag it to the white box. You'll lose while you do so, but bringing your cursor to the box resets it.
- dahart 11y agoI 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 11y agoWorks 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 11y agoDefinitely 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
- mod 11y agoThis 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.
- ebarock 11y agoCool. 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.
- k__ 11y agolol, I wish every game had such a good collision detection :(
- victordarras 11y agoI'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 !
- andrewclunn 11y agoWhen 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?
- victordarras 11y agoFor 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.
- wanda 11y agoThis 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 http://silon.slaks.net
- frozenport 11y agoYour game is too hard, please make it slower.
- jbpetersen 11y agoPersonally I found it too easy.
- frozenport 11y agoDoes the game become harder on a 4K monitor?
- matthuggins 11y agoReally easy to beat on mobile. Just tap the white box, then sit back and watch. :)
- Radle 11y agoFirst try! :) I like it
- thomasdd 11y agoCOOOOOL :) LIKE!
- Myztiq 11y agoThis 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.
- quakenul 11y agoHaha, it tickled me that using php in the process apparently warrants an explanation nowadays 8)
- rzzzt 11y agoOn 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 11y agoHa! 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.
- nitin_flanker 11y agoI 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?
- Myztiq 11y agoHa, 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 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!
- kkoomi 11y agoDue to perspective projection, it is much easier to play staying as back as possible rather than forward!
- ju-st 11y agoThe game becomes easier too with Ctrl + Mousewheel (because the tunnel will get bigger but not the cursor!)
- deleted 11y ago[deleted]
- graniter 11y agoI 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 11y agoCould also do a choose your own adventure type game using HTML on its own.
- leephillips 11y agoSomewhat 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/
- FreedomToCreate 11y agoFor 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 11y agoThe author had said there are crossbrowser issues and adding polyfills may involve introducing JS. Hence losing the entire purpose of a CSS only game
- mikegerwitz 11y agoThis 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 11y ago>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".
- bjd2385 11y agoIf you have a touch screen this game is really easy.
- sanoy 11y agoDelete both wall right and wall left elements. You will win! ;)
- vinchuco 11y agoRight click is more elegant
- jkereako 11y agoIt's really hard on a track pad. I lasted 3 second on 10 attempts.
- softawre 11y agoGood argument for a hardware mouse :)
- andygmb 11y agoNot 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 11y agoThat is ridiculous. In a great way.
- elf25 11y agoSafari 9.0.2, OS X 10.11.2 I just lose w/o starting. Challenging game in chrome however! Nice!!
- etep 11y agoSo it's settled at last, CSS and HTML are programming languages. Or at least one of the two is.
- gondo 11y agoclick and hold
- totalizator 11y agoEveryone enjoying this (as a gameplay), should try Feel-A-Maze http://store.steampowered.com/app/333870 http://store.steampowered.com/app/333870. It's a blast!
- such_a_casual 11y agocasuals amirite
- grardb 11y agoUsername created 73 days ago. Checks out. >HN is slowly becoming Reddit.
- such_a_casual 11y ago> references reddit c4su41 c0nf1rm3d
- dang 11y agoPlease stop posting unsubstantive comments here. We detached this subthread from https://news.ycombinator.com/item?id=10913899 https://news.ycombinator.com/item?id=10913899 and marked it off-topic.
- Zren 11y agoThe 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.