0
  • No products in the cart.
Total:€0.00

Documentation HTML5 Spin the Bottle Game

Home / Mediageni Software Documentation / Documentation HTML5 Spin the Bottle Game
HTML5 - Spin the Bottle Game

HTML5 – Spin the Bottle Game

If you have any questions that are beyond the scope of this documentation, please check the frequently asked questions or feel free to contact us.

Introduction

Spin the bottle games uses the html5 touch sensors on your mobile device to rotate the bottle with your fingers clockwise or counter-clockwise with different speeds, this gives you a realistic feel of the rotation and movement. You can also rotate the bottle by simply clicking the bottle icon.

Features:

  • Includes very nice themed backgrounds for different occasions
    Loves me, loves me not; Spin for Drinks in the Bar,…
  • Change the bottle to Beer, Cocktail, Wine, Champagne or a Cocktail

Installation

The installation of this app is very easy.

If you follow the steps below you’ll have your very own Hybrid Web App up and running in a few minutes!

  1. STEP 1
    Extract the .zip you downloaded from CodeCanyon to a new directory on you local computer.
  2. STEP 2
    Follow the instructions on “Customizing The App”.
  3. STEP 4
    Copy the contents of the extracted directory to the root directory of your website.

Customizing the HTML 5 app

The list below shows the possible basic configuration options in index.html

Open index.html with your text editor and change the settings to fit your needs

// Change your App text
 

 
About your App
 

 
 
// Place your Ads between in index.html

 
Google Ads here
 

 
 
// If you want sharing buttons, fill your Addthis.com

Customising the HTML5 Game Layout

To make any changes to the layout you will need some knowledge about CSS and HTML.  If you want to add extra backgrounds, you can do so, but you’ll need to edit CSS and HTML code in index.html. An included PSD for positioning the wheel (for the bottle rotate) added as well.

Add extra background

Add extra background images in index.html

<div class="carousel-inner">
  <div class="active item">
    <div class="fill" style="background-image:url('images/backgrounds/casino-roulette.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/love_me_love_me_not.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/wheel_of_fortune.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/choose-colors.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/choose-fruit.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/wood.jpg');"></div>
  </div>
  <div class="item">
    <div class="fill" style="background-image:url('images/backgrounds/yournewimage.jpg');"></div>
  </div>
</div>

 

Change log

v1.00 – April 19, 2015
  • Initial Release

Credits

The following Javascript/CSS frameworks and Fonts have been used.

  Javascript

  1. Twitter Bootstrap – a sleek, intuitive, & powerful mobile first front-end framework for faster & easier web development.
  2. jQuery – a fast, small, & feature-rich JavaScript library.

CSS

  1. Twitter Bootstrap – a sleek, intuitive, & powerful mobile first front-end framework for faster & easier web development.
  2. Bootswatch – Colourful themes for Twitter Bootstrap

Fonts

  1. FontAwesome – a library of precisely prepared monochromatic icons and symbols.

Sites in Action

Demo site: HTML5 Spin The Bottle game