thtml>

<script language="JavaScript">

// The cells of the table
var field = new Array();
var pieces = new Array(7);

var piece_type;
var piece_rot;
var piece_x;
var piece_y;

var gameover;
var clearinglines;
var score;
var level;
var linescleared;
var nextlevel;
var linesclearednow;
var paused;

var timer;

function clearline ( l )
{
  var y,x;

  for(y=l;y>0;y--)
  {
    for(x=0;x<10;x++)
    {
      field[x][y] = field[x][y-1];
    }
  }
  for(x=0;x<10;x++)
  {
    field[x][0] = 0;
  }
  updateimages();
}

function checklines ()
{
  var y,x;

  for(y=19;y>=0;y--)
  {
    for(x=0;x<10;x++)
    {
      if(!field[x][y])
      {
        break;
      }
    }
    if(x==10)
    {
      clearline(y);
      linesclearednow++;
      return true;
    }
  }
  return false;
}

function linesfinishedclearing(n)
{
  switch(n)
  {
    case 1: score = score + 10; break;
    case 2: score = score + 40; break;
    case 3: score = score + 150; break;
    case 4: score = score + 600; break;
    default: break;
  }
  updatescore();
  if(n > 0)
  {
    linescleared += n;
    updatelinescleared();
  }
  if(linescleared > nextlevel)
  {
    while(linescleared > nextlevel)
    {
      nextlevel += 10;
      level++;
    }
    updatenextlevel();
    updatelevel();
  }
}

function rand(number)
{
  return Math.floor(Math.random()*number);
}

function initpieces ()
{
  pieces[0] = new Array("nxxxx"," xn xn xn x","nxxxx"," xn xn xn x");
  pieces[1] = new Array("xxnxx","xxnxx","xxnxx","xxnxx");
  pieces[2] = new Array("xxn xx"," xnxxnx","xxn xx"," xnxxnx");
  pieces[3] = new Array(" xxnxx"," xn xxn  x"," xxnxx"," xn xxn  x");
  pieces[4] = new Array("nxxxnx"," xn xn xx","  xnxxx","xxn xn x");
  pieces[5] = new Array("nxxxn  x"," xxn xn x","xnxxx"," xn xnxx");
  pieces[6] = new Array("nxxxn x"," xn xxn x"," xnxxx"," xnxxn xn");
}

function inbounds ( x, y )
{
  if(x < 0)
    return false;
  if(x >= 10)
    return false;
  if(y >= 20)
    return false;
  return true;
}

function visible ( x, y )
{
  if(x < 0)
    return false;
  if(x >= 10)
    return false;
  if(y < 0)
    return false;
  if(y >= 20)
    return false;
  return true;
}

function setpiece ( type, rot, s, t, val )
{
  var i,name;
  var x,y;

  x = s;
  y = t;

  for(i=0;i<pieces[type][rot].length;i++)
  {
    switch(pieces[type][rot].charAt(i))
    {
      case ' ': x++; break;
      case 'n': y++; x = s; break;
      default:
        if(visible(x,y))
        {
          name = "i" + y + "_" + x;
          field[x][y] = val;
          if(val)
          {
            document.images[name].src = "block.png";
          } else
          {
            document.images[name].src = "empty.png";
          }
        }
        x++;
        break;
    }
  }
}

function wouldfit ( type, rot, s, t )
{
  var i;
  var x,y;

  x = s;
  y = t;

  for(i=0;i<pieces[type][rot].length;i++)
  {
    switch(pieces[type][rot].charAt(i))
    {
      case ' ': x++; break;
      case 'n': y++; x = s; break;
      default:
        if(!inbounds(x,y))
        {
          return false;
        }
        if(visible(x,y) && field[x][y])
        {
          return false;
        }
        x++;
        break;
    }
  }
  return true;
}

function newpiece ()
{
  piece_type = rand(7);
  piece_rot = rand(4);
  piece_x = 4;
  piece_y = -2;

  if(!wouldfit(piece_type, piece_rot, piece_x, piece_y))
    return false;
  
  setpiece(piece_type, piece_rot, piece_x, piece_y, 1);
  return true;
}

