Forum
Notifications
Clear all
Topic starter
Tetris is a classical and well-known game. Tetris is discovered in 1984 (in the same era as Mario Bros). So far, tetris has been released over 125 millions copies, tetris presents on all gaming platforms: PC, console, web-based environment, mobile, etc.
It's possible to embed a tetris game to your website easily. This script will include these features:
- Original tetris blocks
- Level systems
- Keyboard-based input method/navigation
- Scoring system
- High scores will be stored on cookies
- Other complementatry stas (play time, APM, lines)
Demo
You can find the demo here at
http://xhanch.com/javascript-game-of-tetris/
Source code
First, download js.js and css.css.
Source of the HTML codes:
<html xmlns=" http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JsTetris - Javascript tetris</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" lang="en" content="javascript,tetris,game"/>
<meta name="description" lang="en" content="JsTetris - Javascript tetris"/>
<link rel="stylesheet" type="text/css" href=""css.css"" />
<script type="text/javascript" src=""js.js"></script>"
</head>
<body>
<br/>
Downloaded from: <a href="" http://forum.xhanch.com/index.php/topic,471.0.html">Xhanc h" Forum</a><br/><br/>
<div id="tetris">
<div class="left">
<h1>JsTetris 1.1.0</h1>
<div class="menu">
<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 class="keyboard">
<div class="up"><input type="button" value="^" id="tetris-keyboard-up"/></div>
<div class="down"><input type="button" value="v" id="tetris-keyboard-down"/></div>
<div class="left"><input type="button" value="<" id="tetris-keyboard-left"/></div>
<div class="right"><input type="button" value=">" id="tetris-keyboard-right"/></div>
</div>
<div id="tetris-nextpuzzle"></div>
<div id="tetris-gameover">Game Over</div>
<div class="stats">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="level">Level:</td>
<td><span id="tetris-stats-level">1</span></td>
</tr>
<tr>
<td class="score">Score:</td>
<td><span id="tetris-stats-score">0</span></td>
</tr>
<tr>
<td class="lines">Lines:</td>
<td><span id="tetris-stats-lines">0</span></td>
</tr>
<tr>
<td class="apm">APM:</td>
<td><span id="tetris-stats-apm">0</span></td>
</tr>
<tr>
<td class="time">Time:</td>
<td><span id="tetris-stats-time">0</span></td>
</tr>
</table>
</div>
</div>
<div id="tetris-area"></div>
<div id="tetris-help" class="window">
<div class="top">Help <span id="tetris-help-close" class="close">x</span></div>
<div class="content">
<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" class="window">
<div class="top">Highscores <span id="tetris-highscores-close" class="close">x</span></div>
<div class="content">
<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>
<script type="text/javascript">
var tetris = new Tetris();
tetris.unit = 14;
tetris.areaX = 12;
tetris.areaY = 22;
</script>
</body>
</html>
Download
The script can be downloaded at
http://xhanch.com/gallery/js-project/javascript-tetris/javascript-tetris.zip
Posted : 23/04/2011 1:44 pm