Modify tettadom

  1. Structures and Copyrights

    Path and filename Function Copyright
    tetta.css CSS file of this website* Public domain
    tettadom.css tettadom's CSS file Public domain
    gpl.html GPL's copyright webpage* FSF
    index.html Homepage of this website* Public domain
    favicon.ico Icon of tetta* Public domain
    default.js JavaScript file of tettadom's default values Public domain
    tettadom.js tettadom's JavaScript file GPL
    en/ English subdirectory* Public domain
    en/faq.html FAQ of tetta and tettadom Public domain
    en/join.html Develop tetta Games* Public domain
    en/help.html Help on tettadom Public domain
    en/modify.html This webpage Public domain
    en/rules.html Rules and Features of tetta* Public domain
    en/squares.html Squares in tetta* Public domain
    en/tettadom.html tettadom game Public domain
    en/tips.html Tips on tetta* Public domain
    en/versions.html Versions of tettadom Public domain
    en/language.js JavaScript file of tettadom's default language values Public domain
    images/ Subdirectory for images* Public domain

    * Not only for tettadom, can be used in other tetta softwares, too.

  2. Structure of tettadom.html

    <?xml version="1.0" encoding="UTF-8"?>
    Declaration of an XML 1.0 document
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    Declaration of XHTML 1.1 document type
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    HTML document
    <head>
    Header
    <link href="../tettadom.css" rel="stylesheet" title="tettadom" type="text/css">
    Link to the CSS file
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    MIME's type and character encoding
    <title>
    Title
    tettadom
    Contents
    <body>
    Body
    <table id="tetta">
    Game's table
    <tr>
    In compliance with the specification of XHTML 1.1
    <td>
    In compliance with the specification of XHTML 1.1
    <p>
    Button controls line, unnecessary
    <input id="start" type="button">
    Move to the Start
    <input id="fastback" type="button">
    Fast Backward
    <input id="back" type="button">
    Move Backward
    <input id="memorize" type="button">
    Memorize
    <input id="fore" type="button">
    Move Forward
    <input id="fastfore" type="button">
    Fast Forward
    <input id="end" type="button">
    Move to the End
    <input id="moves" type="button">
    Moves - Replay Game
    <input id="time" type="button">
    Elapsed Time - Pause/Resume Game
    <input id="new" type="button">
    New Game
    <input id="save" type="button">
    Save Game
    <input id="about" type="button">
    About tettadom
    <p>
    Menu controls line, unnecessary
    <label>
    Order of the Square, unnecessary
    Order
    Label for the menu
    <select id="order">
    Menu of single order
    <option>
    In compliance with the specification of XHTML 1.1
    00
    Two digits, for correct display
    <label>
    Rules of the Game, unnecessary
    Rules
    Label for the menu
    <select id="rules">
    Menu of multiple rules
    <option>
    Rule 1
    1 Column-Row
    Contents
    <option>
    Rule 2
    2 Column/Row-Latin
    Contents
    <option>
    Rule 3
    3 Graeco-Latin
    Contents
    <table id="record">
    Record's table
    <tr>
    Row of headers
    <th>
    Header of the first row
    Records
    Contents
    <th colspan="3">
    Header of the 2nd-4th headers
    Completes
    Contents
    <th colspan="3">
    Header of the 5th-7th headers
    Average Moves
    Contents
    <th colspan="3">
    Header of the 8th-10th headers
    Average Time
    Contents
    <tr>
    Row of headers
    <th>
    Header of the second row
    Rules
    Contents
    <script src="../default.js" type="text/javascript">
    Load default.js
    <script src="../language.js" type="text/javascript">
    Load language.js
    <script src="../tettadom.js" type="text/javascript">
    Load tettadom.js, this element must come after other elements
    <p>
    link line, unnecessary
    <a href="help.html">
    Help with tettadom
    Help
    Contents
    <a href="faq.html">
    FAQ of tetta and tettadom
    FAQ
    Contents
    <a href="rules.html">
    Rules and Features of tetta
    Rules
    Contents
    <a href="squares.html">
    Squares in tetta
    Squares
    Contents
    <a href="tips.html">
    Tips on tetta
    Tips
    Contents
    <a href="../index.html">
    the Official Website of tetta
    Home
    Contents
    <a href="http://sourceforge.net/project/showfiles.php?group_id=115228">
    Download tetta Games
    Download!
    Contents
    <a href="versions.html">
    Versions of tettadom
    Versions
    Contents
    <a href="modify.html">
    Modify tettadom
    Modify!
    Contents
    <a href="http://sourceforge.net/projects/tetta/">
    tetta - a square puzzle game
    Project
    Contents
    <a href="join.html">
    Develop tetta Games
    Join!
    Contents
    <p>
    motto line, unnecessary
    <q>
    tetta's motto
    A playful game has only one reason, while a boring game has hundreds.
    Contents
    <p>
    SourceForge's logo button line, for demand of SourceForge
    <a href="http://sourceforge.net">
    SourceForge's link
    <img alt="SourceForge.net Logo" height="62" src="http://sflogo.sourceforge.net/sflogo.php?group_id=115228&type=5" width="210" />
    SourceForge's logo button
    Remark
    • Except tables and menus, the above elements is unrelated to order(except the <script> element loading tettadom.js).
    • tettadom.js controls only elements with attributes id's, so both link line and motto line are unnecessary, but preservation of all is recommended.
    • Attributes titles are all unnecessary(so not shown above, marked as element's explanation), but preservation of all is recommended.
    • Elements <label> are all unnecessary, but preservation of all is recommended.

  3. Structure of tettadom.js

    Functions
    toradix(number,digits,radix)
    Transform the non-negative "number" into a string consisting of at most "digits" digits in the base "radix", preceded with zeros.
    showtime()
    The event handler of timer, check if over the time limit or not, if so, display the warning message and then replay the game(replay()); or display the time in the element with the attribute id as time.
    issuccess()
    Examine if the square completed under the rules. Returns: 1 rule 1, image 1; 2 rule 1, image 2; 4 rule 2, image 3; 8 rule 2, image 4; 16 rule 2, image 5; 32 rule 2, image 6; 64 rule 3, image 7.
    showmoves()
    Display the moves in the element with the attribute id as moves, and setup the states of buttons.
    showtetta()
    Display the game square(setup classes) and the moves(showmoves()) in the table element with the attribute id as tetta.
    swap(k,k0)
    Swap the two cells cells[k](the selected cell), cells[k0](the black cell), and display the moves.
    move()
    The event handler of single clicking on a cell. If click on the black cell, move a step backward(back()); or check if over the moves limit or not, if so, display the warning message; or swap the single clicked cell and the black cell and examine if the square completed under the rules(issuccess()), If so, update the cookie record and the table element with attribute id as record, and display the congratulation message.
    fore()
    The event handler of single clicking on the button with the attribute id as fore, move a step forward, and display the moves(showmoves()).
    back()
    The event handler of single clicking on the button with the attribute id as back, move a step backward, and display the moves(showmoves()).
    memorize()
    The event handler of single clicking on the button with the attribute id as memorize, memorize the present step.
    fastback()
    The event handler of single clicking on the button with the attribute id as fastback, move to the previous memorized step, and display the moves(showmoves()).
    fastfore()
    The event handler of single clicking on the button with the attribute id as fastfore, move to the next memorized step, and display the moves(showmoves()).
    start()
    The event handler of single clicking on the button with the attribute id as start, move to the start, and display the moves(showmoves()).
    end()
    The event handler of single clicking on the button with the attribute id as end, move to the end, and display the moves(showmoves()).
    replay()
    The event handler of single clicking on the button with the attribute id as moves, replay the game.
    changerules()
    The event handler of changing a option of the menu with the attribute id as rules, change the rules of game, and replay the game(replay()).
    resume()
    The event handler of single clicking on the button with the attribute id as time, pause or resme the game.
    createtetta()
    Create a new game square in the table element with the attribute id as tetta, but not setup the classes of elements in cells.
    newgame()
    The event handler of single clicking on the button with the attribute id as new, play a new game, but not create a new game square(createtetta()).
    newtetta()
    Create a new game square(createtetta()), and play the new game(newgame()).
    changeorder()
    The event handler of changing a option of the menu with the attribute id as order, change the order of square(from 3), and create a new game square, then play the new game(newtetta()).
    load()
    Nonexistent function, executed automatically as soon as possible tettadom.js loaded. The event handler of setting up all elements, and setting up the strings displayed on buttons; removing the option(00) of the menu with the attribute id as order, and adding the options 3 to 16; if no cookie record, setting all records to zeros, or loading the records, then display all records; if no cookie tetta, no changing the default values of all game variables, or loading game variables, then display the game square; setting up the event handler of timer, with a period of 1 second; setting up options of the menu with the attribute id as rules; setting up options of the menu with the attribute id as order.
    save()
    The event handler of single clicking on the button with the attribute id as save, save the present progress of game, but not create a new game square(createtetta()).
    about()
    Display tettadom's copyright message.
    Global varibles
    cells[256]
    Cells, with at most 16 * 16 = 256 elements in total.
    completes[98]
    Completes, with at most 7 * 14 = 98 elements in total.
    maxmemory
    Maximum of memorized steps, at most the square of order * 4 - 1.
    maxmoves
    Maximum of moves, at most the square of order * 4 - 1.
    memory
    The present memorized step, at most the square of order * 4 - 1.
    moves
    The present moves, at most the square of order * 4 - 1.
    pause
    Boolean value of pause presently, true represents pause, false represents resume.
    steps[1024]
    Memorized steps, with at most the square of order * 4 elements in total(steps[0] represents nothing).
    success
    The present completed rule, 0 represents incomplete, the other integers: 1 rule 1, image 1; 2 rule 1, image 2; 4 rule 2, image 3; 8 rule 2, image 4; 16 rule 2, image 5; 32 rule 2, image 6; 64 rule 3, image 7.
    time
    The present elased seconds.
    totalmoves[98]
    Total moves, with at most 7 * 14 = 98 elements in total.
    totaltime[98]
    Total elapsed seconds, with at most 7 * 14 = 98 elements in total.
    zeros[1024]
    Moved cells, with at most the square of order * 4 elements in total(zeros[0] represents the black cell in the square from the start).
    _tetta
    Table of game.
    _time
    Button for elapsed time - pause/resume game.
    _moves
    Button for moves - replay game.
    _start
    Button for moving to the start.
    _fastback
    Button for fast backward.
    _back
    Button for moving backward.
    _memorize
    Button for memorizing.
    _fore
    Button for moving forward.
    _fastfore
    Button for fast forward.
    _end
    Button for moving to the end.
    _order
    Menu of order of the square.
    _rules
    Menu of rules of the game.
    _record
    Table of records.
    The following are all variables in default.js , too.
    order
    Order of the square.
    rules
    Rules of the game, Added together from the following numbers: 1 rule 1, image 1; 2 rule 1, image 2; 4 rule 2, image 3; 8 rule 2, image 4; 16 rule 2, image 5; 32 rule 2, image 6; 64 rule 3, image 7(as 127 = 1 + 2 + 4 + 8 + 16 + 32 + 64, representing completion by any rule).
    expiretetta
    Expiration time interval for cookie tetta(milliseconds).
    expirerecord
    Expiration time interval for cookie record(milliseconds).
    top
    The above graph in cells of game, including blanks.
    bottom
    The below graph in cells of game, including blanks.
    _start_
    Button graph for moving to the start.
    _fastback_
    Button graph for fast backward.
    _back_
    Button graph for moving backward.
    _memorize_
    Button graph for memorizing.
    _fore_
    Button graph for moving forward.
    _fastfore_
    Button graph for fast forward.
    _end_
    Button graph for moving to the end.
    _new_
    Button graph for new game.
    _save_
    Button graph for saving game.
    _about_
    Button graph for about tettadom.
    The following are all variables in language.js , too.
    congrat
    Message for congratulations on completion of a sqaure.
    toomany
    Warning message for over the moves limit.
    timeup
    Warning message for over the time limit.

  4. Structure of tettadom.css

    dt
    Used in help.html
    #record, #tetta
    Tables of game and records.
    #record th, #record td
    Cells in the table of records.
    #tetta
    Table of game.
    #tetta td
    Cells in the table of game.
    #tetta td:hover
    Mouse pointer pointing to a cell in the table of game.
    .c0 to .cf
    Classes of the cell graphs of game.

  5. Modify tettadom

    The license of tettadom is for everyone to modify it for oneself conveniently. For modification, you had better understand the principles of HTML, CSS, JavaScript, DOM and their relationship. The following is the introduction to the methods of modification(from easy to difficult):

    1. If you want modify the appearences of game, to modify only tettadom.css is sufficient.
    2. If you want modify the default values of game, to modify only default.js or language.js is sufficient. Of them, default.js is unrelated to the language, language.js is related to the language. The distinction between them is not fixed, you can do at will.
    3. If you want modify the HTML file tettadom.html of game, please pay attention to that it is close related to tettadom.js , it cannot be modified at will. Please research the structures of them and their relationship carefully.
    4. If you want modify the JavaScript program tettadom.js of game, please pay attention to that it is close related to tettadom.html , it cannot be modified at will. Please research the structures of them and their relationship carefully. Also, never forget, tettadom.js under GPL license, when you distribute the modification, please obey the regulation.

  6. Translate tettadom

  7. Embed tettadom

    Add <iframe height="640" src="http://tetta.sourceforge.net/en/tettadom.html" width="576"></iframe> to the body of your webpage. The attributes hegith and width can be adjusted.

Play! Help FAQ Rules Squares Tips Home Download! Versions Project Join!

A playful game has only one reason, while a boring game has hundreds.

SourceForge.net Logo