Tetris

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

by jarosciak

HTML

<div id="control">
	<h1>XENTRIS</h1>
	<p><strong>Xenians, focus your mouse on the playing field!</strong></p>
	<p><strong>Left</strong> ⇦<br>
  <strong>Down</strong> ⇩
  <br><strong>Right</strong> ⇨ </p>
	<p><strong>A</strong> to rotate counter-clockwise ↺ <br>
  <strong>S</strong> to rotate clockwise ↻.</p>
</div>

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

CSS

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

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

JavaScript

var TETRIS={config:{BlockSize:25,ControlKey:{Left:"37",Right:"39",Down:"40",RotateLeft:"65",RotateRight:"83"},FieldHeight:22,FieldWidth:10,LevelUpRow:10,LevelUpSpeed:50,PieceColor:{I:"red",J:"orange",L:"magenta",O:"blue",S:"lime",T:"olive",Z:"cyan"},ScoreMultiplier:10,StartingSpeed:1e3,VoidColor:"#fafafa"},state:{shape:{},form:[],color:"black",drop:!1,rotate:0,rows:0,score:0,level:1,next:"",over:!1,board:null,speed:0,interval:null},piece:{available:["I","J","L","O","S","T","Z"],type:{I:{start:[3,0],shape:[[[0,0],[1,0],[2,0],[3,0]],[[0,0],[0,1],[0,2],[0,3]]]},J:{start:[4,0],shape:[[[0,0],[0,1],[1,1],[2,1]],[[2,0],[1,0],[1,1],[1,2]],[[2,2],[2,1],[1,1],[0,1]],[[0,2],[1,2],[1,1],[1,0]]]},L:{start:[4,0],shape:[[[2,0],[2,1],[1,1],[0,1]],[[2,2],[1,2],[1,1],[1,0]],[[0,2],[0,1],[1,1],[2,1]],[[0,0],[1,0],[1,1],[1,2]]]},O:{start:[4,0],shape:[[[0,0],[1,0],[0,1],[1,1]]]},S:{start:[4,0],shape:[[[2,0],[1,0],[1,1],[0,1]],[[0,0],[0,1],[1,1],[1,2]]]},T:{start:[4,0],shape:[[[1,0],[0,1],[1,1],[2,1]],[[2,1],[1,0],[1,1],[1,2]],[[1,2],[2,1],[1,1],[0,1]],[[0,1],[1,2],[1,1],[1,0]]]},Z:{start:[4,0],shape:[[[0,0],[1,0],[1,1],[2,1]],[[2,0],[2,1],[1,1],[1,2]]]}}},play:function(e,t){for(var r in t=t||{},$T.config)t.hasOwnProperty(r)&&($T.config[r]=t[r]);$T.state.color=$T.config.VoidColor,$T.state.speed=$T.config.StartingSpeed,document.onkeydown=function(e){e=e||window.event,$T.fn.keyboardAction(e.keyCode,"event")},$T.fn.renderField(e),$T.fn.renderNextPiece(),$T.state.interval=setInterval($T.fn.stepInterval,$T.state.speed)},fn:{mod:function(e,t){return(e%t+t)%t},renderField:function(e){var t,r,o=document.getElementById(e);for(t=0,o.style.width=$T.config.BlockSize*$T.config.FieldWidth+"px",o.style.height=$T.config.BlockSize*$T.config.FieldHeight+"px",o.style.border="1px solid black";t<$T.config.FieldHeight;t++){var n=document.createElement("div");for(n.setAttribute("id","row-"+t),n.setAttribute("class","field-row"),r=0;r<$T.config.FieldWidth;r++){var...