HTML5 game written in 0 lines of JS | Hacker News Reader

HTML5 game written in 0 lines of JS

codepen.io

418 pointsgolergka119 comments

Obligatory information:

I'm not the original author. It was posted on russian HN/Reddit clone Habrahabr: http://habrahabr.ru/post/203048/ Habrahabr featured translations of "30 LOC of javascript" topics from HN, some people continued it for a bit, and this one was created as an ironic answer to that.

It cannot be a HN clone, as HH appeared in 2006 and HN in 2007.

Thanks for the correction! But while I'm technically wrong, I hope it still describes the idea to those unfamiliar with it.

Sadly I do not speak Russian. I often wonder what great things I miss out only only speaking English.

Technically, as long as we have multiple languages with different people knowing different languages then this is a problem for everyone. There might be Russians out there wondering about the interesting things they are missing out on because they don't know English.

I for one want to watch TV programming from around the world just to experience the differences in culture and what they find humorous, sad, exciting, and so on. Sub-titles just don't always translate emotions very well.

Subtitles seem fine to me: they contain the content, and the emotion in the voices crosses linguistic boundaries.

Ah, yes, but since I'm an American the idea of learning a foreign language was not impressed on me as I was growing up. Contrast this with some Europeans I run into on my travels and they speak 2, 3, & 4 languages.

That's probably because they likely need to know those languages. At best only a percentage of Americans could find a second language, Spanish, useful in their day-to-day lives.

Here's a (partial) translation of the author's post on Habra Habr.

-----

I didn't want to take part in this week's trend on Habra: "We can write everything in 30 lines of code!" I didn't have the time to spare.

But theaqua's post [0] about writing a "Hello, World" in a single line of pure JavaScript inspired me to beat that record. I had already written a game using JavaScript, HTML, and CSS, and here it is now with a grand total of zero lines of code.

After reading theaqua's post, I couldn't sleep. I was agonized by insomnia, so I gathered myself and sat down to re-write the game. Mindful that I had to use exactly zero lines of JavaScript, I was very scared. Writing a program in 1000 lines or more is no problem. But writing zero lines of code ... that's insane. It turns your brain inside out. It changes the way you look at the web. You realize that, before, you didn't do things right.

For those of you who don't like to wait, here's a demo [1].

It's not a fake. It's a full game. Details after the cut.

...

I've been programming for a long time. And it was for just that reason that I believed that I could manage a complex task like taking a game that was originally written using JS and re-writing it with zero lines of code.

Before this project I looked down on HTML programmers†. But now I realize that they'll soon rule the world. You'll remember how there was a time when JS programmers weren't taken seriously. Do you remember those dark ages? But now take a look ... JavaScript is not just a trend. It's everywhere. In the browser, on the server, running on microcontrollers and mobile OSes. You can write operating systems in it, and games. ... And now, HTML programming is quietly creeping up on it.

One of these days writing zero lines of JS will be the norm. JS will fall out of fashion in the same way Flash did. Why write JavaScript if it's slower than an HTML program written by an HTML programmer with the aid of CSS?

Repository: https://github.com/i0z/nojsgame

-----

† — The comment thread is dominated by responses to this one: "'HTML programmer'—are you serious? :)"

0. http://habrahabr.ru/post/202736/

1. http://jsfiddle.net/0dmin/9dQx3/embedded/result/

Off topic, sorry, but Russian (and many others) to English translations sound so emotional and dramatic and captivating and inspiring.

To the point I want to learn Russian!

I have a hard time understanding how someone so familiar with HTML can claim that "HTML programming" is creeping up on JavaScript. Perhaps it has to do with lack of computer science education (more specifically not understanding Truing completeness)? Perhaps you don't need it to write games?

It's a joke. This phrase, and the whole post as well.

Also check out CSS panic https://developer.mozilla.org/en-US/demos/detail/css-panic/l...

Really nice!, this should be the original article hehe, thanks for sharing!

There are several more "0 lines of JS" demos on devmo from the July 2012 "No JavaScript" challenge:

https://developer.mozilla.org/en-US/demos/devderby/2012/july

One of them is similar in concept to the space game linked here:

https://developer.mozilla.org/en-US/demos/detail/onspacestar...

Nice. There are also "games" [1] made with just GLSL shaders in WebGL. There are several of those on Shadertoy but I particularly like https://www.shadertoy.com/view/MsX3Rf.

[1] Edit: "Games" in scare quotes because the lose state doesn't (can't) persist in a way that requires player action.

If you leave your ship in the far bottom right corner, you will never get killed

This is the ONLY useful comment in this whole thread. Thanks :P

In fact you can leave the ship anywhere in the game window. As long as you are not moving it, the collision detection does not work. (Anyone knows why?)

