7 ms·

Show HN: Simple JavaScript Tetris

112 points by jstimpfle 10y ago

jstimpfle 10y ago
EDIT: Better URL https://github.com/jstimpfle/tetris-on-a-plane/ https://github.com/jstimpfle/tetris-on-a-plane/ I had fun building this and experiencing the joyful side of JS (or at least the browser ecosystem). Boarding a plane I'd had the idea of finishing a simple tetris before arrival. The game was in a working state after ~2 hours, even though I had made a few bad decisions. (it was subsequently polished, investing another few hours). It was made with a "get things done" mindset, and the experience from dabbling with purely functional programming in Haskell was very helpful (mostly the "pure", as in "non-destructive", part). It's nice that in Javascript we have an environment where we can code a fun game in <400 lines, without any library dependencies (not even internet connection needed) or build systems. On the downside, if it had stronger dynamic types and errors (like Python) that would have saved maybe 25% of my debugging time, probably without coding overhead.
- agentultra 10y ago
  It is pretty cool. Feels very much like a smalltalk-ish environment. A WebGL context is a single HTML tag and a couple of lines of code away. However you can still get the productivity boosts from an ML-like language... there are options. And ES6 supports some patterns of FP out of the box (though it is made better with small library support). Maybe checkout Bucklescript, Purescript, or Elm for the next one :) One of my rituals of taking a long trip is to finish a small coding project before I land. Sudoku, minesweeper, tetris, forward-propagating constraint solvers... it's a nice practice. Thanks for sharing yours!
- zzguy 10y ago
  Had you made Tetris before? Or used an external resource to see any pseudocode? Reason I'm asking is, I was doing a similar thing with Snake and it took me a bit longer (probably 4 hours) because I messed up the basic mechanics in the beginning (I didn't think of how to structure the growing body as a linked list). I want to gauge how much I suck (at least at games programming) lol.
  - jstimpfle 10y ago
    I once spoke about it with a friend who had to do it in C. However C is a dangerous trap here, I think it gets you in the wrong mindset. Data representation is pretty universally one of the most important things (basically the "design" part to me). Four hours is pretty quick I guess. Snake might be more difficult (but an array or llist + snake direction + board map should be straightforward). I'd done chess that week and the representation is also doable unless thinking about AI or history or... which is when I quickly go bikeshedding. Multiple different representations for different tasks (and transforming in between) might be a way to go.
    - pgt 10y ago
      I made Snake in 103 lines of ClojureScript for a talk once: https://github.com/pate/cljs-snake https://github.com/pate/cljs-snake (LOC excludes whitespace and links to repo). Comes in under 100 LOC if you strip out the aesthetics.
      - jstimpfle 10y ago
        Very nice!
    - rbirkby 10y ago
      Check out the encoding of the tetrominoes in this implementation: https://github.com/jakesgordon/javascript-tetris https://github.com/jakesgordon/javascript-tetris My subsequent port to C and Arduino was very natural: http://youtu.be/t3QOeQbEHVs http://youtu.be/t3QOeQbEHVs
    - electrum 10y ago
      Here's one I wrote a long time ago in Z80 assembly for the TI-86 graphing calculator: https://gist.github.com/electrum/76ac88de2e1d6c9254deaba003a74b6b https://gist.github.com/electrum/76ac88de2e1d6c9254deaba003a...
      - bbcbasic 10y ago
        The "Random" subroutine looks surprisingly simple
TheBiv 10y ago
Playable version of this code located here http://jstimpfle.de/projects/tetris-on-a-plane/tetris.html http://jstimpfle.de/projects/tetris-on-a-plane/tetris.html
acconrad 10y ago
I think you could optimize quite a bit of this. If you made your shape objects more robust, even just {x,y,on}, instead of doing all of those nested for loops, you could start leveraging array methods like filter to only select the ones where on === 1, then do some sort of matrix transform to swap out that x,y coord in the 4x4 with the shape you're replacing. Either way, cool game! Pretty neat you could do that in sub 400 lines of code.
- jstimpfle 10y ago
  The reason why I'm (sort of) proud of this is exactly that I managed to not get hung up with such considerations and just do the obvious things. It's not a problem to scan through 200 blocks (of which often 50% will be habitated) once every 100ms or so). If there is any need for optimization, then it would probably be to avoid DOM inefficiencies and opting for canvas or another environment.
