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!
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:
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.
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-->
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.
This game using Javascript files below.
Complete game flow:
The most important functions used for page.
The most important functions used for game.
The game contain 'design' folder which include following:
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.
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.
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.
Build-In Editor Tool come with the 'Save XML' button, follow steps below to use the feature:
$savePassord = '12345';
$saveEnable = true;
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.
I've used the following font and sound files as listed.
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