“Hacker Challenge” Documentation by “demonisblack” v1.7

---

“Hacker Challenge”

---

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. Stage Settings
9. Build-in Edit Tools
10. Compatibility
11. Sources and Credits
12. Changelog
13. Support Policy

---

A) Introduction - top

Hacker Challenge is a HTML5 where you need to direct the flow of blue energy by changing the rotation of the junction shapes until it reaches an end-point that will unlock.

The ZIP package contains the game with 1280×768 resolution that scales to fit the whole screen device, but it may not be perfectly full screen.

How To Play:
1. Use finger or mouse press to change the rotation of junction shapes.
2. Unlock by Direct the flow of blue energy until it reaches an end-point.

---

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 gameStageText = 'Stage[NUMBER]'; //stage display, [NUMBER] will replace with stage num
        var gameStageColour = '#fff'; //stage display colour
        var gameOverText = 'ACCESS DENIED';  //game access denied
        var gameOverColour = '#D90000'; //game access denied colour
        
        var strokeLine = 3; //stroke line
        var strokeColour = '#D90000'; //stroke colour
        var strokePowerColour = '#7cc5ed'; //stroke power colour
        
        var resultText = 'Completed'; //result text
        var resultStageText = 'Stage[NUMBER]'; //result stage
        
        //Social share, [SCORE] will replace with game score
        var shareEnable = true;
        var shareText ='share your score'; //text for share instruction
        var shareTitle = 'Highscore on HACKER CHALLENGE Game is Stage [SCORE]';//social share score title
        var shareMessage = 'Stage [SCORE] is mine new highscore on HACKER CHALLENGE Game! Try it now!'; //social share score message
        

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

• image - path of the lock icon file
• power - path of the lock (power) icon file
• indicator - path of the lock indicator file
• indicatorPower - path of the lock indicator (power) file

        //hub lock
        var hublock_arr = [{image:'assets/hub_lock.png', power:'assets/hub_lock_power.png', indicator:'assets/hub_lock_indicator.png', indicatorPower:'assets/hub_lock_indicator_power.png'},{image:'assets/hub_lock_supply.png', power:'assets/hub_lock_supply_power.png', indicator:'assets/hub_lock_indicator_supply.png', indicatorPower:'assets/hub_lock_indicator_power_supply.png'}];
        

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

• type - hub type
• image - path of the shape file
• power - path of the shape (power) file
• range - range number to connect line, start from centre
• lock - lock type, item number from 'hublock_arr' array

        //hub type
        var hub_arr = [{type:'power', image:'assets/hub_power.png', power:'assets/hub_power.png', range:70, lock:0},
                        {type:'supply', image:'assets/hub_supply.png', power:'assets/hub_supply_power.png', range:47, lock:1},
                        {type:'linear', image:'assets/hub_linear.png', power:'assets/hub_linear_power.png', range:30, lock:0},
                        {type:'corner', image:'assets/hub_corner.png', power:'assets/hub_corner_power.png', range:30, lock:0},
                        {type:'cross', image:'assets/hub_cross.png', power:'assets/hub_cross_power.png', range:30, lock:0},
                        {type:'t', image:'assets/hub_t.png', power:'assets/hub_t_power.png', range:30, lock:0}];
        

If you wish to add/edit stage, check out Stage Settings section.

If you wish to add/edit stage with build-in edit tools, check out Build-in Edit Tools section.

---

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

        var enableMobileSound = true;
        

The mobile rotate instruction can be easily change in mobile.js file:

        var rotateInstruction = true; //enable rotate instruction for mobile
        var forPortrait=false; //for portrait only, set false for landscape mode
        

---

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"><span>0</span></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="rotateImg"><img src="assets/rotate.png" /></div>
                <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="1280" 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. TweenMax is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).
   
   
5. 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
     
     
   • stage.js : stage settings
     
     
   • 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 and main.js from main.js thats shows game menu
5. If user click the start button in game menu, the game will start with game.js
6. If user press and move the stage can move around to see the complete puzzle
7. If user click the junction shapes can change the rotation
8. If flow of blue energy is direct to reaches an end-point, the game will end and proceed to next stage
9. If timer is up, the game will end to result screen
10. If user click the replay button in game result, it will start over

---

F) Game Functions - top

The most important functions used for page.

• checkBrowser()
  This function is runs for browser detection
  
  
• checkMobileEvent()
  This function runs for mobile event
  
  

The most important functions used for game.

• initMain()
  This function build canvas
  
  
• startGame()
  This function start gameplay
  
  
• stopGame()
  This function stop gameplay
  
  
• saveGame()
  This function save game score
  
  

---

G) Game Assets - top

The game contain 'design' folder which include following:

1. hackerchallenge_1280x768.psd - with layer folders below
   • Result
   • Game
   • Landing

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) Stage Settings - top

You can easily customize stage settings in stage.js file

All stages are store in 'stage_arr' array, sample code below:

