“Rearrange Letters” Documentation by “demonisblack” v2.6

“Rearrange Letters”

Created: 2/9/2015
By: demonisblack
Email: demonisblack@gmail.com

Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Introduction
  2. Getting Started
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. Game Functions
  7. Game Assets
  8. Supporting Other Languages
  9. Build-In Editor Tool
  10. Save XML with password
  11. Compatibility
  12. Sources and Credits
  13. Changelog

A) Introduction - top

Rearrange Letters is a HTML5 game where you can arrange the letters and make the right word by given description as a clue.

The ZIP package contains the game with 1024x768 resolution that scales proportionally to fit current screen device.

How To Play:
1. Use finger or mouse to drag any letters
2. Dragging the letter can move around
3. Release the letter it will rearrange the letters in order

List of types of games:

B) Getting Started - top

To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.

You need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.

        <!-- for Facebook -->
        <meta property="og:image" content="[GAME_URL]/share.jpg" />
        <meta property="og:url" content="[GAME_URL]" />
        
        <!-- for Twitter -->
        <meta name="twitter:image" content="[GAME_URL]/share.jpg" />

You can easily customize game text and settings in game.js file 

        var loadingText = 'LOADING...'; //text for loading xml

        var logoWordParagraph1 = 'rearrange'; //text for logo paragraph 1
        var logoWordParagraph2 = 'letters'; //text for logo paragraph 2
        //Note all letters enter in logo must exist in letters_arr array list else it will stop the game
        
        var startButtonText = 'TAP TO BEGIN'; //text for start button
        var revealText = 'REVEAL ANSWER'; //text for reveal answer button
        var showDescription = true; //show/hide description
        var showRevealButton = true; // show/hide reveal button
        var revealTimer = 30; //timer to show reveal answer button, default is 30 sec
        
        var categoryPage = true; //show/hide category select page
        var categoryAllOption = true; //add ALL category select option
        var categoryText = 'CHOOSE CATEGORY'; //text for category page
        var categoryAllText = 'ALL'; //text for all category select option
        
        var countdownTimer = 0; //default 0 for normal timer, set more than 0 for countdown timer (in sec);
        var resultTitleText = 'BEST TIME'; //text for result page title
        var resultText = 'YOU SOLVE [NUMBER] WORDS.'; //text for result page, [NUMBER] will replace with total solve words (countdown timer only)
        var replayButtonText = 'TRY AGAIN'; //text for replay button
        
        var letterSpacing = 20; //spacing between letters
        var letterShadowY = 15; //letter shadow distance
        var letterDragScale = .3; //letter scale while dragging
        var letterDragShadowY = 40; //letter shadow distance while dragging
        
        var playBackgroundMusic = false; //play background music
        var autoPlayDescAudio = false; //auto play description audio
        var playAnswerAudio = true; //play  answer audio when answer is correct or reveal answer
        var showAudioDescIcon = true; //show/hide description audio icon
        
        //Social share, [SCORE] will replace with game score
        var shareText ='SHARE IT NOW'; //text for share instruction
        var shareTitle = 'Highscore on Rearrange Letters is [SCORE]';//social share score title
        var shareMessage = '[SCORE] is mine new highscore on Rearrange Letters! Try it now!'; //social share score message
        
        var limitWords = 0; //limit the amount of words, default 0 to disable

The sound can be easily disabled to avoid compatibility issues in sound.js file: 

        var enableMobileSound = true;

You can easily customize the answer and description in words.xml file: 

        <?xml version="1.0" encoding="UTF-8"?>
        <words>
            <item>
                <answer>cold</answer>
                <description><![CDATA[ What can you catch but not throw? ]]></description>
                <category>riddle</category>
                <audioAnswer>assets/sounds/word/cold.ogg</audioAnswer>
                <audioDesc>assets/sounds/word/cold.ogg</audioDesc>
                <imageDesc>assets/pictures/banana.png</imageDesc>
            </item>
        </words>

Some tips to customize words.xml:

Options below is optional:

If you wish to change the game to countdown mode, change countdownTimer to any second.

        var countdownTimer = 60;
        var resultTitleText = 'BEST SCORE';
        var resultText = 'YOU SOLVE [NUMBER] WORDS.';

If you wish to swtich to other languages, check out Supporting Other Languages section.

If you wish to customize the words with build-in tool, check out Build-In Editor Tool section.

C) HTML Structure - top

The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()

        <!-- PERCENT LOADER START-->
        <div id="mainLoader">0</div>
        <!-- PERCENT LOADER END-->

This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.

        <!-- BROWSER NOT SUPPORT START-->
        <div id="notSupportHolder">
            <div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
        </div>
        <!-- BROWSER NOT SUPPORT END-->

