HN Explorer

27 comments

[ 4.4 ms ] story [ 36.5 ms ] thread
b0rsuk
I wouldn't play it.

Proof of concept apps in few lines of code might be cool, but the devil is in the details. The last 10% takes 90% of the time.

b0rsuk
I guess I'm wrong, but for me the purpose of a game is to be fun to play. This one isn't.
filipedeschamps
Need to insert "[Some app] in [# of lines] of JavaScript" in that 4chan thread.
CWIZO
Neat. You might consider setting the setInterval to something lower than a second though. It'll be more fun to play that way ...
ancarda
Change line 28 to something like 200 ms and then it's quite playable:

    }, 200);
chengsun
Not to be unappreciative of this cool demo, but here's a snake game I wrote a while ago that clocks in at 41 "commented lines" of code, and minifies to under 1KB of code whilst including setting up the DOM and CSS (which is counted separately here), and features such as pausing and aging food:

http://chengsun.github.io/snake.html

joliv
Nice. Yours has better graphics, better speed, a pause/play function, and it doesn't loop around. Much better :)
adamcanady
I really like this whole concept of using small projects like this and the spreadsheet thing to create simple, yet elegant apps.

I wonder if this could be a good method for teaching technologies like CSS, JS, and HTML? If you think about it, there isn't a lot of code here, so it would be easy for a student to go through it line by line and end up learning a lot.

vjeux
Here is a Snake implemented in React:

Demo: http://tomocchino.github.io/react-snake/

Source (150 lines): https://github.com/tomocchino/react-snake/blob/master/src/sn...

nilliams
Cool, learning React at the mo so this is appreciated. You can remove all those autoBinds now [1] right?

[1] http://facebook.github.io/react/blog/2013/07/02/react-v0-4-a...

vjeux
Yes, autoBind are done by default now. Also, you need to replace `class` by `className` in JSX.

You can also take the advantage of getDefaultProps() instead of doing `this.props.something || 12` everywhere.

sergiotapia
Change the setInterval value to something like 200 to make the snake faster and the game funner!
jlas
There's an annoying bug where you lose if you tap the button to go opposite the direction in which you're heading. e.g. if you're heading right and you tap left, you lose.
cmdkeen
Plenty of actual snake implementations had the same thing, so it is at least "authentic"!
jlas
Here's my fix: http://jsfiddle.net/jlas/CT2pG/1/

Easy one line fix for this: need to check if new dx / dy is opposite the old dx / dy and use the old one if so.

  var _dx = (e.keyCode - 38) % 2, _dy = (e.keyCode - 39) % 2;
  dx = (_dx*-1 === dx) ? dx : _dx, dy = (_dy*-1 === dy) ? dy : _dy;
I also added another fix to disallow moving twice during one cycle.
kennethkl
lines like: dx = (e.keyCode - 38) % 2, dy = (e.keyCode - 39) % 2; is cheating. In that case, you could probably make it 1 line of javascript.
jlas
I agree, there are like 7 lines that bunch together logic using commas.

This one has three operations in one line:

  newEl.className = newEl.className.replace(' f', ''), length++, hasFood = false;
lockes5hadow
There is a bug where if you move into a space where your tail was but no longer is, you die. Essentially, the check for gameover needs to be after you move the snake.
Aardwolf
Put all lines on one line, and you have "Snake Game in 1 line of JavaScript".
adam-a
Quite cool!

My attempt, 31 lines (although some of them are quite long :) http://jsfiddle.net/8Rqcy/5/

Has score counting, restarts, walls, you can't go back on yourself, and speed increases.

eliteraspberrie
Very cool. Snake was the first non-trivial program I wrote, in TI-BASIC, more than a decade ago. It was definitely less than 30 lines back then.
vinautomatic
I just wish I could understand all the code - maybe a weekend project soon ^_^
yetanotherphd
With jQuery it's just

  <div id="game"></div>
  <script type="text/javascript">
  $( "#game" ).snakegame();
  </script>