function movepiece ( rot, x, y )
{
  var newrot,newx,newy;

  newrot = (piece_rot + rot) % 4;
  newx = (piece_x + x);
  newy = (piece_y + y);

  setpiece(piece_type,piece_rot,piece_x,piece_y,0);
  if(wouldfit(piece_type,newrot,newx,newy))
  {
    piece_rot = newrot;
    piece_x = newx;
    piece_y = newy;
    setpiece(piece_type,piece_rot,piece_x,piece_y,1);
    return true;
  }
  setpiece(piece_type,piece_rot,piece_x,piece_y,1);
  return false;
}

function dogravity ()
{
  if(clearinglines)
  {
    if(!checklines())
    {
      if(clearinglines != 0)
      {
        clearinglines = 0;
        if(linesclearednow > 0)
          linesfinishedclearing(linesclearednow);
      }
      if(!newpiece())
      {
        gameover = 1;
        return;
      }
    }
    timer=setTimeout('dogravity()',800/level);
  } else if(!movepiece(0,0,1))
  {
    clearinglines = 1;
    linesclearednow = 0;
    timer=setTimeout('dogravity()',800/level);
  } else
  {
    timer=setTimeout('dogravity()',800/level);
  }
}

function keydown (evt)
{
  var e = evt? evt : window.event;
  if(!e) return;
  var key = 0;
  if (e.keyCode) { key = e.keyCode; } // for moz/fb, if keyCode==0 use 'which'
  else if (typeof(e.which)!= 'undefined') { key = e.which; } 
  
  if(clearinglines)
  {
    return;
  }

  if (paused) {
    if (key == 80) {
      paused = false;
      timer=setTimeout('dogravity()',800/level);
      updatescore();
    }
    return;
  }  

  switch(key)
  {
    case 74: movepiece(0,-1,0); break;
    case 75: movepiece(1,0,0); break;
    case 76: movepiece(0,1,0); break;
    case 32: while(movepiece(0,0,1)); break;
    case 80:
      paused = true;
      clearTimeout(timer);
      updatescore();
      break;
    default: return;
  }
}

function clearfield ()
{
  var x,y;
  for(x=0;x<10;x++)
  {
    for(y=0;y<20;y++)
    {
      field[x][y] = 0;
    }
  }
}

function initfield ()
{
  var x,y;
  for(x=0;x<10;x++)
  {
    field[x] = new Array();
    for(y=0;y<20;y++)
    {
      field[x][y] = 0;
    }
  }
}

function updateimages ()
{
  var x,y,name;
  
  for(y=0;y<20;y++)
  {
    for(x=0;x<10;x++)
    {
      name = "i" + y + "_" + x;
      if(field[x][y] == 0)
      {
        document.images[name].src = "empty.png";
      } else
      {
        document.images[name].src = "block.png";
      }
    }
  }
}

function updatescore ()
{
  if (paused) {
    s = "" + score + " --- PAUSED";
  } else {
    s = "" + score;
  }
  document.getElementById("score").innerHTML = s;
}

function updatelevel ()
{
  document.getElementById("level").innerHTML = "" + level;
}

function updatelinescleared ()
{
  document.getElementById("linescleared").innerHTML = linescleared;
}

function updatenextlevel ()
{
  document.getElementById("nextlevel").innerHTML = nextlevel;
}

function setstartinglevel()
{
  level = document.getElementsByName("startinglevel")[0].value;
  if(level < 1 || level > 9)
    level = 4;
  return true;
}

function newgame ()
{
  document.getElementsByName("new game")[0].blur();
  if(setstartinglevel())
  {
    score = 0;
    gameover = 0;
    linescleared = 0;
    nextlevel = 10;
    paused = false;
    clearfield();
    newpiece();
    updateimages();
    updatescore();
    updatelinescleared();
    updatelevel();
    updatenextlevel();
    clearTimeout(timer);
    timer=setTimeout('dogravity()',800/level);
  }
}

function init ()
{
  clearinglines = 0;
  document.onkeydown = keydown; 
  initpieces();
  initfield();
  newgame();
}

</script>

<head>
<title>Javascript Tetris</title>
<link rel="stylesheet" type="text/css" href="../home.css" />
<style type="text/css">
	img {
		border: 0;
	}
</style>
</head>
<body bgcolor="white" onLoad="init()">
<h1>Tetris!</h1>

<div id="sectionbox">
<h2>Hints</h2>
<ul>
<li>Controls: <tt>J</tt> = left, <tt>K</tt> = rotate, <tt>L</tt> = right, <tt>space</tt> = drop, <tt>P</tt> = pause.</li>
<li>The usual <a href="http://en.wikipedia.org/wiki/Tetris">Tetris</a> rules: Complete lines to clear them.</li>
<li>If its too fast you can adjust the Starting Level below.</li>
<li>You'll get bonus points for clearing many lines at once.</li>
</ul>
</div>

