Shoot The Gift Game Template

If you are going to give vouchers or coupons to your website users, this game template is the right tool for you. Your website users will play first before they get the voucher you gave. After they win a simple game, you can direct them to the page you want. You can easily customize images, messages, and URLs just by modifying the given JSON file. You can do that even if you do not have programming skills.

About the Document

This is the documentation of the item in Envato Market: https://codecanyon.net/item/shoot-the-gift-game-template/27452800

Installation

You can install the application by running the index.html file via a portable server such as PHP-CLI or placing a folder on the hosting you have.

File Structure

The file structure of the game is as follows:

- index.html
+ images
+ js
- gamedata.json
- app.js
- dust.js
- pixi.js
- bump.js
- charm.js

Configuration

To run the code, you do not need any configuration at all. You just place the code in your computer/server and run the index.html. Even you can just run it on your desktop using any browser you like.

Customization

To customize the game, you can modify the gamedata.json file. The structure of gamedata is as follows:

{
"showReplayButton": true,
"spinSpeed": 0.02,
"shootSpeed": 25,
"maxArrow": 3,
"lose": {
"title": "You Lose!",
"note": "This is note for player when get lose"
},
"win": {
"title": "Awesome!",
"note": "Get your voucher by clicking blue button"
},
"assets": [
{
"name": "circle",
"src": "./images/circle.png"
}
],
"gifts": [
{
"name": "gift1",
"src": "./images/gift.png",
"rotation": 0,
"data": {
"url": "http://yourdomain.com?voucherCode=XXXXX"
}
}
]
}

showReplayButton:

Boolean. True value will show the replay button when the player shoots the box.

spinSpeed:

Double. The speed of the spin of the circle.

shootSpeed:

Integer. The speed of the arrow.

maxArrow:

Integer. The maximum number of arrows.

assets:

Array of game assets. This contains all images used in the game.

gifts.name:

Name of gift. Please do not put any space in the name.

gifts.src:

URLs of gift image. Use the small pixel of the image.

gifts.rotation

Angle in degree. The position of gift asset in circle.

gifts.data.url:

URL to redirect when players press the Get Voucher button. You can use this property to redirect the page to your content on a website such as the selling item with a discount voucher.

Support

We provide support for installation assistance and arrange through commenting on sales items on the Envato market.