“Gems Match 3” Documentation by “demonisblack” v1.3

“Gems Match 3”

Created: 08/06/2021
By: demonisblack
Email: demonisblack@gmail.com

Thank you for purchasing the game. If you have any questions that are beyond the scope of this help file, please feel free to email via profile 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. Compatibility
  9. Sources and Credits
  10. Changelog
  11. Support Policy

A) Introduction - top

Gems Match 3 is a HTML5 game where you have to match at least three of the same gems, score as many points as possible before time run out.

The ZIP package contains the game with 1280×768 and 768×1024 resolution that scales proportionally to fit current screen device.

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 

//level settings
var levelSettings = {
					score:100,
					timer:121000,
					columns:8,
					rows:8,
					tileWidth:60,
					tileHeight:60,
					assets:[
						{src:'assets/item_tile_01.png', hex:'#FF0000'},
						{src:'assets/item_tile_02.png', hex:'#FF8000'},
						{src:'assets/item_tile_03.png', hex:'#FFCE34'},
						{src:'assets/item_tile_04.png', hex:'#36D900'},
						{src:'assets/item_tile_05.png', hex:'#006DD9'},
						{src:'assets/item_tile_06.png', hex:'#BF00FF'},
						{src:'assets/item_tile_power.png', hex:'#ef60a4', power:true}
					],
					animation:{
						swap:.2,
						shift:.6,
						remove:.2
					}
}

//game text display
var textDisplay = {
					score:'SCORE',
					time:'TIME',
					gameover:'NO MORE MOVE!',
					timeend:'TIME\'s UP!',
					exitTitle:'EXIT GAME',
					exitMessage:'ARE YOU SURE YOU WANT\nTO QUIT GAME?',
					share:'SHARE YOUR SCORE',
					resultTitle:'GAME OVER',
				}

//Social share, [SCORE] will replace with game score
var shareEnable = true; //toggle share
var shareTitle = 'Highscore on Defuse the Bomb is level [SCORE]';//social share score title
var shareMessage = '[SCORE] is mine new highscore on Defuse the Bomb! Try it now!'; //social share score message

You can update gems assets in levelSettings, below is the explanation of each most important assets array item:

  1. src - image path
  2. hex - hex color code
  3. power - power gem (can swipe with any gems)

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

        var enableMobileSound = true;

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"><img src="assets/loader.png" /><br><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-->

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

    • 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 swap the gems positions (vertically or horizontally) with at least 3 same gems next to each other, user will score
  6. If user swap the power gem with any other gems, user will score
  7. When times run out or no more move, the game will end to result page.
  8. If user click the continue button in game result, it will return to menu screen

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. gemsmatch3_1280x768.psd - with layer folders below
    • Option
    • Result
    • Gameplay
    • 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) 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.

I) Sources and Credits - top

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

J) Changelog - top

Version 1.3 Version 1.2 Version 1.1

K) 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