Designing the User Experience: Interactive Web Game Design Document

Desklib provides past papers and solved assignments. This solved assignment details the design of an interactive web game.

SOUTHERN CROSS UNIVERSITY
ASSIGNMENT COVER SHEET
For use with online submission of assignments
Please complete all of the following details and then make this sheet the first page of each file of
your assignment – do not send it as a separate document.
Your assignments must be submitted as either Word documents, text documents with a .rtf
extension or as .pdf documents. If you wish to submit in any other file format please discuss this
with your lecturer well before the assignment submission date.
Student Name: _kranthi balerao___________________________
Student ID No.: _23082214___________________________
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: _ms carolyn seton___________________________
Assignment No.: Assignment 1, Part A - Design Documentation
Assignment Title: Interactive Web Content
Due date: __05 april 2019__________________________
Date submitted: __05 april 2019_________________________
Declaration:
I have read and understood the Rules Relating to Awards (Rule 3 Section 18 –
Academic Misconduct Including Plagiarism) as contained in the SCU Policy Library. I
understand the penalties that apply for plagiarism and agree to be bound by these
rules. The work I am submitting electronically is entirely my own work.
Signed:
(please type
your name)
__kranthi balerao__________________________
Date: ____05 april 2019________________________

[Theif daddy]
Design Documentation
By [kranthi balerao]

Introduction
In this game, the player goes to the building to steal the money. in this game, there are 20
floors where different tressures are placed on each floor. there are policemen present on
various floor. if the thief hits the policemen he is caught, and the game is over. there are
different powers present such aa bathtub which allows the thief to jump 3 floors at a time
and all the treasure present on the floor are added to the bag. there are television present
on certain floors if the thief collects the television then he is protected and can't be caught
by the policemen. the thief enters the building from the bottom and goes through the roof
to navigate within the building. the thief can navigate only in an upward direction and has
the control to move left & right to dodge or collect the items.
Wireframe
The wireframe prototype to demonstrate this storybook can be found at
Theme
The theme is created with a mixture of Cartoon and seriousness. in this dad is the thief who
steals money so that he can buy some food for poor children. the story is semi-serious and
emotional as the thief is stealing money for a good cause, but the method is wrong.
The story is well explained by using animation and the thief was poor when he was young.
the thief doesn't want other kids to go through the same problem as he went. the thief
enters a building where police try to catch the thief and the runs after money. the
background music is fast and enthusiast music.
Storyboards
The following storyboards on the following pages provide a more detailed explanation of
the planned product.
(Note that: At least one storyboard should be provided for each page of your story. You may need to provide a separate storyboard for some of your banner/animations
in order to describe/demonstrate your planned design ideas. The following storyboard format is one option. You may choose other formats as
long as you include the same details)

Title:Theif Daddy Frame ID: Home
Dimensions: This game would be using maximum space available.
Media Used:
Thief: in this, the thief will silently go into the house and will steal the gold.
Atmosphere: The sound in the background would be something like fast beats so that the
player is motivated to steal more and get excited.
Music: Rock music to maintain the enthusiasm .
Scene/Game Loading: there would be a sound when the thief is caught.
IMAGES
There will be a animation of thief that he is trying to steal the gold and a policeman came into the
house and the thief runs away.
Buttons:
There will be a button to start the game that will come after the animation part completed.
Background:
The initial screen of this would be a dark image having dark sound with thief and the name of the
game.
Home Screen:

Home Screen: This is the home screen of the game having a dark background image with a stable
image and having on movable image also with start button.
Music: There is a dark background music in this screen that will stop after the end up of the screen.
Image: There is three images in this screen and one image is stable which is thief and two images are
in the movable condition.
Fonts: There is font given which is of 20 PX and displaying the title of the game.
MAIN SCREEN
Main Screen: After clicking on the start button this scree will come up and in this screen the thief will
try to steal the gold from the policeman house.
Music: There will be a dark background music is given in this screen.

Animation: Each and every image in this screen is in movable condition and the animation working
perfectly in this screen. There is an image which is constant and remains all things
are in the movable contidion.
Fonts: There is a font given in this screen that displaying the moto of the objects. The font available
in the arial black form.
FINAL SCREEN
Final Screen: This is the final screen of the game having the police car with the thief and the
policeman.
Background: When the thief will run from the policeman house after that the police car will be
available outside the home and the thief have been caught.
Music: There is a police car siren music is given in the background of this screen.
Animation: Each and every object is in the movable condition and there is exit button also in this
screen after clicking on that button the game will exit.
Description (purpose / objectives):
There will be three different screen in this game. This game is based on the thief daddy
game. There will be a thief in this game and he will try to steal the
gold from the policeman’s house and have been caught.
Animations:
The thief would be in running position and will try to steal the gold and the policeman will
come inside the house and the thief will run away. Each and every
object will be in running condition.

