Take Home Case

Web Design

Periode Berlaku Semester Ganjil 2022/2023 Software Laboratory Center

Valid on Odd Semester Year 2022/2023 Assistant Recruitment 23-1

Materi
Material
 Website Prototype
 HTML
 CSS
 Javascript
 jQuery
 HTML5

Soal
Case

JeTe Knight
JeTe Knight is an action-adventure video game developed and published by independent
studio Amigo. It was released in 2017 for Microsoft Windows, macOS, and Linux, and was later
released for the Nintendo Switch, PlayStation 4, and Xbox One.
In the game, players control a small, silent knight on a journey to uncover the mysteries of
the abandoned insect kingdom of Hallownest. You as a intern on Amigo studio asked to make a
demo game to the introduction JeTe Knight to the worldwide.
 Prototype
 Ensure that the website prototype is exactly the same with the JeTe Knight website.
Consider the color, layout, and consistency when designing the prototype.
 Make sure to utilize Figma’s features when creating the prototype, such as color styles,
components, effects, variants & interactive component, and navigation. You must create
reusable item (button, input text, etc.) and interactive component (hover, click, etc.) using
component and variant.
 Use the asset that have been provided for both website the website prototype.

Halaman : 1 dari 34
Page 1 of 34
  The website consists of two pages and two modal. They are Home Page, Game Page, How
to Play Modal, and Keyboard Mapping Modal.
 Navigation Bar
 This navigation bar contains of 3 menus, home, how to play, play for free.
 If the home, and how to play menu get hovered, underline text will be showed up.
 If the play for free button get hovered, you can freely choose the hover effect such as
change color, scaling, border radius etc.
 Please make sure this navigation bar in exists in all page.
1. If user click the home, then:
o Redirect to the home page
2. If user click the how to play, then:
o Open the modal
3. If user click the play for free, then:
o Redirect to the game page

Figure 1. Navigation Bar

 Footer
 This footer contains of 3 external link, discord, facebook, twitter, and the footer text.
 Please make sure if user click the external link they will redirected to the external link.
 The external link must be upward when hovered.
 Please make sure this navigation bar in exists in all page.

Figure 2. Footer

 Home Page
 This home page contains of 7 sections.
 The 7 section contains of Jumbotron, Description, Video Intro, News, Main Character, All
Bosses, Official Soundtrack.
1. Jumbotron

Halaman : 2 dari 34
Page 2 of 34
 o Display the navigation bar on the top of the jumbotron.
o Use video from the assets for the jumbotron background.
o Display logo on the center of the jumbotron.
o Display the latest news on the bottom of the jumbotron, the latest news consists
of date, title, and gray line. If the user hovers on the latest news card, then the
gray line will be changed to red line and the card will be larger.
o You need to create a bottom black gradient for the jumbotron and the main
background.

Figure 3. Jumbotron

2. Description
o Display a card carousel consist of description title, description text, and
description image.
o Add a three red circle indicator to indicate current carousel index.
o Don’t forget to add left and right arrows to change the card carousel.

Halaman : 3 dari 34
Page 3 of 34
 Figure 4. Description

3. Video Intro
o Display a YouTube video using iframe from the link below
 [Link]

Figure 5. Video Intro

4. News

Halaman : 4 dari 34
Page 4 of 34
 o Display a 4-news card, each news card contains of news title, news text, news
image.

Figure 6. News

5. Main Character
o Display main character image, title, description, and button to links to external
link (wikipedia)

Figure 7. Main Character

6. All Bosses:
o Display all boss’s cards in the 4 rows. Each card contains a boss image, and a boss
title.
o Please make sure the Boss title only shows if the card is hovered.
o Don’t forget to make an animation where the odd row must move from right to
left and the even row must move from left to right.

Halaman : 5 dari 34
Page 5 of 34
 Figure 8. All Bosses

7. Official Soundtrack
o On the left side of the container, display title, description, and a button to
download the soundtrack. You can freely choose any audio asset in the folder to
be downloaded.
o On the right side of the container, displays the soundtrack image.

Figure 9. Official Soundtrack

Halaman : 6 dari 34
Page 6 of 34
 Modal
 This section is appear if the user click how to play in the navigation bar. Which mean this
section will appear in both home page and game page.
 This section contain of 2 pages:
- How to Play
- Keyboard Mapping.
 Display current page and the max page divided by ‘/’.
 Display X Button to close the modal.
 Display right, and left cursor to change page in the modal.