danso 10y ago
Very neat. I was about to report a bizarre bug -- `a/d` for rotating pieces worked on my laptop keyboard but not my USB-connected keyboard -- but then I realized caps-lock was turned-on my connected keyboard. Still probably wouldn't hurt to make the conditional case-insensitive
jibreel 10y ago
nice, as a web developer i wanted to try my hands on making a game. which turned out to be much harder than i thought, and also see if i could do any thing with c lang, never wrote a program more than ~15 lines of code in c, so i build a tetris game, using SDL lib. funny thing is i also represented shapes like you did as 0 or 1 on plane, but then changed to x,y list of blocks. here it is. https://gist.github.com/spaceexperiment/4d6b116ef577a29712593c41747bd092 https://gist.github.com/spaceexperiment/4d6b116ef577a2971259...
mattnewton 10y ago
Broken on Safari 10, and I can't figure out why. None of the keyboard keys seem to fire any events.
- dhritzkiv 10y ago
  It seems the code uses `event.key` (which returns a human-readable string, e.g. "ArrowLeft"). `event.key` is not supported in WebKit.
  - jstimpfle 10y ago
    Thanks to you both. I converted to using ev.keyCode. Hope it works everywhere.
- alfanick 10y ago
  yup I can confirm that, uBlock disabled
skanga 10y ago
Very nice. Agree with danso that keys should be case insensitive. Also - the UP arrow should rotate in some (any) direction.
Scarbutt 10y ago
no babel/webpack?
- nkg 10y ago
  XD
nthcolumn 10y ago
Awesome! I made a fiddle https://jsfiddle.net/wt309enw/1/ https://jsfiddle.net/wt309enw/1/
- pryelluw 10y ago
  This is pretty fun to see on a fiddle. :)
wmichelin 10y ago
What's going on here? https://github.com/jstimpfle/tetris-on-a-plane/blob/master/tetris.js#L93 https://github.com/jstimpfle/tetris-on-a-plane/blob/master/t...
- jstimpfle 10y ago
  Link broke with new commit, here's a stable one: https://github.com/jstimpfle/tetris-on-a-plane/blob/d5d4d821aed95d9f1618f410ddca3b6b8b2c8853/tetris.js#L101 https://github.com/jstimpfle/tetris-on-a-plane/blob/d5d4d821... This is a test to see how quickly someone brings up the stackoverflow link ;-)
- proto-n 10y ago
  http://stackoverflow.com/questions/1642028/what-is-the-name-of-the-operator-in-c http://stackoverflow.com/questions/1642028/what-is-the-name-...
  - Cpoll 10y ago
    In other words, it's a crappy way to write `i-- > 0` Note that it's not logically equivalent to `for (var i = 5; i > 0; i--)` because in this case the `i--` operation is applied after the body of the loop. Try it in your browser: for (var i = 5; i-- > 0;) { console.log(i); } //4,3,2,1 for (var i = 5; i > 0; i--) { console.log(i); } //5,4,3,2,1
    - jstimpfle 10y ago
      This is why I actually like this syntax (and get fun out of provoking "shudder" comments). - Can use the same limits as in ascending iteration - Can do decrementing in for loop (no extra line) - The arrow unambiguously signals that the iteration is correct :-)
      - bbcbasic 10y ago
        !!"It's the JS way"
- deleted 10y ago
pryelluw 10y ago
@OP License? Can I use it as a teaching tool? :)
- jstimpfle 10y ago
  Sure!
  - pryelluw 10y ago
    Thanks. Please add a license file to repo of you haven't done so already. :)
jnpatel 10y ago
I like that that this implementation lets you shift right/left for a split second after you let the piece fall. Not all Tetris versions I've seen do that. I'm not sure what official behavior, though.
- 0x0 10y ago
  There's quite a few details about the official authentic tetris guidelines here, looks like it's probably reverse-engineered. https://tetris.wiki/Tetris_Guideline https://tetris.wiki/Tetris_Guideline
smnscu 10y ago
Similar, in Python, using rudimentary CLI controls (it was a take-home test). https://github.com/andreis/bchw https://github.com/andreis/bchw
sp332 10y ago
I think the rotations feel wrong. If I get a Z piece, rotating twice should get me back where I started. Instead it's shifted sideways one space. I have to shift 4 times to get back.
- jstimpfle 10y ago
  The scheme used here is a 4x4 block (the minimum required to accomodate all pieces) and rotations by 90 degrees. You can rotate both cw and ccw, this works for undoing rotation of all pieces.
