Snake Game in 30 lines of JavaScript | Hacker News Reader

Snake Game in 30 lines of JavaScript

jsfiddle.net

57 pointsaves27 comments

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

yours is better :D

Nice. Yours has better graphics, better speed, a pause/play function, and it doesn't loop around. Much better :)

Need to insert "[Some app] in [# of lines] of JavaScript" in that 4chan thread.

Neat. You might consider setting the setInterval to something lower than a second though. It'll be more fun to play that way ...

Change line 28 to something like 200 ms and then it's quite playable:

    }, 200);

Original: http://habrahabr.ru/post/202476/

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.

Plenty of actual snake implementations had the same thing, so it is at least "authentic"!

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.

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

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

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.

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.

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.

Put all lines on one line, and you have "Snake Game in 1 line of JavaScript".

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.

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.

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;

With jQuery it's just

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

and where is snakegame() defined?

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.

219 bytes for tron: http://quaxio.com/tron/, snakes shouldn't require a lot more :)

Change the setInterval value to something like 200 to make the snake faster and the game funner!

I just wish I could understand all the code - maybe a weekend project soon ^_^

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.

I guess I'm wrong, but for me the purpose of a game is to be fun to play. This one isn't.

Reply on news.ycombinator.com