1. If user show how to play page, then:
o Display all instruction text in the line using <ul> and <li>.
o You need to add ‘#’ to the instruction text using before selector css.

Figure 10. Modal

2. If user show keyboard mapping page, then:

o Display a keyboard mapping header.
o Display a virtual keyboard. Please color the usefull key differently then others.
o If the user press a key on their keyboard and the key is exists in the virtual
keyboard, then darken the color of the key by 300ms.
o If the user press the usefull key then display the key description on the game.
Key Action

Halaman : 7 dari 34
Page 7 of 34
 Esc Pause the game
E Interact (used when go to the boss or the
rest)
S Player Dash
F Active Fullscreen Mode
Z Player Jump
X Player Attack
A Player Blast
Space Interact (used when go to the boss or the
rest)
Arrow Up Player Jump
Arrow Left Player Move Left
Arrow Right Player Move Right

Figure 11. Keyboard Mapping

 Game Page

Halaman : 8 dari 34
Page 8 of 34
  Display the background given on the asset as the background of game page.

Figure 12. Background Game Image

 In the center of the page display the game canvas of the demo game.

Figure 13. Game Page

 Environment
 You need to make custom scroll bar based on the below image.
 Below is the recommended specification for the scroll bar:
Thumb Color #FF5C5C

Halaman : 9 dari 34
Page 9 of 34
 Thumb Border Radius 10px
Scrollbar Background #000000 (Black)

 Don’t forget to give icon to the web. The icon url is, ‘assets/[Link]’.
 Make a simple responsive design using media query and meta viewport. So the web still can
be seen if user using different view port.

Figure 14. Custom Scrollbar

 Demo Game
 The game will be written using HTML5 Canvas.
 You should use game developing concepts and best practices such as main game loop,
state,or any pattern that the game needs.
 You must calculate your own delta times.
 All the movement in the game needs to times by delta times, because it will made the
game frame independent.
 Use object-oriented programming concepts to aid you in your development process.
 This is the recommended settings for the game:
Width 2000px
Height 1200px
Gravity 2650px/s x delta

Halaman : 10 dari 34
Page 10 of 34
  The following Demo Game consist of :
1. Main Menu
o Display logo and start video.
o Display Start Game at the bottom of the logo.
o If user click start game then the game will be start.

Figure 15. Start Game

2. Home Game
o When the game has started, play the home.mp3 on the asset folder.
o Start to calculate the FPS (Frames Per Second) and show it at the right of the
game.
o Display main background.
o Display the ground.
o Display the foreground.
o Display the main character in the center of the game.
o Display three platform with minimum width is 300px. This is the recommended
settings for the platform :

Halaman : 11 dari 34
Page 11 of 34
 Platform 1 X: 300, Y: 800, W: 400
Platform 2 X: 900, Y: 700, W: 300
Platform 3 X: 400, Y: 600, W: 300

o Please make sure the platform is collideable as a ground to Main Character &
Enemy. Mean’s that Main Character can jump into the platform.
o Display UI interface for health & point.
o Display boss door at the right of the game.
o Every 10 seconds generate 2 Crawlids and 1 Vengefly. For reduce so many crawlid
and vengefly validates if the alive Crawlid and alive Vengefly is more than 10, then
don’t generate another Crawlid and Vengefly.

Figure 16. Home

3. Player
o You wil need to create a main character avatar.
o Please use all animation that provided. Below are the animations that will be used :

Idle /assets/game/hero/idle
Attack /assets/game/hero/attack

Halaman : 12 dari 34
Page 12 of 34
 Dash /assets/game/hero/dash
Dead /assets/game/hero/dead
Hit /assets/game/hero/hit
Jump /assets/game/hero/jump
Splash 1 /assets/game/hero/splash_1
Splash 2 /assets/game/hero/splash_2
Walk /assets/game/hero/walk
Blast /assets/game/hero/blast
Blast Particle /assets/game/hero/particle/blast_particle

o Please use all sounds that provided. Below are the sounds that will be used :
Dash /assets/game/audio/hero_dash.wav
Hit /assets/game/audio/[Link]
Jump /assets/game/audio/hero_jump.mp3
Attack /assets/game/audio/[Link]
Blast / assets/game/audio/hero_blast.wav

o Below is the recommended specification for the character:

Character Damage 1
Character Width 87.5 px
Character Height 105 px
Character Max Speed 300 px/s
Character Jump Force 1100 px/s
Character Dash Force 1500 px/s
Character Dash Timeout 500 ms
Character Max Health 5 healths
Character Fade Timeout 3000 ms
Character Knockback Power 200000 * delta
Character Knockback Ressistance 1000 * delta
Death Black Screen Timeout 3000 ms

