Documentation

Scratch & Win

Thank you so much for purchasing our item from codecanyon.

Version: 1.2
Author: demonisblack

Created: 1 January, 2024
Update: 13 March, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Overview

Scratch & Win is a HTML5 game where user given a card which can be revealed by scratching off an opaque covering, select up to 5 different scratch cards including bonus, match 3, winning numbers, every scratch card give chance to win prizes.

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

Installation

Follow the steps below to setup your game:

To install the game just upload folder /game to your hosting web server using FTP or localhost in order to use it on your website. The game won't run locally with some browser like Chrome due to some security mode.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- game/assets - Images & audio files
- game/css - Stylesheet files
- game/js - Javacript files
- game/icon.ico - Website icon
- game/share.jpg - Social share image
- game/share.php - Social share file
- game/index.html - Homepage
You will 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" />

Settings

Follow the steps below to customize your game:

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

                        
//game settings
var gameSettings = {
	score:{ //score position
		x:100,
		y:0
	},
	credit:100, //start credit
	scratchStrokeNum:[20,30], //scratch stroke number
	revealScratchStrokeNum:[25,35], //scratch stroke number
	revealSpeed:.1, //reveal speed
	revealCurviness:2, //reveal curviness
	winColorFilter:[140,35,0],
	enablePercentage:true, //option to have result base on percentage
};

//game test display
var textDisplay = {
	price:"$[NUMBER]",
	buy:'Buy $[NUMBER]',
	buyAgain:'Buy Again $[NUMBER]',
	scratch:'Scratch your card...',
	noCredit:'No more credit...',
	won:'+$[NUMBER]',
	exitTitle:"EXIT GAME",
	exitMessage:'Are you sure\nyou want to\nquit the game?',
	resultTitle:"YOU WON TOTAL OF",
	share:'SHARE YOUR SCORE',
	resultDesc:'$[NUMBER]'
};

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

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

                         
var enableDesktopSound = true; //sound for dekstop
var enableMobileSound = true; //sound for mobile and tablet

Cards

You can easily customize cards in cardsSettings in settings.js file, it store cards settings and below is the explanation of each most important objects:

                        
//cards settings
var cardsSettings = [
	{
		assets:{
			landscape:{
				background:'assets/card_bg_landscape.png',
				logo:'assets/card_logo_landscape_1.png',
				scratch:'assets/card_scratch_landscape_1.png',
			},
			portrait:{
				background:'assets/card_bg_portrait.png',
				logo:'assets/card_logo_portrait_1.png',
				scratch:'assets/card_scratch_portrait_1.png',
			},
		},
		matchedItems:0,
		numbers:[],
		bonusMax:0,
		overallPercent:100,
		price:{
			value:1,
			x:25,
			y:50
		},
		items:[
			{
				x:275,
				y:230,
				width:160,
				height:25,
				icon:{
					offsetX:0,
					offsetY:0,
				},
				prize:{
					offsetX:0,
					offsetY:0,
				},
				number:{
					offsetX:0,
					offsetY:0,
					fontSize:30,
					lineHeight:10,
					color:'#2E303A',
				},
				type:'prize'
			}
		],
		prizes:[
			{
				value:5,
				text:{
					display:'$5',
					fontSize:50,
					lineHeight:0,
					color:'#2E303A',
				},
				image:'',
				percent:20,
			},
		],
		bonus:[
			{
				value:10,
				text:{
					display:'',
					fontSize:50,
					lineHeight:10,
					color:'#2E303A',
				},
				image:'assets/prizes/multiply_x10_01.png',
				percent:10,
			},
		],
		symbols :[
			{
				text:{
					display:'',
					fontSize:50,
					lineHeight:0,
					color:'#2E303A',
				},
				image:'assets/prizes/icon_01.png',
			},
		]
	}
];

assets - cards assets
- landscape & portrait assets
  - background - card background image path
  - logo - card logo image path
  - scratch - card scratch image path