g3 10y ago
And here is a concise JavaScript tetris (playable: http://copy.sh/tetris/ http://copy.sh/tetris/): f=[];p=[1];g=h=2;s=0;t=500;for(i=0;23>i;i++)f[i]=j=-16380;f[23]=-1;onkeydown=e;e(e);function e(b,a){(k=b.which)?k-38?k&-3^37||(g+=a=k^37?-1:1):(z=p,v=p[2],c=p[1],p=[2*v&2|4*c&4,p[3]/2&1|v&2|2*c&4|4*p[0]&8,p[3]/4&1|v/2&2|c&4|2*p[0]&8,v/4&2|c/2&4]):s-j&&setTimeout(e,100+t,h++);m=p[0]<<g;l=p[1]<<g;_=p[2]<<g;o=p[3]<<g;f[h+=32==k]&m|f[1+h]&l|f[2+h]&_|f[3+h]&o?a?g-=a:k^38?(f[h]|=l,f[--h]|=m,f[2+h]|=_,f[3+h]|=o,h?(g=6,x=new Date%7*4,p=[h=0,2908739>>x&15,266758006>>x&15],t*=.97):s+=" Game Over!"):p=z:k^32||e(b);for(y=_=o="";24>++y;o+="\n")for(f[y]+4||(f.splice(y,1),f.unshift(j),s+=++_,o="",y=2),x=14;x;q.textContent=o+s)o+=" X"[(f[y]|p[y-h]<<g)>>x--&1]}
- geuis 10y ago
  Just because you minify and obfuscate this code doesn't somehow make it better or let you win the "contest". I can walk through the submitter's code and understand what's happening clearly. It's fairly well structured and easy enough to read. This is 20x more valuable than any code that is produced using uncommented edge features for a perceived 5% gain. (Note that I'm making up these numbers to illustrate a point.)
  - bronson 10y ago
    Wait, where did the OP say it was better or won some contest?
  - CardenB 10y ago
    I think you're taking this too seriously
etaioinshrdlu 10y ago
My iteration of the same thing This one generates a wide array of pieces upon start. And has buttons for use on mobile http://kevinusbaragon.us/jtris/jtris.html http://kevinusbaragon.us/jtris/jtris.html
tluyben2 10y ago
Nice, I like writing things under constraint; especially without internet and manuals. Seems to take away a lot of stress and open up creativity, at least it does for me [0]. I am flying to AUS soon which will have me without internet for around 21 hours again and I will try another constraint game at that time. [0] http://brainfisheatfishbrain.com/2015/03/writing-a-game-without-sleep-or-internet-at-jfk.html http://brainfisheatfishbrain.com/2015/03/writing-a-game-with...
hauxir 10y ago
Here's one i made in Haskell and NCurses https://github.com/hauxir/haskell-tetris https://github.com/hauxir/haskell-tetris

112 points by jstimpfle 10y ago

EDIT: Better URL https://github.com/jstimpfle/tetris-on-a-plane/ https://github.com/jstimpfle/tetris-on-a-plane/ I had fun building this and experiencing the joyful side of JS (or at least the browser ecosystem). Boarding a plane I'd had the idea of finishing a simple tetris before arrival. The game was in a working state after ~2 hours, even though I had made a few bad decisions. (it was subsequently polished, investing another few hours). It was made with a "get things done" mindset, and the experience from dabbling with purely functional programming in Haskell was very helpful (mostly the "pure", as in "non-destructive", part). It's nice that in Javascript we have an environment where we can code a fun game in <400 lines, without any library dependencies (not even internet connection needed) or build systems. On the downside, if it had stronger dynamic types and errors (like Python) that would have saved maybe 25% of my debugging time, probably without coding overhead.

agentultra 10y ago
It is pretty cool. Feels very much like a smalltalk-ish environment. A WebGL context is a single HTML tag and a couple of lines of code away. However you can still get the productivity boosts from an ML-like language... there are options. And ES6 supports some patterns of FP out of the box (though it is made better with small library support). Maybe checkout Bucklescript, Purescript, or Elm for the next one :) One of my rituals of taking a long trip is to finish a small coding project before I land. Sudoku, minesweeper, tetris, forward-propagating constraint solvers... it's a nice practice. Thanks for sharing yours!
zzguy 10y ago
Had you made Tetris before? Or used an external resource to see any pseudocode? Reason I'm asking is, I was doing a similar thing with Snake and it took me a bit longer (probably 4 hours) because I messed up the basic mechanics in the beginning (I didn't think of how to structure the growing body as a linked list). I want to gauge how much I suck (at least at games programming) lol.
- jstimpfle 10y ago
  I once spoke about it with a friend who had to do it in C. However C is a dangerous trap here, I think it gets you in the wrong mindset. Data representation is pretty universally one of the most important things (basically the "design" part to me). Four hours is pretty quick I guess. Snake might be more difficult (but an array or llist + snake direction + board map should be straightforward). I'd done chess that week and the representation is also doable unless thinking about AI or history or... which is when I quickly go bikeshedding. Multiple different representations for different tasks (and transforming in between) might be a way to go.
  - pgt 10y ago
    I made Snake in 103 lines of ClojureScript for a talk once: https://github.com/pate/cljs-snake https://github.com/pate/cljs-snake (LOC excludes whitespace and links to repo). Comes in under 100 LOC if you strip out the aesthetics.
    - jstimpfle 10y ago
      Very nice!
  - rbirkby 10y ago
    Check out the encoding of the tetrominoes in this implementation: https://github.com/jakesgordon/javascript-tetris https://github.com/jakesgordon/javascript-tetris My subsequent port to C and Arduino was very natural: http://youtu.be/t3QOeQbEHVs http://youtu.be/t3QOeQbEHVs
  - electrum 10y ago
    Here's one I wrote a long time ago in Z80 assembly for the TI-86 graphing calculator: https://gist.github.com/electrum/76ac88de2e1d6c9254deaba003a74b6b https://gist.github.com/electrum/76ac88de2e1d6c9254deaba003a...
    - bbcbasic 10y ago
      The "Random" subroutine looks surprisingly simple

