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!
I’m simply amazed by how different your article is on this topic. You have turned my ways of thinking around on many points. Thanks for this informative and engaging content.