Interactive Web Content Design Documentation: Ninja's Quest Game

Desklib provides past papers and solved assignments. This document details the design of Ninja's Quest, an interactive web game.

CSC10214 Assignment 1
SOUTHERN CROSS UNIVERSITY
ASSIGNMENT COVER SHEET
Student Name: Ashok Linga
Student ID No.: 23132054
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: Mr Adam Fletcher
Assignment No.: Assignment 1, Part A- Design Documentation
Assignment Title: Interactive Web Content
Due date: 05-04-2019
Date submitted: 05-04-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: Ashok Linga
Date: 05-04-2019

CSC10214 Assignment 1

CSC10214 Assignment 1
[Fruit Ninja]
Design Documentation
By [ASHOK LINGA]

CSC10214 Assignment 1
Table of Contents
Introduction........................................................................................................ 1
Wireframe.......................................................................................................... 1
Theme............................................................................................................... 1
Storyboards........................................................................................................ 1
Technical specifications (optional)............................................................................8
Media List/References (if required)...........................................................................8
Introduction
The game selected here is known by the name of the NINJA’s QUEST. This game is
based on the reflection towards an event. Checking the alertness of the brain is the
main purpose of this game. The main thing that inspired me to develop this game is to
test my ability and my current alert status of the brain using something fun and
interesting. This can be done using this game.
The game starts with the screen displaying the name of the game and giving the idea of
the game. The next page is the page 1 of the story book. In total, this story book has 5
pages, which includes 4 story pages and 1 intro page.
Wireframe
The wireframe prototype to demonstrate this storybook can be found at
Theme
The genre of this game is adventure, which means in order to succeed, the player must
complete all quests.
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product NINJA’s QUEST.

CSC10214 Assignment 1
Title: SPLASH SCREEN Frame ID: SPLASH
Dimensions:
The screen will use the full space as this is just like the opening scene of a movie.
Media Used:
Sound
Main music: The screen will use the background sound that will give the user a feeling of fun and
happiness. This music is to build an environment.
Knife sound: the screen will also have the sound of the ninja knife cutting to relate the cutting of
objects by real ninja.
Pictures
The screen will have pictures of the ninja warriors wearing black ninja dress and the image of the
sliced and funny sword slicing.
A depressed man walking in a jungle.
Buttons:
As this is the first splash screen, there will be no buttons.
Background:
The background screen of the intro page is a wall of ninja dojo and the background of story part is a
picture of a jungle.

CSC10214 Assignment 1
Description (purpose / objectives):
The main objective of the screen is to introduce the user about the idea of the game and to
provide the hint of what the game is related to.
Animations:
Text appearances and dialogue display using key frame and fill tool in Google Web Designer.
User Interactions Required:
The user has to click anywhere on the screen in order to move to the next screen of the
game.
User Feedback:
The sound will keep playing until the user clicks on the screen.
The user will be redirected to the next screen in order to play the game.
Navigation / Links:
To the next screen.

CSC10214 Assignment 1
Title: MAIN SCREEN Frame ID: MAIN
Dimensions:
The main button will use the minimum area and the screen will occupy the whole page.
Media Used:
Sound
Background music: this will give the hint of the ninja sword fight feel and some hints of the sword
slicing sounds.
The button sound: the sound of clicking on a button will give the user experience of system
response.
Pictures
The picture of the ninja is used in order to relate to the main theme of the game. The picture is of a
ninja wearing the black dress.
Buttons:
There are 5 different buttons:
Start button: to help user register/login in the system.
Page 1 button: to navigate to page 1 of the story
Page 2 button: to navigate to page 2 of the story
Page 3 button: to navigate to page 3 of the story
Page 4 button: to navigate to page 4 of the story.
Background:
The background of the screen is of a ninja dojo to give it more real like and relaxed look. The main
use of the background is to give an interactive look at the game.

CSC10214 Assignment 1
Description (purpose / objectives):
The main objective of the screen is to allow the user to perform three different activities:
Login: allow the user to either register or signup in the system.
Animations:
The animation used here is of the ninja movements. The black scarf on the ninja's head will
appear to be moving and the arrows in front of every button will appear to be blinking and
attractive. The page welcome message will appear and disappear in a short circle of time.
User Interactions Required:
The user has to click on the respective button in order to perform login or signup or to get
help or to play the game as a guest user.
User Feedback:
The background music of the ninja sword fight will play until the button is clicked. On
clicking on any button, the sound of swords slicing will play to give an enhanced experience
of gaming.
Navigation / Links:
Start button: to help user register/login in the system.
Page 1 button: to navigate to page 1 of the story
Page 2 button: to navigate to page 2 of the story
Page 3 button: to navigate to page 3 of the story
Page 4 button: to navigate to page 4 of the story.

CSC10214 Assignment 1
Title: GAME SCREEN Frame ID: GAME
Dimensions:
The screen will be completely utilized by the game screen as this is just like the movie in which the
ninja is slicing objects.
Media Used:
Sound
Background music: this will give the hint of the ninja sword fight feel and some hints of the fruit
slicing sounds.
The button sound: the sound of clicking on a button will give the user experience of system
response.
Pictures
The pictures of different characters in the game which includes jungle, depressed character, forest
spirit, night jungle’ s background.
Buttons:
There is a single directive on the screen, and this is the Start button. This button will take the user
from the game and the user will be directed to the main screen.
Background:
The background of the screen is in wooden color shades to give this game a feeling of Chinese ninja
vintage home.

CSC10214 Assignment 1
Description (purpose / objectives):
The main of the screen is to display the game that has been developed. The objective will be
considered fulfilled when the user will reach this screen and will be able to play and enjoy.
Animations:
The animation utilized here is the floating of the text in a repetitive loop and the click of the
button for navigation.
User Interactions Required:
The user must click on the pages button in order to navigate through story.
User Feedback:
The background music of the ninja sword fight will play until the button is clicked. On
clicking on any button, the sound of jungle will play in the background

CSC10214 Assignment 1
Technical specifications (optional)
(Simple example below could be provided if these details are not provided on storyboards)
Web page dimensions: 590 x 359 pixels. Banner dimensions:
1) Horizontal banner: 590 pixels wide x 35 pixels high;
3) Vertical banner: 145 pixels wide x 590 pixels high;
2) Button 1st (Register): 164 pixels x 27 pixels;
4) Button 2nd (Login): 164 pixels x 27 pixels;
5) Custom 1st: 230 pixels x 30 pixels;
6) Custom 2nd: 400 pixels x 300 pixels.
Media List/References (if required)
Image name or description Resource address/URL
IMAGE:
Ninja
Man
Start page background
Jungle
Jungle at night
Dialogue images
Clipart text
https://twitter.com/hashtag/ninjakrakow
https://www.rumahdesainminimalis.com/
https://www.tynker.com/community/projects/play/fruit-ninja/
569475b8436e6901538b45a7
https://airfreshener.club/quotes/game-maker-background-
forest.html
http://jackiehuang.com/kid-lit-art/
http://wigflip.com/ds/
https://cooltext.com