It works in Firefox 25 for me.

Just gave it a try, you are right.

Collision detection however fails on Google Chrome 31 when the mouse pointer is not moving.

So Chrome don't recalculate :hover CSS pseudoclass when position of element changes, it does it only on mouse events.

Collision detector uses CSS hover effect. If you don't move your mouse, hover is not triggered.

sigh, it just goes to show CSS/HTML alone isn't ready for such computation quite yet.

Sure hope this is sarcasm.

Actually.. There is a way to do it that I was in the process of creating for my personal CSS only game I made 2+ years ago. It involved having a div slide over the content with a specific hover event that would require the user to keep moving their mouse every X seconds or the you lose screen would cover the page.

Or just press and hold the mouse. You dissapear. Wait a little bit, you win.

Hit the space bar a few times, lose the cursor, and there's nothing TO kill :D

Can't collect points then though.

scroll up and down to travel instantly and also avoid collision.

This is pretty cool. Although, I'm having trouble clicking on the bonuses and don't see my score. I must be overlooking something and cba to decipher how this works at this hour.

Edit: Managed to make it the whole way through by leaving the ship in the bottom left. And then when the bonuses kept flying by uncontested because the game was "over", I was able to click on them after a few tries. The issue must have been that the cursor wasn't where I thought it was. Still very cool!

Me, my window was too short

I'd bet that Doom, a much better game, was written in 0 lines of JS as well (in the same sense). I fail to see how is this trend of "doing something the horrible way" interesting. Just because it's unconventional?

It's an ironic reply to this trend. Which also shows a pretty interesting usage of css, which has obvious educational value.

The trend is to show that real stuff CAN be done rather than actually DOing the real stuff.

I don't see something 'done the horrible way', I see someone having fun using a technology in a creative way, maybe in a way it's not really meant to be used. It's not a bad space shooter, it's an invitation to be curious.

This is exactly what I would expect at a site that calls itself hacker news.

I fail to see how is this trend of "doing something the horrible way" interesting.

If people in the history of computing had stayed conventional and avoided doing something the horrible way, demoscene probably wouldn't been born at all. Breaking the boundaries and pushing to the limits was the point. Of course the young programmers of 1980's could have just waited doing nothing for 1990's to come with more powerful personal computers :)

Going on record in support of this statement. Very, very, very tired of seeing this stuff. Please quit giving Upworthy titles to techniques or tools I will never, ever want to use any part of in practice. When I make something for fun or to try something novel, I still use the best techniques I find suitable for the problem. If it's really a pedagogical tool, it would have comments, built up examples, and conclusions about the paradigm in light of what was learned in the implementation. This is utter nonsense that reminds me of doing random things in middle school when it was quite plausible that any information was valuable information in light of a relative lack of experience to draw upon.

So you're never interested in seeing interesting explorations of CSS? Looking at the source for this didn't teach you anything interesting about new CSS features.

No-one is seriously suggesting we write CSS-only games. You're rather missing the point.

Whatever interesting CSS features this game contains could be applied to more practical use via a different sort of implementation -- in this case the reason is solely to get away with not having to write a line of JavaScript when clearly JS is a better way to write something like this.

It's one thing to write something that uses 30 lines of JS code only, than to create this and say "Look Ma, no JS!!"

I hate using javascript where CSS would suffice. It is more "natural" and efficient. The resource consumption is less intensive.

I'm still slightly uncomfortable with css being able to do anything more than positioning, coloring and fonts... and maybe hover selectors though I did abuse those severely when I found out about them.

Nevertheless, demos like this are pretty cool.

That is because the animation capabilities of CSS are still meant to be used for presentation purposes (like a cute response to mouse movement or a head bobbing around), rather than an all out game engine. The idea is still cute, but I freak that people will think this is the new way to design online games.

You're still missing the point. It's a cool demo.

We're hackers. We're supposed to like things such as obfuscated c competitions and 5k demos!

I share your practicality, but not your pessimism (nor the attitude which seems to think you can decree what others find interesting)

People going against perceived wisdom and doing the wrong things with the wrong tools is a great way to learn and innovate, I know CSS very well and I am fairly sure I wouldnt have been able to come up with this, it may not be the next big game engine but there definetely scope for very practical new techniques and insights from abusing tools in this way

Please feel free to submit things that you think are more suitable for Hacker News.

I think they're just fun little hacks. I personally find more interesting than the typical; "How sleeping only 20 minutes a day helped me sell my startup for 100 million dollars"

I suspect the community feels the same. There's always something beneficial that comes out of these for me. Whether it's seeing how *not to do something or picking up a little piece of code that can be repurposed somewhere else.

It could have been worst, imagine if the author instead had spent some of his precious time whining on a forum about how other people should spend their spare time on stuff he considers to be more valuable.