User Interactions Required:
When the user will click on the start button after that the next screen will appear and in the
next screen there will be many movable object and the thief will try
to steal the gold.
Navigation / Links:
Navigation would be provided for the main page
another button would be there for settings.
Technical specifications (optional)
(Simple example below could be provided if these details are not provided on storyboards)
Web page dimensions: 600 x 900 pixels. Banner dimensions:
1) Horizontal banner: 200 pixels wide x 40 pixels high;
3) Vertical banner: 660 pixels wide x 690 pixels high;
2) Button 1: 25 pixels x 25 pixels;
4) Button 2: 80 pixels wide x 50 pixels high;
5) Custom 1: 320 pixels x 520 pixels;
6) Custom 2: 360 pixels x 650 pixels.
Media List/References (if required)
Im
age
na
me
or
des
cri
pti
on
Resource address/URL
Fon
ts:
He
ad
not
es
Bus
ted
hea
din
https://www.gograph.com/clipart/cartoon-thief-gg70193854.html

gs
Dar
k
The
me
bac
kgr
ou
nd
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiN6Ibp-
NjhAhVHknAKHbiuA4oQjRx6BAgBEAU&url=https%3A%2F%2Fsteamcommunity.com
%2Fsharedfiles%2Ffiledetails%2F%3Fid
%3D679503310&psig=AOvVaw2pOdMEsjzd8dllbde2uV_S&ust=1555652735727133
Thi
ef
Im
age
:
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwini5Ok_9jhAh
XLs48KHU1VDtwQjRx6BAgBEAU&url=https%3A%2F%2Flongfordpc.com%2Fexplore
%2Fburglar-clipart%2F&psig=AOvVaw3_2GiGneI2wc365QRdhUHK&ust=1555654615027151
Gol
d
Im
age
:
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwivkNiwgNnhA
hVJLo8KHWKMAAoQjRx6BAgBEAU&url=https%3A%2F%2Fwww.searchpng.com
%2F2018%2F12%2F17%2Fgold-coins-on-transparent-background-free-download
%2F&psig=AOvVaw2NkoRwbjivdiDBggiEvuBE&ust=1555654921474850
Sta
rt
Bu
tto
n
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiAmJ2-
gdnhAhUBNo8KHf89BtYQjRx6BAgBEAU&url=http%3A%2F%2Fpixelartmaker.com%2Fart
%2F06f0e83a76f61b4&psig=AOvVaw20BmDkxBoxVFcVI8LijpNa&ust=1555655180248256
Go
_H
om
e:
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiljKjlhtnhAhUK
to8KHVs2CIAQjRx6BAgBEAU&url=https%3A%2F%2Fwall.alphacoders.com%2Fbig.php%3Fi
%3D680980&psig=AOvVaw1g5chlSkaoy6ivYBs_xmy2&ust=1555656525203630
Gol
d
Coi
n:
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwibuoWbj9nhAhWHQ48KHcOGA
_EQjRx6BAgBEAU&url=https%3A%2F%2Fpngriver.com%2Fdownload-bitcoin-logo-png-
transparent-images-38-images-8798%2F&psig=AOvVaw1NoQM6PB-
W48bvgnHU97fP&ust=1555658428081819
Poli
ce:
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjs5d2-
l9nhAhUMpI8KHd0wC4oQjRx6BAgBEAU&url=https%3A%2F%2Fwww.nickindia.com
%2Fshow%2Fgattu-battu
%2F&psig=AOvVaw3Bdd_VKb9tGT0wTcL47UjL&ust=1555661098376440
Bac
k
Bu
tto
n
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiCi7GQsdnhAh
XFvI8KHUXyATIQjRx6BAgBEAU&url=https%3A%2F%2Fwww.pngarts.com%2Fexplore
%2F74974&psig=AOvVaw0h_nYHm5csQQYAw1COICAs&ust=1555667895867906
Poli
ce
Car
https://www.google.com/url?
sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwjs5eHitNnhAhUHMo8KHQ2-
CqEQjRx6BAgBEAU&url=https%3A%2F%2Frequestreduce.org%2Fcategories%2Findian-
police-jeep-clipart.html&psig=AOvVaw18JVBia88tKL8IK4ORYH_p&ust=1555668993804210
Mu
sic
https://downloads.khinsider.com/game-soundtracks/album/call-of-duty-advanced-
warfare/02%2520Draconian%2520Dream.mp3