From Concept to Creation: Building Bango Bingo Game in 72 Hours

Rengga Dev – Bango Bingo Game is a HTML5 game which player choosing the numbered tickets and giving prizes to the holders of numbers drawn at random. From concept to Creation, I am building Bango Bingo Game in 72 hours.

Players usually choose a set of numbers from a grid of numbers and then wait for the winning numbers to be drawn. If their selected numbers match the winning numbers, they win a prize (points).

This game can be played on a variety of devices, including desktops, laptops, tablets, and smartphones. It typically requires a stable internet connection and a modern web browser that supports HTML5 technology.

How To Create

CSS Files and Structure

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.

JavaScript

This game using Javascript files below.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.
CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
TweenMax 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
- game.js : game play and logics
- plugins.js : additional useful plugins

Sample Code

var selectTextDisplay = '[NUMBER]'; //select number text display
var ballRadius = 60; //ball radius
var totalBall = 36; //total balls
var rotateBall = true; //rotate balls in 3d angle
 
var spinDirection = true; //true for anticlockwise
var spinStartSpeed = 5; //spin starting speed
var spinEndSpeed = 5; //spin ending speed
var spinSpeed = 10; //spin speed
var revealTimer = 6; //reveal ball timer
 
var enablePercentage = true; //option to have result base on percentage
 
//score points array and also the total number to reveal
var score_arr = [
   {prize:100, percent:75},
   {prize:500, percent:65},
   {prize:1000, percent:50},
   {prize:5000, percent:40},
   {prize:10000, percent:25},
   {prize:100000, percent:10}
];