Hacking things to make them do something they were not designed to do is the life and blood of all things computers. It's just so damn fun.

Part of hacker culture is an appreciation for problems solved under arbitrary, weird, and usually difficult constraints. Practical this is not, but it's a cool demo that might inspire something useful.

If you lose that sense of playfulness with tech you might as well go work in some other field, because tech is about using things in ways they were never designed to be used... because it's fun first, and later because your under a weird constraint and you have this corpus of seemingly useless (at the time of acquisition) knowledge to draw on.

Things like this only promote a deeper understanding of what can be done in pure CSS. Yes he took it too far, but that's the point.

Just because you don't like it doesn't mean that others feel the same. In much the same way that you are very, very, very tired of seeing this stuff, I'm very, very, very tired of seeing this sort of comment on HN!

No fun allowed, people. Your software either needs to be practical or intentionally pedagogical.

just ignore it.

"Most blues are subtitled either no sense of wonder or no sense of scale." - Gastr Del Sol

What's that mean? I tried googling the phrase but I didn't get much wiser.

What I find most hilarious in hindsight is that the parent poster, myself, and everyone in this thread except the article poster seemed to miss the first line about "ironic answer" yet we're all insisting that it was a serious example meant to really show off something awesome. I've seen some really out-there code that was really instructional, such as Urbit http://www.urbit.org/2013/09/24/urbit-intro.html, in spite of its admitted uselessness, but CSS transforms were all I expected to see and all I got.

Now that I understand the author's intent, it's furthermore impossible for me to go along with a narrative that every experiment has equal or potential to lead to some mind-rattling insight. If anything, the posts about how someday shaders might build entire games etc just demonstrate how, behind the wall of basic comprehension of how GLSL's inner workings and things like Chomsky grammar concepts create fundamental limitations, the barriers one will encounter are both insurmountable and undetectable. See http://stackoverflow.com/questions/1732348/regex-match-open-...

CSS itself has annoying limits that can be summed up with the existence of tools like LESS and Stylus that add expressions to generated CSS, giving us an infinitely more capable styling system, albeit still suffering from annoying limitations that keep me sour to many CSS uses. Quite simply, everything in CSS transitions has an API so far from how animation is dealt with programmatically that I find only the most basic utilizations to -ever- be appropriate. This doesn't even mention the fact of shims, fallbacks, and the JS that deals with them. The idea that we're "pushing limits", much less making progress with examples like this is not one I'm buying into.

Personally, I spend a lot of time in HTML, CSS and JavaScript. This post was interesting to me because I was able to see the techniques that were used to accomplish what was going on in the snippet. What may not be relevant to you could be relevant to others.

The analogy would be more like writing Doom in zero lines of C/++ and just implementing it using resource files. Or some similarly mindblowing constraint.

"I wrote X in HTML5" yes can get tired, but this is a specific use of the technology that's interesting to web developers.

imo this shows what modern CSS can do, thats what its about. I for one didnt know this was possible. Imagine a 3D game written only using shaders or something like that. It doesnt make sense, but is still impressive to see.

Why bother commenting on a thread/topic you don't find interesting? Move on.

It is hacker news, isn't it?

You do realize you're on HACKER News right? You'll probably see some HACKS... maybe?

I don't recall Doom being an HTML5 game.

Hack: Right Click and just move your cursor on the context menu. Now the enemies can't see you + you get to teleport where ever you want! :D

This is brilliant. It makes me really stop and think about how far we've come from the days where HTML4 and CSS2 were everyone's limit.

Most things can be done in html4/css2 (though browsers don't usually support all of css2). Most of the platform for these things was there five years ago, it's just taken us this long to build up the tooling and infrastructure around it.

Off topic, but I had to make an Android game for my Junior year final project, and I think I used that exact same space ship sprite (it was an Asteroids clone with motion controls).

Love the tongue-in-cheek title.

Yeah..while this is also becoming some kind of annoying cliche

It's a satirical response to the annoying "___ in ___ lines of JS!" trend.

Well, the original author created it as an ironic answer to the "30 lines of javascript" topics.

And this one is actually technically interesting.

I actually expected it to be a joke. Was very impressed when the I saw the link.

It's still a joke though.

Oh yes, it is hardly a game, but I am still impressed with what they managed to do without any JS.

Assigning a tabindex of -1 to the bonus inputs would stop people like me from getting all ten bonuses by repeating {tab, space}.

Awesome. I would have been tempted to call it HTML5 game written in 30 lines of JS and then had some defunct JS code..

This reminds me of a game I built a long time ago:

http://www.ryan-kahn.com/static/onlyCSS/

I ended up building a generator for the CSS+HTML and at the time I had a PHP script (2+ years ago, I would use Node now) that could allow me to pick the number of lanes, the difficulty etc. Now it's just a single snapshot. I built it in about a week. There is a new bug apparently where the cursor is not changing as expected in chrome.

What am I supposed to be seeing here? Chrome 31, Windows 7 x64. Maybe my proxy server is screwing something up, because I mouse over the blue area, and then the scroll bar goes wonky for a bit, and then it turns red and says "game over".

EDIT: yep, definitely proxy, seems all the stuff from http://nojsgame.majorov.su/ is blocked.

"This Site Totally Doesn't Work Without JavaScript.

Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? Go here." Okay, that's funny. When Javascript is on: Ah, Nice little game. Interested how it needs a .js file with just a comment. Can we improve this to remove it?

Edit: oh, so maybe the overall website need JS, not the game(?).

Simple version on the author's website

http://nojsgame.majorov.su/

Cool, thank!

I'm pretty sure it is codepen.io that needs javascript to run the other guys website within their own.

I guess, thanks. golergka linked to authors site which doesn't: http://nojsgame.majorov.su/

Would have funnier if it was in Dart :)

