Bina Nusantara Skills Competition

Web Design Test Project

Created By :

Hantze Sudarma



INTRODUCTION
Indonesia Game Portal requires a website to provide gaming services to all of its users. For the grand
launching of the portal, Indonesia Game Portal needed some games that can be played via modal in
the landing page. Each of the games will have their own leaderboard in order for user to gauge their
skills against other players.

The portal needed to provide login and register features for the user. The target audience for this
website is teen and young adults that is interested in playing games created using canvas in HTML5.

They need a working website that will be stored into free git services like github or bitbucket to
make selection and implementation easier by the company. It is a plus if you can deploy the website
to a staging server.

DESCRIPTION OF PROJECT AND MODULE
Your task as a website developer is to create a design, front end and back end for the website and
make it works.

You have been provided with some images that will help you to create the website and the games.
You are not required to use all of the images; even you can add more text or images if necessary.
You need to make a good website and working games, because the website will be accessed by
users from around the country. The use of text and image will only be judged on design, not the
meaning of the text.

A. Design
In design part, you should design about at least 3 pages of website. The new design should be
developed to work on the defined devices and resolution : Desktop (1440 x 900px), Tablet (768 x
1024px) and Smartphone (320 x 480px). Just remember, you can add your own creativity on
your design. Dont be afraid to make something different rather than use a normal design or
mainstream design.

And here are some description about design task :

1. Create a logo for Indonesia Game Portal that will be used for organizations logo.
- The logo must be used as part of your design within the website concept
- Your logo must be consist of combination between shape and text IGP

2


2. Design two pages of the website
- Landing Page, including this elements:
Your logo
Interactive banner section about the game with play button of each games
Images and video gallery thumbnail section
Short text section about the website
Fixed interactive menu on the left of website
Searching section to search for other users
Social media icon (at least three social media icon)
Acknowledgment or copyright and the text Designed by : <You> at the last section
in the footer

- Register Page, including this elements:
Your logo
Register form
Captcha
Error message if user failed to register

3. You should place your work into 1 folder, which called design, you should only collect the
photoshop files (*.psd) and screenshot files (*.jpg, *.png) for each design. The naming files
should be like Computer_Landing.psd, Computer_Landing.jpg, Tablet_Register.psd,
etc.

B. Layout
In this part you should slice your own design into the html. Bonus point will be given if you
create the website without any css framework. But for javascript, you can use jquery or jquery
ui.

The page should be a responsive website similar to the design you created before. You must add
some animation or interactive interaction in your own page (the banner, the transition, hover
animation, etc.).

You should collect your job into 1 folder, which called layout, you should only collect the html
files (*.html), javascript files (*.js) and css (*.css) in the proper folder inside of layout folder.

Provision :
- The website code must validate to HTML5
- Your CSS code must validate CSS level 3
- No error and warning found in js files
- Place a comment in html, js and css files
- You should collect the fonts if you use a new font, in the folder fonts
- Some elements are only visible in wide screen layout, and the others can only appear in the
narrow screen. You decide by your own decision, which one must be shown in the wide
screen or which one must be hide
- Your website will be marked in Google Chrome

C. Game

3


In this part you should create 2 games to be played in the website. Each game must be created
using canvas and HTML5.

There are 2 games that you need to make in this section:

1. Endless runner
Endless runner game is a game which you move your character from one side of the
screen to the other endlessly. Usually there is several obstacle and item to be picked
along the way. In this game you need to make an endless running game using the
available sprites of dragon as the character, available sprites of coin as the coin, several
obstacle image and the background.

The folder media_endless contains all the files provided by the designer to develop
the games. To develop the task, you need to use HTML5 Canvas. You are free to modify
the provided files if necessary to guarantee the correct functionalities of the application.

a. When player click the play button, the game will draw the background along with a
dragon that will be used as player character flying near the bottom of the canvas while
seen moving to the right at the constant speed.

Example of game screen
b. The background needs to be created using parallax concept with 3 layer of background
provided in the media files.
c. The dragon sprites must be used to create animation of the player character.
d. The coin sprites must be used to create animation of the coin which will spawn every 5
seconds in a box of 3 x 3 coins.
e. The obstacle will consists of 2 top and 2 bottom ice spikes which provided in the
obstacle folder and will be randomly added to the game every 3 seconds.

4