matchedItems - total item to matched
numbers - winning numbers array [start, end]
bonusMax - maximum bonus item to appead in type of 'prize,bonus'
overallPercent - overall percent for percentage option (default 100)
price - card price setting
- value - card price value
- x - position x
- y - position y
items - scratch array of items
- x - position x
- y - position y
- width - scratch width
- height - scratch height
- image - image offset position
- prize - prize offset position
- number - number offset position and settings
  - fontSize - fontSize
  - lineHeight - lineHeight
  - color - font color
- type - item type
  - prize - display prizes from prizes array
  - bonus - display bonus from bonus array
  - display - display prize amount from prizes array
  - number - display win numbers from numbers array
  - prize,bonus - display prizes and bonus from prizes and bonus array
prizes - prizes array
- value - prize amount
- text - text setting
  - display - prize display
  - fontSize - fontSize
  - lineHeight - lineHeight
  - color - font color
- image - prize image path
- percent - winning percentage (1 - 100), set 0 to disable
bonus - bonus array
- value - prize amount
- text - text setting
  - display - prize display
  - fontSize - fontSize
  - lineHeight - lineHeight
  - color - font color
- image - bonus image path
- percent - winning percentage (1 - 100), set 0 to disable
symbols - symbols array
- value - prize amount
- text - text setting
  - display - prize display
  - fontSize - fontSize
  - lineHeight - lineHeight
  - color - font color
- image - symbols image path

Some tips to build scratch card:

You can create three types of card with options below:

A. Simple card


matchedItems:0,
numbers:[],

B. Matching card


matchedItems:3,
numbers:[],

C. Winning numbers card


matchedItems:0,
numbers:[1,100],

To match symbols instead of prizes for B. Matching card, you can insert symbols array


symbols :[
	{
		text:{
			display:'',
			fontSize:50,
			lineHeight:0,
			color:'#2E303A',
		},
		image:'assets/prizes/icon_01.png',
	},
]

You must have at least one type 'display' of item to display winning prize


items:[
	{
		x:275,
		y:82,
		width:65,
		height:10,
		image:{
			offsetX:0,
			offsetY:0,
		},
		prize:{
			offsetX:0,
			offsetY:0,
		},
		number:{
			offsetX:0,
			offsetY:0,
			fontSize:30,
			lineHeight:10,
			color:'#2E303A',
		},
		type:'display'
	}
]

To set winning numbers for C. Winning numbers card, you can set type 'number' to display winning numbers, the total winning numbers is the total items with type 'number'.


items:[
	x:192,
	y:80,
	width:15,
	height:15,
	image:{
		offsetX:0,
		offsetY:0,
	},
	prize:{
		offsetX:0,
		offsetY:0,
	},
	number:{
		offsetX:0,
		offsetY:0,
		fontSize:30,
		lineHeight:10,
		color:'#2E303A',
	},
	type:'number'
]

To display prizes and bonus for C. Winning numbers card, you can set type 'prize,bonus' to display prizes or bonus


items:[
	{
		x:88,
		y:194,
		width:25,
		height:16,
		image:{
			offsetX:0,
			offsetY:-15,
		},
		prize:{
			offsetX:0,
			offsetY:15,
		},
		number:{
			offsetX:0,
			offsetY:-12,
			fontSize:30,
			lineHeight:10,
			color:'#2E303A',
		},
		type:'prize,bonus'
	},
]

You can change the bonusMax which is the total of bonus item to randomly insert


bonusMax:2,

When any of prizes, bonus and symbols array contains at least one object it must equal to your total items to generate scratch items, example when you have 5 scratch items then you must have 5 prizes and 5 bonus objects, you can dupliate to make it all same length.

Note Is important for last points to have same length for the array else the game can't generate the card.

Percentage Option

Follow the steps below to set prize and bonus result based on percentage:

First enable the option below in gameSettings.js in settings.js file

									
enablePercentage:true, //option to have result base on percentage

Set winning percentage on each prizes and bonus in cardsSettings in settings.js file
- percent - winning percentage (1 - 100), set 0 to disable
Increase the overallPercent in cardsSettings in settings.js file to decrease the winning chances when there are more prizes eg.1000
```
									
overallPercent:1000
								
								
```