Halaman : 13 dari 34
Page 13 of 34
 o You need to render a light that always appear behind the character.
o Below player will have different states depending on what it is currently doing. The
states are listed as follow:
 Dashing
 Character will enter a dashing state if the player presses the ‘s’ button.
 When character is dashing, play the dashing animation.
 While dashing, character will have brief invicibility.
 The dashing will be a top priority, which means the player cannot do other
actions that will cancel the dashing.
 Play Dash sound when character is dashing
 Attack
 Character will enter attack state if the player presses the ‘x’ button.
 When Character is attacking, play the attacking animation. There are 2
attack animation that provided. You need to use two of them periodically.
 When attacking, make a splash particle in front of the character is heading.
Use the splash particle that provided to make an animations.
 Hit
 The game will pause for 0.5 seconds if it collides with the enemy.
 Character will enter hit state for 3 seconds if it collides with the enemy. And
don’t forget to render a hit particle animations that provided.
 In the hit state, please make sure the character won’t be hitted again
(invicible).
 Character’s HP will be decreased by one if it got hit by the enemy.
 Display character fade in & fade out periodicly when in the hit state.
 Jumping
 Character will enter jumping state if the player presses the ‘z’ button.
 When character is in the air, play the jumping animation that provided.
 When character jumps, play the jumping sound that provided.
 Death
 Character will enter death state if the player HP below than zero.

Halaman : 14 dari 34
Page 14 of 34
  Character will play death animation and the body will moving upward.
 Don’t forget when the body is moving upward then, shake the character.
 Render a death message for 3 seconds after the character is die.
 Blast
 Character will enter blast state if the player presses the ‘a’ button. Please
make sure, this state only occurred if player is grounded.
 When blast is created create and render a blast particle.
 Create a blast that goes with the direction of the character. It’s mean if the
character is turn left then blast will go to the left, and vice versa.

Figure 17. Main Character

4. Crawlid
o You will need to create a enemy called Crawlid.
o Crawlid will move forward from the currently direction.
o If Crawlid collides with left corner canvas or right corner canvas. Crawlid direction
will be changed.
o Please use all animation that provided. Below are the animations that will be used :
Walk /assets/game/crawlid/walk
Die /assets/game/crawlid/die

o Please use sounds that provided. Below are the sounds that will be used :

Halaman : 15 dari 34
Page 15 of 34
 Death /assets/game/audio/crawlid_death.wav

o Below is the recommended specification for the Crawlid:

Crawlid Speed 24 px/s
Crawlid Max Speed 50 px/s
Crawlid Width 70 px
Crawlid Height 70 px

o Crawlid only had 1 HP that will automatically die, if the player hitted.
o If Crawlid die there’s will be a knockback distance and death animation.
o Don’t forget to add coin to the player if the Crawlid has die.

Figure 18. Crawlid

5. Vengefly
o You will need to create a enemy called Vengefly.
o Vengefly will fly forward from the currently direction.
o If Vengefly collides with left corner canvas or right corner canvas. Vengefly
direction will be changed.
o Vengefly have ability to chasing main character if in the check radius. If vengefly is
chasing then, increase the max speed to 100 px/s.
o Please use all animation that provided. Below are the animations that will be used :
Fly /assets/game/boofly/fly

Halaman : 16 dari 34
Page 16 of 34
 Die /assets/game/boofly/die

o Please use all sounds that provided. Below are the sounds that will be used :
Death /assets/game/audio/venge_death.wav

o Below is the recommended specification for the Vengefly:

Vengefly Width 70 px
Vengefly Height 70px
Vengefly Speed 24 px/s
Vengefly Max Speed 50 px/s
Vengefly Max Chase Speed 100px/s
Vengefly Check Radius 400px/s

o Vengefly only had 1 HP that will automatically die, if the player hitted.
o If Vengefly die there’s will be a knockback distance and death animation. Make
sure that vengefly will falldown if they die.
o Don’t forget to add coin to the player if the Vengefly has die.

Figure 19. Vengefly

6. Rest
o You will need create a bench for main character can rest.
o If the bench is colliding, then user can rest if they press ‘e’ or ‘space’ button. Don’t
forget to create Rest text at the bottom right of the canvas.

Halaman : 17 dari 34
Page 17 of 34
 o If user is interact with the rest, then fade the white screen for 300ms, then make
the character health into max health.

Figure 20. Rest

