Developing An Interactive Web Browser Based Game: Industrial Design
Developing An Interactive Web Browser Based Game: Industrial Design
Developing An Interactive Web Browser Based Game: Industrial Design
BASED GAME
Bachelor in Technology in
Industrial Design
By
Abhay Srivastav (110ID0520)
Bharat Malik (110ID0609)
CERTIFICATE
This is to certify that the thesis titled “Developing an interactive web browser based game”
submitted by Abhay Srivastav (Roll No. 110ID0520) and Bharat Malik (Roll No. 110ID0609)
in partial fulfillment of the requirements for the award of BACHELOR OF TECHNOLOGY in
INDUSTRIAL DESIGN at National Institute of Technology, Rourkela is an original work
carried out by them under my supervision and guidance.
The matter embodied in the thesis has not been submitted to any University/ Institute for the
award of any Degree.
We take this opportunity to express our profound gratitude and deep regards to our guide Prof.
Dhananjay Singh Bisht, Assistant Professor, Department of Industrial Design, for his exemplary
guidance, monitoring and constant encouragement throughout the course of this project. His invaluable
guidance, immense help, hearted cooperation and fruitful discussions throughout the semester are
embodied in this dissertation.
We also express our sincere gratitude to Prof. Bibhuti Bhusan Biswal, Head of Department, Department
of Industrial Design, Prof. Mohd. Rajik Khan and Prof. B.B.V.L. Deepak for their keen interest and
unfailing inspiration throughout the course of the project.
We are obliged to the all the classmates for the valuable information provided by them and acknowledge
them for their cooperation during the period of our assignment.
We are extremely grateful to all lab maintenance staff for providing us assistance in various
hardware and software problems encountered during the course of our project.
We are also grateful to the institute’s library and other facilities for providing us with required resources
for the completion of this project.
Finally, we thank all those who are involved, directly or indirectly, throughout the course of the project.
This projects aims to develop an internet web browser based strategy game application. Strategy games
engage the player for a long time and improve cognitive skills. This game application is divided into two
sections. First section of game is virtual betting in which the user gets virtual money and uses that
money to bet on real time sports. The money made in the betting section will be used in the second
section of the game i.e. Business strategy game. This business strategy game is similar to the monopoly
game in which user has to buy sections of the game and earn by renting it. To develop this web
application we are using internet programming languages i.e. HTML, CSS, JavaScript, jQuery and PHP.
The main aim of the game is to enhance users planning and thinking skills along with providing
entertainment.
Various web platform games are available on the internet, and our game is also inspired from them. The
virtual betting portion of the game focuses on the user’s knowledge of the sports and their decision
making skill and second portion i.e. business strategy game focuses on user’s planning skills, budgeting
their property and to make profit out of his property. We have tried to keep the user interaction simple
and easy to understand as one has not to go many steps to accomplish a task in the game. A thorough
study has been done and results from various paper related to web game user interaction has been
included in our game. This is just the first model of the game, various possibilities exist for the future
where we can extend the game. We have also planned to develop this application into a internet business
where upgraded users have to pay real money to play the game and we’ll provide attractive incentives to
the winner of the game. This game will also be integrated with various social networking websites such
as Facebook, so that we can amass a large number of players across the world. The main purpose of the
game is to provide entertainment along with improving different cognitive skills. Such games attract a
lot of consumers, who are eager to test their planning and decision based skills. Target users of the game
are mainly school and college students along with interested adults.
We have coded the game using html, css, jquery & php and used Photoshop software for the graphic
requirement of the game. Currently the game is available on Web platform, and we have planned to
extend it to mobile as well as other game platforms.
Keywords: interaction design, online game, web games, strategy game, indian online games
CONTENTS
List of Figures...........................................................................................................................i
List of Tables............................................................................................................................ii
1. Introduction…...........................................................................................................................1
1.1. Problem Statement….........................................................................................................1
1.2. Objectives..........................................................................................................................2
2. Review of literature..................................................................................................................3
2.1. Computer and Video game history....................................................................................3
2.2. A brief timeline of online games.......................................................................................3
2.3. The advantages of online gaming......................................................................................4
2.4. Features of a good online game.........................................................................................4
2.5. Internet Sports betting........................................................................................................5
3. Methodology.............................................................................................................................7
3.1. Development of the user interface of the game.................................................................7
3.2. Development of the back end of game…..........................................................................14
3.3. Integration of the game in social networking sites............................................................14
4. Heuristic Evaluation of the interface........................................................................................15
4.1. Heuristics used for the evaluation......................................................................................
15
4.2. Usability problems.............................................................................................................
16
4.3. Usability problem details...................................................................................................
17
5. Results and Discussion.............................................................................................................20
5.1. Results from Heuristic evaluation…..................................................................................
20
6. Conclusion................................................................................................................................21
6.1 Future Scope.......................................................................................................................21
Reference..................................................................................................................................22
Appendix A…...........................................................................................................................23
LIST OF FIGURES
i
LIST OF TABLES
ii
1. INTRODUCTION
An online browser game is a game which is played on internet using browsers. These browser games run
using standard web technologies or browser plug-ins. such games usually involves use of standard web
technologies as a front end and other technologies as a back end. Browser games include all video game
genres and can be single player or multiplayer. Browser games are also portable and can be played on
multiple different devices, web browsers and operating systems [1].
Standard web technologies such as HTML, CSS, PHP, and JavaScript can be used to make browser
games, but these have had limited success because of issue with browser compatibility and quality.
These technologies collectively termed dynamic HTML, allow for games that can be run in all standard-
compliant browser [1].
As we advance in information technology, number of internet users are increasing day by day. In last
few years, this number has increased significantly as people are being aware of the use of internet.
Internet users like to gain information as well as keep them entertained by listening online music,
playing online games, etc. A large section of the internet users like to play variety of online games.
These games do not require any special requirement, any user can play such games using their internet
browser.
Internet browser games have an advantage over Standalone games as they do not require any setup or
special requirement on the players system. Browser games are easy to access and made short to provide
entertainment and challenge to the user in as easy way as possible.
There is a large variation present in online games. Few examples can be shooting games, mathematical
games, action games, puzzle games, strategy games, etc. But most of these games are developed by
foreign countries’ developers. So there is a lack of Indian theme based games in online game sector
which lead us to take this project of developing an Indian theme game.
Games to which users can relate, are more attractive and people like to play such games often. This
project aims to fulfill such gap by developing an Indian theme based online game.
In this era of information technology, internet has become an important aspect of human life. Day by
day, number of internet users is increasing. Users like to gain knowledge off the internet as well like to
keep them entertained by playing online games, listening music online, etc. There are number of online
1
games with lots of varieties available in them. Much of these games are not Indian games. To fulfill this
gap, we are trying to develop an Indian theme based game.
So we arrived to the problem statement of this project as to develop an interactive web based
multiplayer strategy game targeting users’ decision making and planning skills.
1.2 Objectives
In order to develop a web based game, we analyzed various available games and picked strategy game to
be our choice. Various strategy games are available on internet, among them, one is business strategy
game, so we chose to develop an Indian theme based business strategy game commonly known as
monopoly.
At the end of this project we aim to achieve following objectives:
2
2. REVIEW OF LITERATURE
We started the project by referring to various online games and research papers on interaction design
and game development. The results of the study is discussed as below.
Earliest online gaming started around 1969, but started to become popular around late 1970s and 1980s
when Dial up bulletin boards became popular which was used by players to play online games.
Commercial online service was introduced in 1980s and interactive online games were introduced after
that.
In the 1990s, with the introduction of Java and Flash technology, several online games were introduced
based on these technologies. This gave a great boom to the online games.
Before developing the game, we looked into the history of online games. Online games trace their origin
from year 1969 and are being updated till dated with various new concepts.
Here is a brief time line of the online games:
1969:
PLATO Internet Service offered a two player "Space War" game. By 1972, the game could
host thousand players simultaneously.
1970 - 1977:
Many other multiplayer games introduced on the PLATO service.
1979-1980:
Essex University, U.K. hosted the first "MUD" online game on its system.
1982-1983:
Kesmai Corporation launched an ASCII role-playing game “Mega Wars” in 1983.
1983-1993:
Several games were launched as the online gaming gained popularity.
1994-1995:
Sony released its PlayStation and Nintendo 64 was launched.
3
1997:
Sony sold its 20 millionth PlayStation.
1998-2008:
Sony's PlayStation, Microsoft's X-box Live, and the Japanese company Nintendo create some of the
world's most popular online games that attract an unprecedented number of new users to the world of
online gaming.
A good online game in one which engages users for a long time without boredom. According to a web
article, following are the features of a good online game:
Internet sports gambling involves live-action betting (i.e., bets made on real time propositions about
outcomes within a sporting event) and fixed-odds betting (i.e., bets made on the outcomes of sporting
events or games).
The Harvard analysis of sports wagering found that the majority of bwin subscribers engage in moderate
sports betting, with the median-level player making less than three sports bets of four euros
(approximately $5.25 in U.S. dollars) every fourth day.6 This study also revealed that new subscribers
tended to adapt fairly quickly to betting online as evidenced by quickly developing declines in overall
participation, number and size of bets. However, for the small percentage of individuals who are very
involved in Internet gambling there might still be cause for concern.
Adaptation to online gambling was not uniformly apparent, particularly for live action betting. The
authors recommend maintaining a focus on the impact of such games in future research[3].
Online gaming market in India has been growing in past few years. As more and more users are getting
5
access to internet presence of Indians on gaming site is increasing day by day. A study shows this
growth as per depicted in Fig1. There is a clear indication in growth in Indian gaming industry.
Indian gaming market stats show that the gaming industry has increased its presence in the last few
years. One such data is depicted in Fig.1.
6
3. METHODOLOGY
We divided the whole process of game development into broad categories as depicted in Fig.2
Whole game is divided in two sections i.e. Virtual betting and Business Strategy game.
When a user creates an account in our game website, he/she is given a specific amount of virtual coins
which they can use to bet on the real live sports and based on the result of the game, they either lose or
earn their virtual money.
Virtual betting interface requires display of the current games on which bets can be placed and
an interactive method to place bets.
A thorough analysis lead us to the interface as shown in the Fig.2 for the virtual betting section of the
game.
7
3.1.1.1 Description of the interface
The whole interface is divided into various sections. Upper portion of the interface contains the menu
buttons and lower section displays the main content of the matches and bets. Detailed description of the
interface is provided below.
3.1.1.1.1 Menus
Menu buttons are used to navigate to various sections of the game like Result, Your current bets, home
page. Following is the description of all menu buttons.
HOME – To view the current matches on which user can place bets.
YOUR BETS – On clicking this menu, you can view your current bets on the teams.
RESULTS – This menu shows, the results of the matches you betted on.
GAME – This menu takes the users to the business game section if he has the sufficient coins.
This section displays the current matches description on which user can place bets in tabular form as
shown in Fig.4.
8
Each row contains information about the teams, their betting multiplier (how many times of bet, user
will win if he places on that team), date of the match, betting button and the amount the user has placed
on that match.
Result section of the game shows the betting results of the users’ previous bets as shown in Fig.5.
1. Click on the BET button against the team you want to place bet on
To place a bet on a match, user has to click the BET button against the team as shown in Fig.6 by
arrow.
9
2. Enter the amount you want to bet
Once the user clicks on BET button, a bet dialog is opened, in whoch user has to enter the amount
(coins), he wants to place in text box as shown in Fig.7.
1
4. Saving Bet info is displayed
Once user presses the SAVE BET button, a saving gif is displayed showing saving process as
depicted in Fig.9.
To enter into this strategy game player need to have a minimum amount of virtual coins. Virtual money
earned by the player in betting section is used here in this game to buy, construct property on the
different plots marked on the game interface.
3.1.2.1 Rules
As in every game, there are rules which need to be followed, our present game has set of rules
which need to be followed, for the proper progress of game. These rules are as follows:
First chance for rolling dice will be decided automatically at the starting of game.
User has to roll dice and either buy or skip the block on his move within 1 minute.
If user fails to roll dice, he is eliminated from the game and other player is automatically
declared winner.
Once the owner reaches his own block, he will be given an option of constructing property on
that block of which he can retrieve rents apart from normal rent of the block.
If player falls in the block owned by other player, he has to pay the rent as per the property of
the owner on that block.
1
There are 4 special blocks in the game namely CHANCE, JAIL, DISCOUNT CLUB, START.
These have special rules which will be mentioned on the block itself.
At the end of specified game time, the player with more assets will be declared winner.
3.1.2.2 Gameplay
Gameplay describes how the game proceeds with time. In our game, as it is a turn based game, each user
turns the dice and proceeds the game by following instructions. Gameplay is described below.
Player 1 rolls the dice and moves according to the number obtained on the dice.
Player is offered a choice to buy or skip a block on the game. If the user buys, that block is owned
by him or else he can skip.
Now comes the turn of second player which then repeats the same above steps.
If any of the player lands into the block owned by other player, he shall have to pay the rent for
that block to the owner player.
At the end of specified game time, player who has the highest assets in the game, is declared winner.
Interface of the business game section has been dived into several parts, the middle section contains
the board interface which is described in details below.
1
PLACE BLOCKS – 20 place blocks reside inside the main game interface, 16 of which are the city
blocks that are related to major cities of India and 4 are special blocks which have their special rules.
SPECIAL BLOCKS – There are 4 special blocks in the game at each corner of the game square.
CHANCE – If player reaches this block with odd number on the dice, he loses 50 coins and if he reaches
by even number, he wins 50 coins.
JAIL – If the player reaches this block, then he’ll have options of either waiting for 2 turns or he can
pay a bail of 100 coins.
DISCOUNT – If the player reaches this block, he’ll get a discount of 20% on the next block he buys.
START – On each completion of round, user will be given a specific amount of money.
When a user rolls dice and buys/skips, this information needs to be sent to the other user, this is done by
saving the user activity in a separate server and the server provides information of the player activity to
the other player.
Users’ activities in the website will be displayed in the activity section of the user’s social networking
account.
This will help in increasing the reach of game and will attract new users
1
4. HEURISTIC EVALUATION OF THE INTERFACE
Heuristic evaluation is the technique of finding usability problems in a software application interface
using heuristic evaluators.
According to renowned usability expert Jakob Nielsen, a “heuristic evaluation involves having a small
set of evaluators examine the interface and judge its compliance with recognized usability principles (the
‘heuristics’)” [16].
5. Error prevention
1
7. Flexibility and efficiency of use
The usability problems found in our evaluation of the interface by user surveys and testing are
1
4.3 Usability problem details
Each of these usability problems are categorized and appropriate solution has been suggested which are
described below.
Fig.15 Dialog box to allow user to save bet before leaving the application
3. Inconsistencies between menu buttons and their functions.
Clicking on HOME menu button presents the current matches on which bets can be placed. User
expects to reach to the main home page as he opens the first page.
Solution: A separate menu button e.g. CURRENT MATCHES as depicted in Fig.16 should be
provided for displaying current matches. And HOME button should take the user to the very first
page of the game.
1
Fig.16 CURRENT MATCHES menu to display the current matches
4. Lack of information while doing some task.
No clear information about the total coins betted is available. User has to calculate the total
amount by adding bets on each match.
On changing the bet, there is no display of the current bet amount on the particular match.
Solution Total number of coins betted can be displayed in YOUR BET menu button as depicted
in Fig.17.
In the betting dialog box, current bet amount can be shown which will simplify the process of
betting for the users.
1
5. Separate WON and LOST bets details in results.
In the result page, WON and LOST bets are presented together.
Solution WON and LOST bets can be displayed separately which will simplify the interface.
1
5. RESULTS AND DISCUSSION
By following the interaction design principles we arrived at the final interface of our game. We
developed a working version of the game which can be played currently on the internet.
Thw working model of the game was developed using web programming language: HTML, PHP,
javascript, and jquery.
To improve the game we took various surveys from different category of users and implemented
user testing which gave us points to improve.
Heuristic evaluation technique proved to be very effective in improving the game interface.
Such interaction design principles and techniques should be applied while developing any
application, as they significantly help in improving the current interface and eradicating the usability
problems.
We created the fully functioning application which is currently available on the internet and the link
to which can be found in the appendix
Such more indian theme based games need to be developed and users should encourage such games
and based on the success of the present game, we aim to create more such games which can
strengthen the indian game grasp on internet.
We arrived to the interface as depicted in Fig.18:
Various usability problems were detected in heuristic evaluation and were categorized into broad
heuristics and for each problem appropriate solution was recommended.
One such important problem recognition was lack of saving alert before leaving application which
violated the heuristic: recognition rather than recall. So recommended solution for this problem was
to provide a saving alert dialog which gives the user option to save the changes in bet before leaving
application.
2
6. CONCLUSION
We started this project with the study of various available games on the internet and various papers
related to interaction design and game development. Thus we arrived to our problem statement of
developing an Indian theme based web browser game.
Among various interfaces proposed, we arrived at the final interface by taking users surveys based on
rating to each interface. After designing the interface, we started to make prototype of the game using
web programming language (HTML, CSS, JavaScript, Jquery).
Link to the working prototype of the game is given in Appendix A.
At the end of the project we have successfully fulfilled our objectives
This game is currently available on the internet in its alpha version. It’s a complete game with all the
described features integrated. And we are still improving the game and aim to launch the new version of
it in the near future. Link to the working game version cab be found in the appendix.
This is the first version of the game. Various possibilities exist which we will implement and improve
the game with time.
Following are the future plans that we have currently for the game:
We can convert it into internet business plan where users have to pay entry fees for playing
games and winner will be awarded with attractive incentive.
Apart from current business game, we plan to include various other games like Pool game,
Chess, Racing games etc. in our gaming section.
We plan to establish an online gaming company if we get, good response from the users.
2
REFERENCES
2
APPENDIX A: LINKS TO ONLINE GAME ON INTERNET