Note When total percentage of prizes or bonus is 54%, the rest of 46% is no winning result

HTML Structure

Structure used to design web pages including HTML structure, CSS Files, Javascript and more...

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

CSS Files

We're using two CSS files in this game. The first one is normalize.css 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 main.css contains all of the specific stylings for the canvas and some hack to be fully compatible with all most popular mobile device.

JavaScript

This game using Javascript files below.

jquery.min.js - is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
detectmobilebrowser.js - is a open source scripts to detect mobile browsers and phones.
createjs.min.js - is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
TweenMax.min.js - is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).
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
- settings.js - cards and game settings
- game.js - game play and logics
- plugins.js - additonal useful plugins

Game Flow

The index.html file start init.js for browser detection
If browser is supported, init loader.js to start load asserts with loading progress
For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
When all asserts contained in /assets folder are loaded, the game start construct canvas.js from main.js thats shows game menu
If user click start button in game menu, the game will start game with game.js
If user click buy card, new card is ready to scratch
If user scratch all or click reveal, the result will reveal
- Card 1 - Scratch and win that amount on prize and bonus area
- Card 2 - Match 3 identical PRIZE amounts and win that amount
- Card 3 - Match 3 identical SYMBOL'S in a row, a column or diagonally and win the prize
- Card 4 - Match any of YOUR NUMBERS to the WINNING NUMBERS, win prize shown below that number. Scratch and win that amount on bonus area
- Card 5 - Match any of YOUR NUMBERS to the WINNING NUMBERS, win prize shown below that number. Reveal a 'cash' symbol, win that prize automatically. Reveal a '2X', '4X', '5X' or '10X' symbol, multiply the corresponding PRIZE by that multiplier
If user match won the prizes, user will score that amount
If user click exit button or when no more credit, the game result will show
If user click main button at game result, it will go to menu page

Game Functions

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
updateGame() This function manages the game loop
stopGame() This function stop gameplay
saveGame() This function save game score

Game Assets

You can edit the design files and easily reskin the game graphics.

The game contain /design folder which include following:

scratch&win_1280x768.psd - with layer folders below
- Option
- Result
- Gameplay
- Landing
- Background

The folder /game/assets 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.

Compatibility

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

Add-ons

The add-on is an additional feature added to the game and it requires the base game in order to work, below are the add-ons that are compatible with this game:

Note This game is only compatible with ONE of the add-ons below.

This game is compatible with Scoreboard for HTML5 Games, it is a add-ons page where user can submit score and view top 10 leaderboard. You can get it here.

This game is compatible with Membership and Rewards System add-on, it is a add-ons page where user can singup, login and retrieve their game data, redeem rewards with the available game points. You can get it here.

Source & Credits

Fonts:

Built Titling from file Typodermic Fonts
Montserrat from file Google Fonts

Images:

Gradient lottery ticket set illustration from file freepik
Gradient lottery ticket set illustration from file freepik

Sounds:

Ping Bing from file GameAudio
teleport space morph from file GameAudio
Deal.ogg from file egomassive
magic_bonus_game_intro.wav from file MLaudio
magic_game_win_success.wav from file MLaudio
Disconnected 02 from file rhodesmas
Bonk Click w/deny feel from file GameAudio
Coin_Drop_19 from file Valenspire

Support

If this documentation doesn't answer your questions, you can send us email via Item Support Page

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our game like bugs and errors. Custom modifications or third party module implementations are not included. Please read and check item support policy here.

Here you can find plugin & other documentation that support this game.

Wordpress Site - By using Scoreboard for HTML5 Games plugin, you can embed HTML5 game into WordPress post or page. Get the 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

Don’t forget to Rate this game

Please Add your Review (Opinion) for Our game. It would be a great support for us.
Go to your Codecanyon Profile > Downloads Tab > & then You can Rate & Review for our game.
Thank You.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.2

Fixed percentage issue

Version 1.1

Fixed game script
Fixed game layout

Version 1.0

Initial Release