7. Splash
o The splash are the first damage dealer of the main character.
o There are 2 splash animations that provideds. Please used it periodically.
o If the splash is colliding with enemy, then enemy will get hit. And render the hit
particle. Don’t forget to decrement enemy HP by player damage.
o Below are the animations that will be used:
Splash 1 /assets/game/hero/splash_1
Splash 2 /assets/game/hero/splash_2
Hit Particle /assets/game/particle/hit

Halaman : 18 dari 34
Page 18 of 34
 Figure 21. Splash

8. Blast
o The blast are the second damage dealer of the main character.
o Blast will always go forward.
o Validate if blast is bounding the canvas, then remove it.
o If blast collides with the enemy, then enemy will get hit. And render the hit
particle. Don’t forget to decrement enemy HP by player damage.
o Please use all animation that provided. Below are the animations that will be used :

Blast /assets/game/particle /blast

o Below is the recommended specification for the blast:

Blast Speed 3000 px/s
Blast Max Speed 3000 px/s
Blast Timeout 10000 ms

Halaman : 19 dari 34
Page 19 of 34
 Figure 22. Blast

9. False Knight
o You will need to create a boss avatar called False Knight.
o If boss hitted when he was not in the stun state, then player damage will be afftect
to the boss armor.
o Below player will have different states depending on what it is currently doing. The
states are listed as follow:
 Idle
 In this state, boss will waiting for 1 second to generate another state.
 There are 2 state can be generated which is jump state and attack prep
state and the possibility is 50 : 50.
 Attack Preparation
 Boss direction will automatically follow the player position. It’s mean if the
player is in the left side of the boss, then boss will face up to the left side,
and vice versa.
 In this state, boss will waiting for 3 seconds. Until go to the next state Attack
State.
 Attack
 In this state, boss will hit the ground with provided animations.
 Make the boss hit 3x times to hit the ground then boss will be going to idle
state.

Halaman : 20 dari 34
Page 20 of 34
  When hitting the ground shake the screen for 2 seconds. And it will
generate 3 barrel.

 Jump
 Boss direction will automatically follow the player position. It’s mean if the
player is in the left side of the boss, then boss will face up to the left side,
and vice versa.
 The recomended boss jumping force is 1500, and have a static horizontal
speed by 1000px/s.
 Land
 Boss said to be landed if he was in the jumping state, and grounded.
 Stun
 This state can occur if the boss armor is below or equal than zero.
 If their’s getting hit by player decrement the boss hp by player damage.
 Don’t forget to validate if the hp is below or equal than zero, then the boss
will going to death state.
 Death
 In this state, the ghost will be out of the boss body, and start the credit
scene.
o Below is the recommended specification for the Boss:
Boss Width 550 px
Boss Height 400 px
Boss Attack Preparation 24 px/s
Boss Attack Times 3x times
Boss Jump Force 1500 px

Halaman : 21 dari 34
Page 21 of 34
 Boss Health 30 health
Boss Armor 10 armors
Bos Jump Speed 1000 px
Boss Death Speed 800 px
Boss Stun Time 5000 ms
Boss Max Speed 300 px/s

o Please use all animation that provided. Below are the animations that will be used :
Attack /assets/game/boss/attack
Attack Preparation /assets/game/boss/attack_prep
Die /assets/game/boss/die
Ghost /assets/game/boss/ghost_die
Idle /assets/game/boss/idle
Jump /assets/game/boss/jump
Land /assets/game/boss/land
Stun /assets/game/boss/stun

o Please use all sounds that provided. Below are the sounds that will be used :
Attack Preparation /assets/game/audio/false_knight_attack.wav
Jump /assets/game/audio/false_knight_jump.wav
Land /assets/game/audio/false_knight_land.wav
Attack (Strike) /assets/game/audio/false_knight_strike.wav

Halaman : 22 dari 34
Page 22 of 34
F Fig
ure 23. False Knight

10. Cheat Codes

o There are a cheat codes on the game to help user finishing the game.
o Cheat codes activated when user texting the code while in the game.
o You need apply minimal 5 cheat codes in the game.
o Below is the explanation and codes list for the Cheat:
22-1 100 Damage on Normal Attack
icanfly Upgrade Character Jump Force
hesoyam Max Health
candi Add 10 Point & 10 Blast Power
rataampas Player Invicibility
crazy Character Dash Time to 3000ms
jokes Turn Background to Black
mixue Change Rest Sprite with Mixue Sprite

Halaman : 23 dari 34
Page 23 of 34
 o When cheat is triggered there’s an activated text on the left bottom corner for