TheBiv 10y ago

Playable version of this code located here http://jstimpfle.de/projects/tetris-on-a-plane/tetris.html http://jstimpfle.de/projects/tetris-on-a-plane/tetris.html

acconrad 10y ago

I think you could optimize quite a bit of this. If you made your shape objects more robust, even just {x,y,on}, instead of doing all of those nested for loops, you could start leveraging array methods like filter to only select the ones where on === 1, then do some sort of matrix transform to swap out that x,y coord in the 4x4 with the shape you're replacing. Either way, cool game! Pretty neat you could do that in sub 400 lines of code.

jstimpfle 10y ago
The reason why I'm (sort of) proud of this is exactly that I managed to not get hung up with such considerations and just do the obvious things. It's not a problem to scan through 200 blocks (of which often 50% will be habitated) once every 100ms or so). If there is any need for optimization, then it would probably be to avoid DOM inefficiencies and opting for canvas or another environment.

danso 10y ago

Very neat. I was about to report a bizarre bug -- `a/d` for rotating pieces worked on my laptop keyboard but not my USB-connected keyboard -- but then I realized caps-lock was turned-on my connected keyboard. Still probably wouldn't hurt to make the conditional case-insensitive

jibreel 10y ago

nice, as a web developer i wanted to try my hands on making a game. which turned out to be much harder than i thought, and also see if i could do any thing with c lang, never wrote a program more than ~15 lines of code in c, so i build a tetris game, using SDL lib. funny thing is i also represented shapes like you did as 0 or 1 on plane, but then changed to x,y list of blocks. here it is. https://gist.github.com/spaceexperiment/4d6b116ef577a29712593c41747bd092 https://gist.github.com/spaceexperiment/4d6b116ef577a2971259...

mattnewton 10y ago

Broken on Safari 10, and I can't figure out why. None of the keyboard keys seem to fire any events.

dhritzkiv 10y ago
It seems the code uses `event.key` (which returns a human-readable string, e.g. "ArrowLeft"). `event.key` is not supported in WebKit.
- jstimpfle 10y ago
  Thanks to you both. I converted to using ev.keyCode. Hope it works everywhere.
alfanick 10y ago
yup I can confirm that, uBlock disabled

skanga 10y ago

Very nice. Agree with danso that keys should be case insensitive. Also - the UP arrow should rotate in some (any) direction.

Scarbutt 10y ago

no babel/webpack?

nkg 10y ago
XD

nthcolumn 10y ago

Awesome! I made a fiddle https://jsfiddle.net/wt309enw/1/ https://jsfiddle.net/wt309enw/1/

pryelluw 10y ago
This is pretty fun to see on a fiddle. :)

wmichelin 10y ago

What's going on here? https://github.com/jstimpfle/tetris-on-a-plane/blob/master/tetris.js#L93 https://github.com/jstimpfle/tetris-on-a-plane/blob/master/t...

jstimpfle 10y ago
Link broke with new commit, here's a stable one: https://github.com/jstimpfle/tetris-on-a-plane/blob/d5d4d821aed95d9f1618f410ddca3b6b8b2c8853/tetris.js#L101 https://github.com/jstimpfle/tetris-on-a-plane/blob/d5d4d821... This is a test to see how quickly someone brings up the stackoverflow link ;-)
proto-n 10y ago
http://stackoverflow.com/questions/1642028/what-is-the-name-of-the-operator-in-c http://stackoverflow.com/questions/1642028/what-is-the-name-...
- Cpoll 10y ago
  In other words, it's a crappy way to write `i-- > 0` Note that it's not logically equivalent to `for (var i = 5; i > 0; i--)` because in this case the `i--` operation is applied after the body of the loop. Try it in your browser: for (var i = 5; i-- > 0;) { console.log(i); } //4,3,2,1 for (var i = 5; i > 0; i--) { console.log(i); } //5,4,3,2,1
  - jstimpfle 10y ago
    This is why I actually like this syntax (and get fun out of provoking "shudder" comments). - Can use the same limits as in ascending iteration - Can do decrementing in for loop (no extra line) - The arrow unambiguously signals that the iteration is correct :-)
    - bbcbasic 10y ago
      !!"It's the JS way"
