
HTML5 game written in 0 lines of JS - golergka
http://codepen.io/i0z/pen/mFLCw
======
golergka
Obligatory information:

I'm not the original author. It was posted on russian HN/Reddit clone
Habrahabr:
[http://habrahabr.ru/post/203048/](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](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/](http://habrahabr.ru/post/202736/)

1\.
[http://jsfiddle.net/0dmin/9dQx3/embedded/result/](http://jsfiddle.net/0dmin/9dQx3/embedded/result/)

~~~
paxcoder
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?

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

------
minikomi
Also check out CSS panic [https://developer.mozilla.org/en-
US/demos/detail/css-panic/l...](https://developer.mozilla.org/en-
US/demos/detail/css-panic/launch)

~~~
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](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...](https://developer.mozilla.org/en-
US/demos/detail/onspacestart-css)

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

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

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

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

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

~~~
danielweber
Me, my window was too short

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

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

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

~~~
cjfont
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!!"

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

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

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

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

~~~
d23
And this one is actually technically interesting.

------
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/](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/](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/](http://nojsgame.majorov.su/)

~~~
fakeanon
Cool, thank!

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

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

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

------
pearjuice
Technically this is still HTML4.

------
jpincheira
Haha, it's funnily amazing!

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

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

------
adam12
0 lines of JS and 500+ lines of CSS

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

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

~~~
ffrryuu
You might be an authoritarian if...

------
cauliturtle
WOW!!

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

------
choarham
This is fucked up :)

------
lhgaghl
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)!

------
wilhil
Technically, there is one line! :P

~~~
slu
No, because comments are _not_ code, thus they are stripped before counting
LOC.

~~~
wilhil
Who said about code!

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

 _technically_

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

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

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

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

~~~
aliakbarkhan
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?

~~~
vinitool76
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?

