Tetris

This project is an implementation of Tetris written in pure JavaScript. https://github.com/rarioj/tetris

by Ario Jatmiko

HTML

<div id="control">
	<h1>Tetris</h1>
	<p>You can control the falling piece with your keyboard. <strong>Focus your mouse on the playing field in order to control the piece in JSFiddle!</strong></p>
	<p>Use <strong>Left</strong> ⇦, <strong>Down</strong> ⇩, and <strong>Right</strong> ⇨ arrow keys in your keyboard to move the piece around the playing field.</p>
	<p>Use the letter key <strong>A</strong> to rotate the piece counter-clockwise ↺ and <strong>S</strong> key to rotate the piece clockwise ↻.</p>
</div>

<div id="tetris"></div>

CSS

#tetris {
	float: right;
	width: 50%;
}

#control {
	float: left;
	width: 50%;
}

JavaScript

// +-+-+-+-+-+-+-+-+-+ //
//                     //
//     T E T R I S     //
//                     //
// +-+-+-+-+-+-+-+-+-+ //

// Ario Jatmiko <rarioj@yahoo.co.id>
// Tetris - 1.0.0 (2014-03-08)
// License: https://tldrlegal.com/license/mit-license The MIT License
// What is Tetris? http://en.wikipedia.org/wiki/Tetris

var TETRIS = {

  // ========== //
  //   Config   //
  // ========== //
  // All these parameters are configurable.
  config: {
    BlockSize: 25, // Width/height of a single block (in pixel)
    ControlKey: {
      Left: '37', // Move piece left
      Right: '39', // Move piece right
      Down: '40', // Move piece down
      RotateLeft: '65', // Rotate piece counter-clockwise
      RotateRight: '83' // Rotate piece clockwise
    },
    FieldHeight: 22, // Number of rows available in the field (in block)
    FieldWidth: 10, // Number of columns available in the field (in block)
    LevelUpRow: 10, // Number of row(s) must be cleared to get to the next level
    LevelUpSpeed: 50, // Speed increase every level up (in microsecond)
    PieceColor: { // Color of the pieces (in HTML color)
      I: 'red',
      J: 'orange',
      L: 'magenta',
      O: 'blue',
      S: 'lime',
      T: 'olive',
      Z: 'cyan'
    },
    ScoreMultiplier: 10, // Score multiplier
    StartingSpeed: 1000, // Starting interval speed (in microsecond)
    VoidColor: '#fafafa' // Color of a blank/void block (in HTML color)
  },

  // ========= //
  //   State   //
  // ========= //
  // Currently running game states.
  state: {
    shape: {},
    form: [],
    color: 'black',
    drop: false,
    rotate: 0,
    rows: 0,
    score: 0,
    level: 1,
    next: '',
    over: false,
    board: null,
    speed: 0,
    interval: null
  },

  // ========= //
  //   Piece   //
  // ========= //
  // The most difficult and fun bit to develop.
  piece: {
    available: [ 'I', 'J', 'L', 'O', 'S', 'T', 'Z' ],
    type: {
      I: {
        start: [ 3, 0 ],
        shape: [
          [...