<div id="sectionbox">
  <h2>The Game</h2>
  <span id="hilight">Score</span>: <span id="score">0</span><br/>
  <span id="hilight">Level</span>: <span id="level">0</span><br/>
  <span id="hilight">Lines Cleared</span>: <span id="linescleared">0</span>/<span id="nextlevel">100</span><br/>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img id="i0_0"></td>
<td><img id="i0_1"></td>
<td><img id="i0_2"></td>
<td><img id="i0_3"></td>
<td><img id="i0_4"></td>
<td><img id="i0_5"></td>
<td><img id="i0_6"></td>
<td><img id="i0_7"></td>
<td><img id="i0_8"></td>
<td><img id="i0_9"></td>
</tr>
<tr>
<td><img id="i1_0"></td>
<td><img id="i1_1"></td>
<td><img id="i1_2"></td>
<td><img id="i1_3"></td>
<td><img id="i1_4"></td>
<td><img id="i1_5"></td>
<td><img id="i1_6"></td>
<td><img id="i1_7"></td>
<td><img id="i1_8"></td>
<td><img id="i1_9"></td>
</tr>
<tr>
<td><img id="i2_0"></td>
<td><img id="i2_1"></td>
<td><img id="i2_2"></td>
<td><img id="i2_3"></td>
<td><img id="i2_4"></td>
<td><img id="i2_5"></td>
<td><img id="i2_6"></td>
<td><img id="i2_7"></td>
<td><img id="i2_8"></td>
<td><img id="i2_9"></td>
</tr>
<tr>
<td><img id="i3_0"></td>
<td><img id="i3_1"></td>
<td><img id="i3_2"></td>
<td><img id="i3_3"></td>
<td><img id="i3_4"></td>
<td><img id="i3_5"></td>
<td><img id="i3_6"></td>
<td><img id="i3_7"></td>
<td><img id="i3_8"></td>
<td><img id="i3_9"></td>
</tr>
<tr>
<td><img id="i4_0"></td>
<td><img id="i4_1"></td>
<td><img id="i4_2"></td>
<td><img id="i4_3"></td>
<td><img id="i4_4"></td>
<td><img id="i4_5"></td>
<td><img id="i4_6"></td>
<td><img id="i4_7"></td>
<td><img id="i4_8"></td>
<td><img id="i4_9"></td>
</tr>
<tr>
<td><img id="i5_0"></td>
<td><img id="i5_1"></td>
<td><img id="i5_2"></td>
<td><img id="i5_3"></td>
<td><img id="i5_4"></td>
<td><img id="i5_5"></td>
<td><img id="i5_6"></td>
<td><img id="i5_7"></td>
<td><img id="i5_8"></td>
<td><img id="i5_9"></td>
</tr>
<tr>
<td><img id="i6_0"></td>
<td><img id="i6_1"></td>
<td><img id="i6_2"></td>
<td><img id="i6_3"></td>
<td><img id="i6_4"></td>
<td><img id="i6_5"></td>
<td><img id="i6_6"></td>
<td><img id="i6_7"></td>
<td><img id="i6_8"></td>
<td><img id="i6_9"></td>
</tr>
<tr>
<td><img id="i7_0"></td>
<td><img id="i7_1"></td>
<td><img id="i7_2"></td>
<td><img id="i7_3"></td>
<td><img id="i7_4"></td>
<td><img id="i7_5"></td>
<td><img id="i7_6"></td>
<td><img id="i7_7"></td>
<td><img id="i7_8"></td>
<td><img id="i7_9"></td>
</tr>
<tr>
<td><img id="i8_0"></td>
<td><img id="i8_1"></td>
<td><img id="i8_2"></td>
<td><img id="i8_3"></td>
<td><img id="i8_4"></td>
<td><img id="i8_5"></td>
<td><img id="i8_6"></td>
<td><img id="i8_7"></td>
<td><img id="i8_8"></td>
<td><img id="i8_9"></td>
</tr>
<tr>
<td><img id="i9_0"></td>
<td><img id="i9_1"></td>
<td><img id="i9_2"></td>
<td><img id="i9_3"></td>
<td><img id="i9_4"></td>
<td><img id="i9_5"></td>
<td><img id="i9_6"></td>
<td><img id="i9_7"></td>
<td><img id="i9_8"></td>
<td><img id="i9_9"></td>
</tr>
<tr>
<td><img id="i10_0"></td>
<td><img id="i10_1"></td>
<td><img id="i10_2"></td>
<td><img id="i10_3"></td>
<td><img id="i10_4"></td>
<td><img id="i10_5"></td>
<td><img id="i10_6"></td>
<td><img id="i10_7"></td>
<td><img id="i10_8"></td>
<td><img id="i10_9"></td>
</tr>
<tr>
<td><img id="i11_0"></td>
<td><img id="i11_1"></td>
<td><img id="i11_2"></td>
<td><img id="i11_3"></td>
<td><img id="i11_4"></td>
<td><img id="i11_5"></td>
<td><img id="i11_6"></td>
<td><img id="i11_7"></td>
<td><img id="i11_8"></td>
<td><img id="i11_9"></td>
</tr>
<tr>
<td><img id="i12_0"></td>
<td><img id="i12_1"></td>
<td><img id="i12_2"></td>
<td><img id="i12_3"></td>
<td><img id="i12_4"></td>
<td><img id="i12_5"></td>
<td><img id="i12_6"></td>
<td><img id="i12_7"></td>
<td><img id="i12_8"></td>
<td><img id="i12_9"></td>
</tr>
<tr>
<td><img id="i13_0"></td>
<td><img id="i13_1"></td>
<td><img id="i13_2"></td>
<td><img id="i13_3"></td>
<td><img id="i13_4"></td>
<td><img id="i13_5"></td>
<td><img id="i13_6"></td>
<td><img id="i13_7"></td>
<td><img id="i13_8"></td>
<td><img id="i13_9"></td>
</tr>
<tr>
<td><img id="i14_0"></td>
<td><img id="i14_1"></td>
<td><img id="i14_2"></td>
<td><img id="i14_3"></td>
<td><img id="i14_4"></td>
<td><img id="i14_5"></td>
<td><img id="i14_6"></td>
<td><img id="i14_7"></td>
<td><img id="i14_8"></td>
<td><img id="i14_9"></td>
</tr>
<tr>
<td><img id="i15_0"></td>
<td><img id="i15_1"></td>
<td><img id="i15_2"></td>
<td><img id="i15_3"></td>
<td><img id="i15_4"></td>
<td><img id="i15_5"></td>
<td><img id="i15_6"></td>
<td><img id="i15_7"></td>
<td><img id="i15_8"></td>
<td><img id="i15_9"></td>
</tr>
<tr>
<td><img id="i16_0"></td>
<td><img id="i16_1"></td>
<td><img id="i16_2"></td>
<td><img id="i16_3"></td>
<td><img id="i16_4"></td>
<td><img id="i16_5"></td>
<td><img id="i16_6"></td>
<td><img id="i16_7"></td>
<td><img id="i16_8"></td>
<td><img id="i16_9"></td>
</tr>
<tr>
<td><img id="i17_0"></td>
<td><img id="i17_1"></td>
<td><img id="i17_2"></td>
<td><img id="i17_3"></td>
<td><img id="i17_4"></td>
<td><img id="i17_5"></td>
<td><img id="i17_6"></td>
<td><img id="i17_7"></td>
<td><img id="i17_8"></td>
<td><img id="i17_9"></td>
</tr>
<tr>
<td><img id="i18_0"></td>
<td><img id="i18_1"></td>
<td><img id="i18_2"></td>
<td><img id="i18_3"></td>
<td><img id="i18_4"></td>
<td><img id="i18_5"></td>
<td><img id="i18_6"></td>
<td><img id="i18_7"></td>
<td><img id="i18_8"></td>
<td><img id="i18_9"></td>
</tr>
<tr>
<td><img id="i19_0"></td>
<td><img id="i19_1"></td>
<td><img id="i19_2"></td>
<td><img id="i19_3"></td>
<td><img id="i19_4"></td>
<td><img id="i19_5"></td>
<td><img id="i19_6"></td>
<td><img id="i19_7"></td>
<td><img id="i19_8"></td>
<td><img id="i19_9"></td>
</tr>

</table>
<br />
<h2>Settings</h2>
<form name="panel"> <span id="hilight">Starting level</span>: <input name="startinglevel" type="text" value="4" size="1"/>
  <input type="button" onclick="newgame ()" value="New Game" name="new game" /> <br/>
</form>

</div>

</body>
</html>