bkbooth / blockdrop

A shameless Tetris clone using HTML5/CSS3/JavaScript

BlockDrop

Demo here: blockdrop.benbooth.dev

BlockDrop is a shameless Tetris® clone using pure JavaScript, HTML and CSS.

I started writing it while teaching myself how to use JavaScript as a proper language and wean myself off jQuery. I'm also using it as a testing platform for various JavaScript, HTML5 and CSS3 features. I've tested in Chrome, Firefox, IE 9/10 and Chrome for Android so it should work on most modern platforms.

Controls

• ◀ a h or swipe ← moves the piece left
• ▶ d l or swipe → moves the piece right
• ▲ w k swipe ↑, or single tap rotates the piece 90° clock-wise
• ▼ s j or swipe ↓ soft drops the piece (drop line by line)
• spacebar or enter hard drops the piece (drop all the way to the bottom)

blockdrop's Issues

Audio lagging on mobile

Global high scores list

Setup and communicate with a high scores server to store a global high scores list.

Add testing

Research JavaScript testing methods and implement as much as possible. Setup to be run by Travis CI.

Add manifest.appcache as grunt task

manifest.appcache already generated by grunt task, need to remove reference from index.html and auto-add with grunt task.

Handle endgame nicer

Add endgame animation (screen filling with blocks?) and play game over sound.

Weird sizing on first load

On first load of the game, particularly on mobile devices the game might load too small or too big.

Toggle buttons buggy when playing on touch device

Due to touch listener intercepting taps for rotate while game is playing, pressing the toggle buttons can be fiddly.

Loading spinner on first load

Add a loading spinner while the game is loading for the first time. While downloading manifest.appcache, anything else to wait for?

Improve touch controls

Touch controls are not working properly on iOS Safari (and possibly other mobile browser's). Need to fix issues here and investigate ways to improve the touch controls across the board.

Need to revision all assets

CSS and JS revisioned already, need to revision all audio, fonts and templates too.

Not loading on iOS

Reported that the game does not load at all from iOS Safari.

• Version(s)?
• Test with iPhone 3GS (borrow newer model off anyone?)
• How to debug?

Add animations

Animate when rows of blocks are cleared. Other animations?

Audio not playing on first load

Change dialog close button to use font-awesome

Instead of just an 'x' in the close buttons, change to font-awesome i tag: <i class="fa fa-times"></i>. Also have to increase the size of the button to 1em