Show HN: Quick JavaScript Tetris – Based on Yesterday's Show HN | Hacker News Reader

Show HN: Quick JavaScript Tetris – Based on Yesterday's Show HN

github.com

56 pointssacert22 comments

After seeing yesterday's Show HN about building a Tetris game on a game, I decided to take a crack at it and build it within a short time frame before I went back to studying for my midterm. I rarely code in JavaScript so it added to the challenge. Several features are missing but I am satisfied with what I accomplished during my coding session.

Nice

I experienced a bug where the game suddenly stops after a few minutes of playing. I'm using Firefox ESR 45.4.0 on RHEL if it helps. Otherwise, great job!

I couldn't get a second block to appear. I drop the first block, and the game just stops doing anything.

Thanks for pointing it out, I'll look into it.

Me too. Jumping into the console gives a series errors like:

> TypeError: tetrisBoard[(y - 1)] is undefined

From within tick()

Seems to be triggered by rotation followed by a drop.

Seconding that, Firefox 49 on Windows7.

Thirded w/ Chrome 54.0.2840.87 (64-bit) on OS X 10.11.6. Stopped about 15 pieces in the first time so I thought it was just an abbreviated demo.

Could you make it work on mobile (esp. touch screens)? Something where arrows are swipes?

That is quite interesting, I didn't really think about mobile capabilities while making this but it would be a fun thing to add. I'll look into it after my exam tomorrow!

Love these short 1 file code things.

C https://gist.github.com/spaceexperiment/4d6b116ef577a2971259...

Tcl https://gist.github.com/nickbarth/cba8cc9996cc3ebe8427726fae...

>I set my deadline as the time before I had to start studying for my midterm

Ah, procrastination ;)

Super nice. I had to look in the code to find this:

  Up arrow to rotate!

Fine idea, but it needs to cancel the default event because otherwise the page scrolls up when you rotate a piece.

Good point, I just implemented a fix for that

I initially had specified that in the controls list but it was too cluttered so I decided to give a general description of "arrow" = move. Preferably, I'd want to add a little guide box on the side of the canvas but I am still learning about formatting a page in hmtl/css.

I love Tetris! Played it for a few minutes. Time to attach to blocks shouldn't be instant and I had the top and right game borders start flashing after a while but otherwise pretty cool!

Consider wrapping your code in a closure so that all the variables and functions aren't globals. It's good performance-wise and for not polluting the global namespace.

Otherwise looks good. :)

It would be nice to see what the next block is going to be.

I feel like delay you get when rotating the blocks is too short. I often ended up over-rotating it. Might just be me.

Other than that good job.

The playing field is higher than the client area of my browser. (768px pix screen)

Valid point, just added a resizing function so it should be fine now.

Reply on news.ycombinator.com