deleted 10y ago

pryelluw 10y ago

@OP License? Can I use it as a teaching tool? :)

jstimpfle 10y ago
Sure!
- pryelluw 10y ago
  Thanks. Please add a license file to repo of you haven't done so already. :)

jnpatel 10y ago

I like that that this implementation lets you shift right/left for a split second after you let the piece fall. Not all Tetris versions I've seen do that. I'm not sure what official behavior, though.

0x0 10y ago
There's quite a few details about the official authentic tetris guidelines here, looks like it's probably reverse-engineered. https://tetris.wiki/Tetris_Guideline https://tetris.wiki/Tetris_Guideline

smnscu 10y ago

Similar, in Python, using rudimentary CLI controls (it was a take-home test). https://github.com/andreis/bchw https://github.com/andreis/bchw

sp332 10y ago

I think the rotations feel wrong. If I get a Z piece, rotating twice should get me back where I started. Instead it's shifted sideways one space. I have to shift 4 times to get back.

jstimpfle 10y ago
The scheme used here is a 4x4 block (the minimum required to accomodate all pieces) and rotations by 90 degrees. You can rotate both cw and ccw, this works for undoing rotation of all pieces.

g3 10y ago

And here is a concise JavaScript tetris (playable: http://copy.sh/tetris/ http://copy.sh/tetris/): f=[];p=[1];g=h=2;s=0;t=500;for(i=0;23>i;i++)f[i]=j=-16380;f[23]=-1;onkeydown=e;e(e);function e(b,a){(k=b.which)?k-38?k&-3^37||(g+=a=k^37?-1:1):(z=p,v=p[2],c=p[1],p=[2*v&2|4*c&4,p[3]/2&1|v&2|2*c&4|4*p[0]&8,p[3]/4&1|v/2&2|c&4|2*p[0]&8,v/4&2|c/2&4]):s-j&&setTimeout(e,100+t,h++);m=p[0]<<g;l=p[1]<<g;_=p[2]<<g;o=p[3]<<g;f[h+=32==k]&m|f[1+h]&l|f[2+h]&_|f[3+h]&o?a?g-=a:k^38?(f[h]|=l,f[--h]|=m,f[2+h]|=_,f[3+h]|=o,h?(g=6,x=new Date%7*4,p=[h=0,2908739>>x&15,266758006>>x&15],t*=.97):s+=" Game Over!"):p=z:k^32||e(b);for(y=_=o="";24>++y;o+="\n")for(f[y]+4||(f.splice(y,1),f.unshift(j),s+=++_,o="",y=2),x=14;x;q.textContent=o+s)o+=" X"[(f[y]|p[y-h]<<g)>>x--&1]}

geuis 10y ago
Just because you minify and obfuscate this code doesn't somehow make it better or let you win the "contest". I can walk through the submitter's code and understand what's happening clearly. It's fairly well structured and easy enough to read. This is 20x more valuable than any code that is produced using uncommented edge features for a perceived 5% gain. (Note that I'm making up these numbers to illustrate a point.)
- bronson 10y ago
  Wait, where did the OP say it was better or won some contest?
- CardenB 10y ago
  I think you're taking this too seriously

etaioinshrdlu 10y ago

My iteration of the same thing This one generates a wide array of pieces upon start. And has buttons for use on mobile http://kevinusbaragon.us/jtris/jtris.html http://kevinusbaragon.us/jtris/jtris.html

tluyben2 10y ago

Nice, I like writing things under constraint; especially without internet and manuals. Seems to take away a lot of stress and open up creativity, at least it does for me [0]. I am flying to AUS soon which will have me without internet for around 21 hours again and I will try another constraint game at that time. [0] http://brainfisheatfishbrain.com/2015/03/writing-a-game-without-sleep-or-internet-at-jfk.html http://brainfisheatfishbrain.com/2015/03/writing-a-game-with...

hauxir 10y ago

Here's one i made in Haskell and NCurses https://github.com/hauxir/haskell-tetris https://github.com/hauxir/haskell-tetris