Tetris implemented in JavaScript and the HTML canvas element
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Canvas Tetris

Canvas Tetris was an attempt to reproduce the famous brick-dropping game in JavaScript and canvas using test-driven modular development from start to finish. Each component had tests written for it first and were then implemented and refactored incrementally.

OOP JavaScript practices were used throughout, with private members exposed via getters and setters. Components observe Demeters Law, and the dependency injection pattern is applied to all the game to allow easy mocking of objects for tests.


  • Up arrow : Rotate Piece
  • Down arrow : Drop faster
  • Left arrow : Move piece left
  • Right arrow : Move piece right
  • p or Pause : Pause game

Game Objects



  • structure : A multidimensional array that makes up the piece. Default is [[1]]
  • color : The color, in hex, of the piece. Default is #000000
  • top : Integer representing units from the top of the level. Default is the negative height of the piece
  • left : Integer representing units from the left side of the level. Default is the length of the piece



  • structure : A multidimensional array that makes up the level. If null it will use the width and height arguments
  • width : Optional integer specifying the width of the level in lieu of a literal structure
  • height : Optional integer specifying the height of the level in lieu of a literal structure
  • piece : The default active piece. If null or undefined one will be generated randomly



  • canvas : The canvas DOM element that will be used
  • level : A vlid level object
  • score : An integer that is the the starting score

Creating a Game

Provide a basic HTML structure that includes a canvas element and optionally a level counter, a score counter, a "game over" element and an FPS counter:

<canvas id="level"></canvas>
<div id="gameover">Game Over</div>
<div id="game-info">
    <p>Score: <span id="score"></span></p>
    <p>Level: <span id="level-number"></span></p>
<p id="fps-info">FPS: <span id="fps"></span></p>

With the basic structure in place, simply include the tetris.js file, and initialize a game using your desired options

<script type="text/javascript">
    var x = new Level(null, 16, 32);
    var game = new Game(null, x);

The example above created a new 16 x 32 level with all the options set to their defaults. For extra fun you can create custom levels and pass them to the game. The following example creates pink text pieces that say "coming soon" that interacts with the Tetris pieces:

var structure = [];
var x = "#ee3c96";
var o = undefined;

structure = [

var l = new level(structure);
var game = new game(null, l);

You can create any custom level you want as long as you make sure to set the empty spaces to undefined and the occupied level spaces to a color in hex.

Browser Compatibility

Should work in all major modern browsers, guessing older versions of IE (8 and below) will not due to key binding issues as well as not natively supporting canvas.


GNU GPL Version 3 http://www.gnu.org/copyleft/gpl.html