7 ms·

Snake Game in 30 lines of JavaScript

57 points by aves 13y ago

aves 13y ago
Original: http://habrahabr.ru/post/202476/ http://habrahabr.ru/post/202476/
b0rsuk 13y ago
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 13y ago
  I guess I'm wrong, but for me the purpose of a game is to be fun to play. This one isn't.
filipedeschamps 13y ago
Need to insert "[Some app] in [# of lines] of JavaScript" in that 4chan thread.
Aardwolf 13y ago
Put all lines on one line, and you have "Snake Game in 1 line of JavaScript".
CWIZO 13y ago
Neat. You might consider setting the setInterval to something lower than a second though. It'll be more fun to play that way ...
- ancarda 13y ago
  Change line 28 to something like 200 ms and then it's quite playable: }, 200);
chengsun 13y ago
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 http://chengsun.github.io/snake.html
- zapt02 13y ago
  yours is better :D
- joliv 13y ago
  Nice. Yours has better graphics, better speed, a pause/play function, and it doesn't loop around. Much better :)
adamcanady 13y ago
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 13y ago
Here is a Snake implemented in React: Demo: http://tomocchino.github.io/react-snake/ http://tomocchino.github.io/react-snake/ Source (150 lines): https://github.com/tomocchino/react-snake/blob/master/src/snake.js https://github.com/tomocchino/react-snake/blob/master/src/sn...
- nilliams 13y ago
  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-autobind-by-default.html http://facebook.github.io/react/blog/2013/07/02/react-v0-4-a...
  - vjeux 13y ago
    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 13y ago
Change the setInterval value to something like 200 to make the snake faster and the game funner!
jlas 13y ago
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 13y ago
  Plenty of actual snake implementations had the same thing, so it is at least "authentic"!
- jlas 13y ago
  Here's my fix: http://jsfiddle.net/jlas/CT2pG/1/ 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 13y ago
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 13y ago
  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 13y ago
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.
adam-a 13y ago
Quite cool! My attempt, 31 lines (although some of them are quite long :) http://jsfiddle.net/8Rqcy/5/ http://jsfiddle.net/8Rqcy/5/ Has score counting, restarts, walls, you can't go back on yourself, and speed increases.
eliteraspberrie 13y ago
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 13y ago
I just wish I could understand all the code - maybe a weekend project soon ^_^
yetanotherphd 13y ago
With jQuery it's just <div id="game"></div> <script type="text/javascript"> $( "#game" ).snakegame(); </script>
- arvindravi 13y ago
  and where is snakegame() defined?
amenghra 13y ago
219 bytes for tron: http://quaxio.com/tron/ http://quaxio.com/tron/, snakes shouldn't require a lot more :)

57 points by aves 13y ago

aves 13y ago

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

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 13y ago
I guess I'm wrong, but for me the purpose of a game is to be fun to play. This one isn't.

filipedeschamps 13y ago

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

Aardwolf 13y ago

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

CWIZO 13y ago

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

ancarda 13y ago
Change line 28 to something like 200 ms and then it's quite playable: }, 200);

chengsun 13y ago

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 http://chengsun.github.io/snake.html

zapt02 13y ago
yours is better :D
joliv 13y ago
Nice. Yours has better graphics, better speed, a pause/play function, and it doesn't loop around. Much better :)

adamcanady 13y ago

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 13y ago

Here is a Snake implemented in React: Demo: http://tomocchino.github.io/react-snake/ http://tomocchino.github.io/react-snake/ Source (150 lines): https://github.com/tomocchino/react-snake/blob/master/src/snake.js https://github.com/tomocchino/react-snake/blob/master/src/sn...

nilliams 13y ago
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-autobind-by-default.html http://facebook.github.io/react/blog/2013/07/02/react-v0-4-a...
- vjeux 13y ago
  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 13y ago

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

jlas 13y ago

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 13y ago
Plenty of actual snake implementations had the same thing, so it is at least "authentic"!
jlas 13y ago
Here's my fix: http://jsfiddle.net/jlas/CT2pG/1/ 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 13y ago

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 13y ago
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 13y ago

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.

adam-a 13y ago

Quite cool! My attempt, 31 lines (although some of them are quite long :) http://jsfiddle.net/8Rqcy/5/ http://jsfiddle.net/8Rqcy/5/ Has score counting, restarts, walls, you can't go back on yourself, and speed increases.

eliteraspberrie 13y ago

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 13y ago

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

yetanotherphd 13y ago

With jQuery it's just <div id="game"></div> <script type="text/javascript"> $( "#game" ).snakegame(); </script>

arvindravi 13y ago
and where is snakegame() defined?

amenghra 13y ago

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