var stage_arr = [
            {stage:{w:1280, h:768, x:0, y:0},
            hub:[{x:264, y:394, type:0, lock:[1,1,1,1], timer:0, trick:0, rotation:-1},{x:1051, y:393, type:1, lock:[1,0,0,0], timer:0, trick:0, rotation:-1},{x:579, y:597, type:3, lock:[0,0,0,0], timer:0, trick:0, rotation:90},{x:578, y:185, type:3, lock:[0,0,0,0], timer:0, trick:0, rotation:0},{x:577, y:393, type:5, lock:[0,0,0,0], timer:0, trick:0, rotation:180}],
            lines:[{startHub:0, startHubPos:2, endHub:2, endHubPos:3, array:[{x:264, y:598},]},
                    {startHub:0, startHubPos:0, endHub:3, endHubPos:3, array:[{x:264, y:185},]},
                    {startHub:3, startHubPos:2, endHub:4, endHubPos:0, array:[]},
                    {startHub:2, startHubPos:0, endHub:4, endHubPos:2, array:[]},
                    {startHub:4, startHubPos:1, endHub:1, endHubPos:3, array:[]}
            ],
            }
        ];
        

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

• stage - stage settings
  • w - stage width
  • h - stage height
  • x - stage start x
  • y - stage start y
• hub - hub in array
  • type - type of hub
  • x - posiiton x
  • y - position y
  • rotation - -1 is random, possible rotation (0,90,180,270) base on type of hub
  • trick - (0 = none, 1 = lock, 2 = timer)
  • timer - timer number (if trick set to 2)
  • lock - lock the hub in array format start from top, right, bottom, left (0 = off, 1 = on), (if trick set to 1)
• line - line in array
  • startHub - hub number start point
  • startHubPos - hub number start point position
  • endHub - hub number end point
  • endHubPos - hub number end point position
  • array - array list for line connecting point
  • x - position x
  • y - position y

---

I) Build-in Edit Tools - top

This is the section where you can edit the stage with the tool by running edit.html. The page start with edit tools, click generate button to export the array when you complete editing, replace the new array in 'stage_arr' in stage.js.

1. Toggle to display edit option.
2. Select the stage you want to edit, additionally you can add, remove and sort stages.
3. Option to Edit Area, Hub and Lines
4. Test play the game and generate the new updated array, copy and replace into stage.js 'stage_arr' array list

---

1. Setup the stage width and height, default is (1280 x768).
2. Set stage start position when your stage dimension is larger than original game size.

---

1. Select the hub you wish to edit.
2. Option to swtich hub type for different challenge.
3. And option to add trick.
   • None - none
   • Lock - set the lock option from top, right, bottom and left
   • Timer - set the timer option

---

1. Select the line to edit, and option to add or remove.
2. To add new line, first select start hub connection point (four white dots around the hub), follow by end hub connection point. (Note you must have at least 2 hubs to connect the line)
3. Option add new point in between the line

Take note:
- When design the puzzle must at least have one power hub connect to supply hub in order to complete the game, test the game play if it work.
- Always remember to generate the new updated array and replace into 'stage_arr' in stage.js to see the new changes.

---

J) 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.

---

K) Sources and Credits - top

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

• Source Code Pro from file Google
• Blue sphere Background from file freepik
• Dark circuit background from file freepik
• High tech circuit lights background from file freepik
• 8bit powerup from file JavierZumer
• DoorScan.wav from file theshuggie
• Machine Start Up:Power Down.wav from file Taylor_Pro_Sounds
• Error Sound from file thehorriblejoke
• Industrial/Warehouse Lights Turn On Epic from file Cyberkineticfilms
• Generator Starving and Stalling.wav from file solowiej

---

L) Changelog - top

Version 1.7

• Fixed scoreboard issue

Version 1.6

• Add-on script integrated

Version 1.5

• Update Google to Whatsapp share

Version 1.4

• Fixed Build-in Editor issues

Version 1.3

• Build-in Editor Tool UI improvements

Version 1.2

• Fixed audio not playing in Chrome browser

Version 1.1

• Fixed iOS Safari fullscreen

---

L) Support Policy - top

Check out support policy here.

Wordpress Site

By using Scoreboard for HTML5 Games plugin, you can embed HTML5 game into WordPress post or page.
> Plugin

Ad Placeholder

Help simulate ads on HTML5 Games, you can integrate and display static and takeover ads through different Ads Serving Platform.
> Documentation

Instant Games – Facebook

Guide you through integrating Facebook Instant Games API in our HTML5 Games.
> Documentation

---

Once again, thank you so much for purchasing this game, if you have a more general question relating to the games on CodeCanyon, you might consider visiting the item page in the "Support" section.

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

How to rate an item on CodeCanyon?

If you want to rate one of our items on CodeCanyon please do it like this:

1. Login to CodeCanyon
2. Open the menu on the top right, and click onto the link “Downloads” which shows a list of your downloads
3. Rate our items using the stars
4. That’s it. Thank you very much!

demonisblack

Go To Table of Contents

---