6 ms·
CSS Panic: Game written in HTML/CSS - no Javascript
- deleted 15y ago[deleted]
- vinsan 15y agoAs soon as I click play/replay, I get the message Game Over :-) I am using FF4 on Mac
- maeon3 15y agoIt doesn't work on IE9 either. Thus we see the flaw in designing programs in html/CSS there is no guarantee that what you wrote is what will happen/appear on a browser. Even worse than an untyped language. A programming language that has the programmer "suggest" commands rather than demand them.
- billybob 15y agoYes. Welcome to web development. :) Snarkiness aside, I feel the pain behind your complaint. That's one reason I think CSS can be harder than actual programming: you have all these unknowns and contingencies to manage.
- deleted 15y ago[deleted]
- deleted 15y ago[deleted]
- Wickk 15y agoWorks fine in Chrome 11 under linux
- deleted 15y ago[deleted]
- billybob 15y agoThere are more than 6000 lines of CSS behind this, but only the first 500 or so are actual CSS; the rest appears to be images encoded into text. At any rate, this is very impressive and interesting. I would have sworn it was a Flash game if I didn't know better.
- ck2 15y agoVery clever work. But we're back to the days of "works best in so-and-so browser". (no FF3/4 or IE9 or Opera11 support)
- daleharvey 15y agoThey never went away, a pure css game is very obviously not going to work in ie6, there is nothing for it to degrade to, some people push the standards (mostly fun experiments) and some people have to be very careful about browser support (the amazons of the world)
- PetrolMan 15y agoSure, for experiments like this that are playing with vendor specific properties. This is an outlier. The great thing now is, for most regular old websites, I can just write the CSS and expect it to work reasonably well in any of the latest generation browsers.
- program 15y agoWorks well in webkit-based browser (Chrome 12 and Safari 5 tested). This is due to the extensive usage of -webkit-animation-, -webkit-pointer- and -webkit-transform-. The crocodiles are radio buttons and animations are controlled via the :checked pseudo-selector, very clever.
- protez 15y agoHow can one implement game logic and AI in CSS? I thought CSS can do nothing much other than styling except mouse hover property which gives some interactive elements without JS.
- rsoto 15y agoIt has no AI, the croc's movement is scripted. CSS can do a lot more than changing style on mouse hover. Check out the pseudo-elements, the transitions, the :target selector.
- deleted 15y ago[deleted]
- sambeau 15y agoVery clever. How is the randomness produced?
- j79 15y agoThere isn't any randomness involved. Everything is defined to slide in/out at specific intervals. Once you click an alligator (either with or without sunglasses), that alligator is hidden for the rest of the game. The other alligator continues on sliding in/out at the specified duration for each cycle (there's about three cycles for the game...) until you click it as well. However, the game does have a feel of randomness do the the different speeds of sliding and the multiple instances of an alligator sliding in/out during a cycle. It's very nifty.