Okay, now let’s proceed with our Tetris game. In the first step we have created a JavaScript file. Now let’s make it look properly. Create an HTML file, call it whatever you like. Use the UTF-8 charset to avoid charset problems. The file will contain the following BODY content:
<table cellspacing=”0″ cellpadding=”0″ width=”100%” height=”100%”><tr><td valign=”middle”>
<div id=”tetris”>
<div>
<h1>JsTetris 1.1.0</h1>
<div>
<div><input type=”button” value=”New Game” id=”tetris-menu-start” /></div>
<div><input type=”button” value=”Reset” id=”tetris-menu-reset” /></div>
<div><input type=”button” value=”Help” id=”tetris-menu-help” /></div>
<div><input type=”button” value=”Highscores” id=”tetris-menu-highscores” /></div>
</div>
<div>
<div><input type=”button” value=”^” id=”tetris-keyboard-up” /></div>
<div><input type=”button” value=”v” id=”tetris-keyboard-down” /></div>
<div><input type=”button” value=”<” id=”tetris-keyboard-left” /></div>
<div><input type=”button” value=”>” id=”tetris-keyboard-right” /></div>
</div>
<div id=”tetris-nextpuzzle”></div>
<div id=”tetris-gameover”>Game Over</div>
<div>
<table cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Level:</td>
<td><span id=”tetris-stats-level”>1</span></td>
</tr>
<tr>
<td>Score:</td>
<td><span id=”tetris-stats-score”>0</span></td>
</tr>
<tr>
<td>Lines:</td>
<td><span id=”tetris-stats-lines”>0</span></td>
</tr>
<tr>
<td>APM:</td>
<td><span id=”tetris-stats-apm”>0</span></td>
</tr>
<tr>
<td>Time:</td>
<td><span id=”tetris-stats-time”>0</span></td>
</tr>
</table>
</div>
</div>
<div id=”tetris-area”></div>
<div id=”tetris-help”>
<div>
Help <span id=”tetris-help-close”>x</span>
</div>
<div>
<b>Controllers:</b> <br />
up – rotate <br />
down – move down <br />
left – move left <br />
right – move right <br />
space – fall to the bottom <br />
n – new game <br />
r – reset <br />
<br />
<b>Rules:</b> <br />
1) Puzzle speed = 80+700/level miliseconds, the smaller value the faster puzzle falls <br />
2) If puzzles created in current level >= 10+level*2 then increase level <br />
3) After puzzle falling score is increased by 1000*level*linesRemoved <br />
4) Each “down” action increases score by 5+level (pressing space counts as multiple down actions)
</div>
</div>
<div id=”tetris-highscores”>
<div>
Highscores <span id=”tetris-highscores-close”>x</span>
</div>
<div>
<div id=”tetris-highscores-content”></div>
<br />
Note: these scores are kept in cookies, they are only visible to your computer, other players that visit this page see their own scores.
</div>
</div>
</div></td></tr></table>
<script type=”text/javascript”>
var tetris = new Tetris();
tetris.unit = 14;
tetris.areaX = 12;
tetris.areaY = 22;
</script>
Now, add the following lines to the <HEAD> section of your HTML file:
<script type=”text/javascript” src=”JsTetris.js”></script>
<link rel=”stylesheet” href=”JsTetris.css” type=”text/css” media=”screen” />
The last step, create a CSS file, JsTetris.css, and fill it with the following lines:
html,body{height:100%;margin:0;padding:0}
body{background:#E1D4C0}
body,table{color:#826C55;font:11px tahoma}
#tetris{background:#fff;border:1px solid #BAA68E;height:310px;margin:0 auto;position:relative;width:300px}
#tetris .left{background:#F5EDE3;height:100%;left:0;position:absolute;top:0;width:130px}
#tetris .left h1{font-size:11px;margin-bottom:10px;margin-top:10px;text-align:center}
#tetris .left h1 a{color:#36C;text-decoration:none}
#tetris .left h1 a:hover{color:#F60;text-decoration:none}
#tetris .left .menu{text-align:center}
#tetris .left input{background:#EAE0D1;color:#333;font:10px tahoma;text-transform:uppercase}
#tetris .left .menu input{width:90px}
#tetris .left .keyboard{display:none;height:55px;left:32px;overflow:visible;position:absolute;top:163px;width:85px}
#tetris .left .keyboard input{font:11px tahoma;height:25px;padding-bottom:2px;text-transform:none;width:25px}
* html #tetris .left .keyboard input{padding-left:1px}
#tetris .left .keyboard .up{height:30px;left:30px;position:absolute;top:0;width:30px}
#tetris .left .keyboard .up input{font:15px tahoma;padding-top:3px}
#tetris .left .keyboard .down{height:30px;left:30px;position:absolute;top:30px;width:30px}
#tetris .left .keyboard .down input{font:14px tahoma}
#tetris .left .keyboard .left{height:30px;left:0;position:absolute;top:30px;width:30px}
#tetris .left .keyboard .right{height:30px;left:60px;position:absolute;top:30px;width:30px}
#tetris-gameover{display:none;font-weight:700;position:absolute;text-align:center;top:50%;width:100%}
#tetris-nextpuzzle{background:#fff;display:none;left:35%;overflow:visible;position:absolute;top:49%}
#tetris .left .stats{bottom:10px;left:35px;position:absolute}
#tetris .stats td{padding-bottom:1px}
#tetris-area{background:#FFF;height:308px;left:131px;overflow:hidden;position:absolute;top:1px;width:168px}
#tetris .block0,#tetris .block1,#tetris .block2,#tetris .block3,#tetris .block4,#tetris .block5,#tetris .block6{border:.5px solid #fff;height:13px;position:absolute;width:13px}
#tetris .block0,#tetris .block1{background:#69F}
#tetris .block2,#tetris .block3{background:#F60}
#tetris .block4{background:#FFAC1C}
#tetris .block5{background:#BAA68E}
#tetris .block6{background:red}
#tetris .window{background:#EFE8DE;display:none;height:308px;left:131px;position:absolute;top:1px;width:168px;z-index:5}
#tetris .window .top{background:#EAE0D1;border-bottom:1px solid #fff;color:#666;font:10px tahoma;height:20px;letter-spacing:1px;line-height:20px;position:relative;text-indent:10px;vertical-align:middle}
#tetris .window .top .close{background:#EAE0D1;border-left:1px solid #fff;cursor:pointer;font:11px verdana;font-weight:700;height:20px;line-height:19px;position:absolute;right:0;text-indent:7px;top:0;width:21px}
#tetris .window .top .close:hover{background:#EFE8DE}
#tetris .window .content{font:10px tahoma;margin:10px}
#tetris .window .content table{font:10px tahoma}
#tetris .stats .level,#tetris .stats .time,#tetris .stats .apm,#tetris .stats .lines,#tetris .stats .score{padding-right:10px;text-align:right}
#tetris-stats-level,#tetris-stats-time,#tetris-stats-apm,#tetris-stats-lines,#tetris-stats-score{font-weight:700}
Almost ready. Now save all the 3 files to one folder and open the HTML file in your browser. You can now the legendary Tetris. Enjoy!
