[Free script] Online JavaScript tetris game

Started by Xhanch Studio, April 23, 2011, 07:44:21 AM

previous topic - next topic
Go Down

Xhanch Studio

April 23, 2011, 07:44:21 AM Last Edit: April 23, 2011, 08:17:41 AM by Xhanch Studio
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:
Code Select
<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">Xhanch 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="&lt;" id="tetris-keyboard-left"/></div>
                <div class="right"><input type="button" value="&gt;" 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
Best Regards,
Susanto B.Sc
----------------------------------------------------------------------------
Web development services, WordPress plugin and theme development, PSD to XHTML conversion - http://xhanch.com
Read free manga online - http://authrone.com

Go Up