f. When the player start running, his/her score will be added by his movement. At the
start of the game the player will move at the rate of 20 pixels / second and every 4
seconds it will increased by 2 pixels / second.
g. For every coin player picked up, his/her score will be added by 10 points.
h. For each round of game, player will get 3 life to get as far as he/she can in the game.
i. If he/she hit one of the obstacle, his/her life will be decreased by 1 point. When his/her
health reach zero, the game will end and a popup will show up to inform the player of
their score.
j. If the current player score is higher than the 10th place in the leaderboard, add player
score to the leaderboard.
k. When the player click the retry button in game over menu, the game will start again
with a new round of games (3 life, 0 points, speed of 20 pixels / second).

2. Tetris
Tetris is a game which you move tetrominos (geometric shapes composed of four
square blocks each) to the left and right or rotating it by 90 degrees and forming a stack
of blocks that will be destroyed if a 10 units horizontal line is formed, making all blocks
above the line fall.

For this game you must use canvas shapes as the only asset of the game, no images is
allowed to be used for this game.

a. The game consists of random falling tetrominos which the player needs to move around
in order to create a 10 units horizontal line.

b. For each 10 units of horizontal line that is destroyed, the player will receive 1 point
c. It is possible for the player to move the tetrominos to the left and right, also it is
possible to rotate the tetrominos 90 degrees clockwise, and if the player needs it, they
can make the tetrominos fall faster.
d. The player can control the tetrominos using arrow button. Left and right arrow to move
the tetrominos left and right, Up arrow to rotate the tetrominos and Down arrow to
make the tetrominos fall faster.
e. Every 10 points gained, the game will speed up the rate which tetrominos fall.
f. If the player stack the tetrominos in a certain way that the tetrominos reached the top
of the playing field, it will be a game over and a popup will show up to inform the player
of their score.
g. When the game is over and the current player score is higher than the 10th place in the
leaderboard, add player score to the leaderboard.
h. When the player click the retry button in game over menu, the game will start again
with a new round of games.

5


Please include comments in your JavaScript files to indicate the
functionalities of the code. You should collect the html files (*.html),
javascript files (*.js), and media files for each of your games in a folder
called games with a subfolder for each of the games.

D. Server Side
In this part you should only use the framework, between laravel (v5.4.*) or yii (v2.0.*)
framework. For the database you can use mysql or mariadb as the database. You should create
RESTful API with several feature listed below using PHP framework. Please note that you need
to follow Google JSON Style Guide in your JSON response.

There are some function that should be able to be used :
1. Web token to authorized user access to the website API
2. API for several feature listed below:
a. User API
User login
User registration, with fields:
1. Name
2. Username
3. Email
4. Password
5. Date of Birth
6. Phone Number
7. Profile Picture
User profile update
Get user profile
b. Captcha API
Get captcha
Validate captcha
c. Endless running game API
Get leaderboard
Save score to leaderboard
d. Tetris game API
Get leaderboard
Save score to leaderboard

You should collect the picture of database diagram (*.png), your zip projects code (*.zip),
database (*.sql) and API documentation (*.doc) in folder, which called server folder.

6


E. Implementation
In this part you should combine all of the work you created before. You need to make the front
end exactly like your designed, using your sliced html which is ported to be the website front
end using one of JS Framework (AngularJS, VueJS, React), and implement the games as a modal
when player click the Play button, also you need to connect your games and front end with the
RESTful API you created.

There is several things that you should make in this section:
1. Make sure that only logged in user can play the game, if the guest click the Play button,
show only Login & Register popup modal.
2. Both game needed to be played in a popup modal.
3. Everytime a user play the game, save the final score to the leaderboard so other user can
see who got the top 10 highest score.
4. Each game have their own leaderboard which displayed beside the game canvas.
5. When user wants to login and register, please add a simple captcha to prevent bruteforce
attack. Note that you must create the captcha yourselves.

You should collect the final working website of yours in a folder called result. Please note that
you should push all of the files, plugin and library needed to the git repository. Be careful when
setting the gitignore for this folder.

There is no limitation for the code, as long as you give an instruction (somekind of README) and
its running well. You can add another page or function if its necessary.

7


Wireframe
There is a wireframe that visualize the general layout of the website. You can refer your design
to this wireframe. But, it will be a plus if you add your own design that can improve your
website.

8



Visualization of the website structure

9




Vis
ual
iza
tio
n
of
the
po
pu
p
mo
dal
for
the
ga
me

Notes
If you are a student still enrolled in an education institution you can use Github Education Pack
to get $50 credit in Digital Ocean to deploy your website.

10