2500ms.

Figure 24. Cheat Activated

11. Barrel:
o Barrel will be generated if False Knight strike the ground. It will first appear at the
top of the canvas and have a downward direction.
o Barrel can hit player while they intersect.
o If barrel is hitting ground or getting hit by player then, destroy the barrel.
o There’s a particle and sound when barrel is destroyed.
o Below is the recommended specification for the Barrel:
Barrel Width 150 px
Barrel Height 140 px
Barrel Speed 1000 px/s
o Please use all image that provided. Below are the image that will be used :
Barrel /assets/game/object/[Link]
Barrel Particle /assets/game/particle/barrel
o Please use all sounds that provided. Below are the sounds that will be used :
Barrel Destroy /assets/game/audio/barrel_death.wav

Halaman : 24 dari 34
Page 24 of 34
 Figure 25. Barrel

12. Boss Door:

o Boss door will have 2 states, closed, and open.
o Closed state will be the default state of the game. It’s mean when user first time
start the game the boss door will closed.
o The boss door will open if the coin is more than 10. Make an animation that door
will move from top to bottom and the light will shine from the middle of the door.
Please validate if the boss door still animated player can’t interact / go to the boss
room.
o If the player is collide with the boss door, then :
 Show text ‘Space’ To Interact to the bottom left of the canvas.
 If the user press ‘Space’ then user will go to the boss room.

Halaman : 25 dari 34
Page 25 of 34
 Figure 26. Closed Boss Door

Figure 27. Opened Boss Door

Halaman : 26 dari 34
Page 26 of 34
 13. Boss Room
o Change the background with boss room background.
o Play the boss.mp3 on the asset folder.
o Spawn the boss at the center of the game.
o Teleport the character to the left corner of the game.

Figure 28. Boss Room

14. Player Bar

o There are two main component in the bar :
 Point
 This point is represent current player point.
 Health Symbol
 This symbol represent player health. If the player health is 5 then, display 5
health symbol. If there is any chance the player getting hit, then the health
symbol will be decrease.

Figure 29. Player Bar

Halaman : 27 dari 34
Page 27 of 34
 15. Pause Game
o There are four main button in the pause game :
 Continue
 If user click continue, then the remove the pause UI, and resume the game.
 Show FPS
 If user click show FPS button, it will toggle FPS counter visibility in the right
top corner of the canvas
 Volume
 You can adjust Game Volume, by dragging the input. Please make sure that
the far left range is the most smallest volume, and vice versa.
 Exit Game
 If user click show Exit Game, user need to back to the menu. You can freely
use whatever algorithm to back to the menu.

Figure 30. Pause Game

Halaman : 28 dari 34
Page 28 of 34
 16. Environtment
o There is a some layer you needs to build in this game :
 Camera
 Canvas will always zoom and look at the main character.
 Make sure, the character is in the middle of canvas.

Figure 31. Without Camera

Halaman : 29 dari 34
Page 29 of 34
 Figure 32. With Camera

 Main Background
 Main background have ability to move by 10px/s when user is moving. It’s
mean when user is moving to the left, then background will move from left
to the right, and vice versa.

Halaman : 30 dari 34
Page 30 of 34
 Figure 33. Home Background

Figure 34. Boss Background

Halaman : 31 dari 34
Page 31 of 34
  Foreground
 Foreground have ability to move by 30px/s when user is moving. It’s mean
when user is moving to the left, then foreground will move from left to the
right, and vice versa.

Figure 35. Foreground

 Ground
 Ground is an object that can be collided. It’s mean when player step on the
ground player will not fall down to the canvas.
 You need to make the ground with the given asset, please make sure the
ground doesn’t have a gap.

Figure 36. Ground

 Flies
 To prevent the game getting to dark, generate 15 flies in random position
on the canvas. Please make sure if the flies cannot be on the bottom of the
ground.

Halaman : 32 dari 34
Page 32 of 34
 Figure 37. Flies

17. Credit Scene

o This credit scene is occur if player has defeat the boss.
o Pause / turn down all current played audio.
o Play the victory.mp3
o There’s will be a fade in black screen for 5 seconds.
o Create text credit animation that will move from bottom to up.
o If all text credit is showed then, show the video that’s used in jumbotron
(header.mp4). And don’t forget to put [Link] at the middle of the video.

Figure 38. Credit

Halaman : 33 dari 34
Page 33 of 34
 Figure 39. Video After Credit

Please run the EXE file to see the sample program.

Halaman : 34 dari 34
Page 34 of 34