Device rotate instruction page when calls the function checkMobileOrientation(). It shows rotate instruction when device is in portrait view.

        <!-- ROTATE INSTRUCTION START-->
        <div id="rotateHolder">
            <div class="mobileRotate">
                    <div class="rotateDesc">Rotate your device <br/>to landscape</div>
            </div>
        </div>
        <!-- ROTATE INSTRUCTION END-->

Follow by one canvas tag in the body. The game start initiatie by calls the main function of the game initMain().

        <!-- CANVAS START-->
        <div id="canvasHolder">
            <canvas id="gameCanvas" width="1024" height="768"></canvas>
        </div>
        <!-- CANVAS END-->

D) CSS Files and Structure - top

I'm using two CSS files in this game. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page.

E) JavaScript - top

This game using Javascript files below.

  1. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

  2. Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.

  3. CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.

  4. The game have the following js files
    • init.js : check if browser or device support

    • loader.js : loader to load all game images

    • main.js : initiate game setup and browser resize function

    • mobile.js : mobile orientation change

    • canvas.js : canvas setup and resize

    • sound.js : sound event

    • game.js : game play and logics

    • plugins.js : additonal useful plugins

Complete game flow:

  1. The index.html file start init.js for browser detection
  2. If browser is supported, init loader.js to start load asserts with loading progress
  3. For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
  4. When all asserts contained in "/assets" folder are loaded, the game start construct canvas.js from main.js thats shows game menu
  5. If user click the screen in game menu, the game will start with game.js
  6. Letters will random sort base on a word, description will be given as a clue
  7. If user click on any letter, it will start following mouse
  8. If user release the letter, it will rearrange the letters where in place order
  9. If user make the right word, it will move to next word
  10. Reveal answer button will shows after 30 second for each word
  11. If user click the reveal answer button, it reveal the answer and move to next word
  12. When all the 11 words is complete, game result will shows
  13. If user click the screen in game result, it will restart the game

F) Game Functions - top

The most important functions used for page.

The most important functions used for game.

G) Game Assets - top

The game contain 'design' folder which include following:

  1. rearrangeletters_1024x768.psd - with layer folders below
    • Result
    • Gameplay Reveal
    • Gameplay
    • Landing
  2. correct_75x55.fla - complete animation frames for correct

The folder 'assets' in 'game' folder contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.

H) Supporting Other Languages - top

This game is now only support english alphabet with 26 letters, and all letters are load from image assets. But you can switch to other languages with the steps below:

1. Insert the letters (lowercase) into array list in game.js, use comma for next letter.

        var letters_arr = [{letter:'a', src:'assets/letter_a.png'},
                {letter:'b', src:'assets/letter_b.png'},
                {letter:'c', src:'assets/letter_c.png'}]

Below is the explanation of each most important array item in 'letters_arr' array:

2. Change logo text to new languages in game.js.

        var logoWordParagraph1 = 'rearrange';
        var logoWordParagraph2 = 'letters';

4. Make sure all letters in words.xml and logo text are contain in array list, or else the game will stop running.

I) Build-In Editor Tool - top

This is the section where you can preview or edit the words with the tool by running edit.html. The page start with edit tools.

  1. First select the word you want to edit.
  2. Option to add new or remove question.
  3. This section is to edit question and answers, and also output the new XML string.
    • Edit Word - edit word settings
    • Generate XML - click to generate new XML string, copy and replace into questions.xml for new update
    • Save XML - click to save XML

  1. Edit word:
    • Category - is to categories the type of word (eg. word, riddle), the category name will be display in category select option page, leave it empty if categoryPage option is set to false.
    • Answer - answer must be at least 3 letters
    • Description - description can be any word
    • Answer (Audio) - audio file path for answer
    • Description (Audio) - audio file path for description
    • Description (Image) - image file path for description, only available when description text set to empty
  2. Click update word to see the new update, click done to go back main options.

J) Save XML with password - top

Build-In Editor Tool come with the 'Save XML' button, follow steps below to use the feature:

  1. First open save.php and change to the new password, default password is 12345.
    It is important to change the new password else anyone can open edit and save your XML file. 
                $savePassord = '12345';
  2. In the same save.php file, enable the save feature by changing $saveEnable to true. 
                $saveEnable = true;
  3. Set the words.xml file permissions to 775 using your FTP software.
  4. Start the Build-In Editor Tool, clicking the 'Save XML' button will prompt to enter password to save.

K) Compatibility - top

This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape view, but they are not officially supported.

L) Sources and Credits - top

I've used the following font and sound files as listed.

M) Changelog - top

Version 2.6 Version 2.5 Version 2.4 Version 2.3 Version 2.2 Version 2.1 Version 2.0 Version 1.9 Version 1.8 Version 1.7 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1

Once again, thank you so much for purchasing this game. As I said at the beginning, I'd be glad to help you if you have any questions relating to this game. No guarantees, but I'll do my best to assist. If you have a more general question relating to the games on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you like my game, please take a moment to rate it. Thanks!

demonisblack

Go To Table of Contents