HTML5 game written in 0 lines of JS

[golergka]

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.

[pash]

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/

[recon517]

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

[iends]

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

[minikomi]

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

[mbrubeck]

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

[ramayac]

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

[networked]

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.

[jayflux]

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

[uzyn]

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

[kumarharsh]

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

[kazagistar]

Can't collect points then though.

[err4nt]

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

[woud420]

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

[rcconf]

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

[tfb]

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!

[rplnt]

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?

[mmahemoff]

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.

[golergka]

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

[w-m]

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.

[jzzskijj]

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

[ht_th]

It is hacker news, isn't it?

[knappador]

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.

[sgtpepper]

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

[kayoone]

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.

[CmonDev]

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

[lemonberry]

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

[vacri]

I don't recall Doom being an HTML5 game.

[gprasanth]

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

[ThePinion]

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.

[lmm]

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.

[idProQuo]

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

[AndrewBissell]

Love the tongue-in-cheek title.

[golergka]

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

[munimkazia]

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

[Aslaville]

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

[chrismorgan]

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

[jawr]

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

[Myztiq]

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.

[nollidge]

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.

[fakeanon]

"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(?).

[golergka]

Simple version on the author's website

http://nojsgame.majorov.su/

[bargl]

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

[Aardwolf]

Would have funnier if it was in Dart :)

[DonPellegrino]

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

[Pete_D]

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?

[blt]

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

[ibrahima]

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