I find it amusing that the content is served from a .su (Soviet Union) domain.

I'm impressed this is possible in pure CSS. What implications does this have for security/privacy? Should I be blocking CSS in addition to JS now just in case?

collision detection is based on full bounding boxes. this is especially annoying on the big ships.

How does one do logic and store state in HTML/CSS? DOM elements for state I guess, but logic?

I saw the code and a whole lot of -webkit- flags so I tried it in firefox, and it still worked.

Awesome, the bonus is the this is perhaps the lightest JS game that I have seen in a while.

Technically this is still HTML4.

Haha, it's funnily amazing!

Moving the ship with scroll wheel is a feature is suppose.

that is pretty genius... even if its a rubbish game :)

0 lines of JS and 500+ lines of CSS

there's no such thing as a free lunch...

If I was a mod, I would relabel these submissions to "extend your e-penis in 0 lines of JS."

You might be an authoritarian if...

WOW!!

if you stay completly on the left side you will avoid all objects

This is fucked up :)

This really illustrates the true power of the web. No construct has a stable definition. If we can't or don't want to use JS to write algorithms, just add new features to CSS until it has the ability. Nobody needs a reliable format to write static documents. We need to keep extending amending extending amending extending amending (while trying to be backwards compatible)!

Technically, there is one line! :P

No, because comments are not code, thus they are stripped before counting LOC.

Who said about code!

It says 0 lines of JS... Technically there is one line of JS!

technically

hacker news post quality down by %5 by this post , special thanks to the people upped this to number 1

This is a good post and we should see more of this on HN. What we don't need is politics and drama.

next up in HN , HTML5 game with 0 lines of html5...

Time waste.. Wonder why these kind of things come on top of HN. What does this project teaches us? Nothing..

angry much?

Angry over what? Some crap.

Little disappointed on the content quality of HN nowadays , rather than seeing stories of inspiring people solving some real problem and doing some real shit. All i see now is anything goes up at #1.

It's called experimenting. We use it to evolve.

How much did you evolved today? Got much better already.

Enough not to engage in this conversation with you but not enough to not reply.

Btw, for someone complaining about losing time, you seem to have a lot of it. ;)

It's Friday! I had to reply. Indeed a time waste, thanks for the reminder. ;)

? Of how little javascript you need to get a whole bunch of things done. In this game, you could efficiently generate several different objects of various animations doing different sorts of stuff simply by putting in the least of javascript. It is less resource intensive and more natural to the browser because it leverages things it expects.

Several years ago, this game would be very resource heavy and use lots of JS, but as more common uses of JS are merged into CSS, JS is less and less relied on.

Well, if you take a look at the code. Most of it is doing things in CSS what could easily have been done in JS.

Doing something to make a statement and doing something useful are two different things.

I have two questions for you though i agree with you on couple of points:

- Are you ever going to use this in near future(say 1/2 years)?

- Will you ever be able to maintain or write something of this sort when complexity arises? CSS is a domain specific declarative language. A lot of cool things could be done with it.But for game development? Hell No!

You might find some sense in these arguments, i hope!

Is this not Hacker News? Seriously, what the fuck is up with all these closed-minded, anti-hacker comments today? Is HN really just a bunch of knuckle-dragging, startup-fellating retards now?

Really you think you are super smart and everyone else is "startup-fellating" retard? Solve a real problem for once in your life and then start to say crap. I felt the project was useless and didn't solve anything. I am entitled to my opinion. Apart from "Masturbating monkey" like you who get exciting at anything that comes at #1 on HN, for once use your mind and think if it really helped you or did you learn anything new?

Reply on news.ycombinator.com