Scribd
Upload
9 views

A Module Client Side Final

Uploaded by

irennaleywin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

A Module Client Side Final

Uploaded by

irennaleywin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

LKS PROVINSI WEB TECHNOLOGIES 2024

CLIENT SIDE MODULE

CONTENTS
This module has the following files:
1. MODULE_CLIENT_SIDE.docx
2. MODULE_CLIENT_SIDE.pdf
3. MODULE_CLIENT_SIDE_MEDIA.zip

INTRODUCTION
You are asked to develop a game called World Head Football using HTML and CSS and develop
client-side programming using JavaScript. Some media files are available to you in a zip file. You
can create more media and modify anything in the media if you want. Your game needs to be
developed in a tablet resolution (1000 x 600 pixels). In bigger resolution, the game must be centered
in the screen both horizontally and vertically.

DESCRIPTION OF PROJECTS AND TASKS


This is a module of 4 hours. Your first 2 hours must be used to create the initial layout using
HTML/CSS. Your layout should follow the design that you created. The final 2 hours you will create
the functionality of the game using JavaScript that allows the game to work correctly in different web
browsers.

World Head Football game screen should have meet these requirements below:
1. Player Name
2. Gameboard
3. Player Character
4. Country Flag
5. Total Score
6. Timer
7. Match History
LKS PROVINSI WEB TECHNOLOGIES 2024

Design and Initial Layout


1. Develop the initial markup (HTML + CSS) of your game application. Overall screen must be
within 1000 x 600 pixels and centered on the screen.
2. The design should be delivered in dark mode color. You are free to choose dark color as
long as it has the user convenience.
3. You are free to decorate the game screen design as long as it meets the requirements.
4. The HTML and CSS code must be valid in the W3C standards for HTML5 and CSS3 rules in
accordance with the WCAG and standard ARIA (Accessible Rich Internet Applications Suite)

Game Functionalities
1. Show game welcome in the center after pages are loaded.
2. Players can go to the game after filling the username field and click the “Play Game” button at
the bottom of the welcome page.
3. The “Play Game” button should be disabled if the user did not input the username.
4. User must choose one from each option:
a. one of three levels (easy, medium, hard).
b. one of two balls to be used.
c. one of many countries as player 1 and one as player 2.
5. Game instructions should be shown after the page is loaded.
6. After clicking the “Instruction” button, it shows game instructions.
7. Users can close instructions after clicking the “X” button.
8. Show countdown for three seconds in the center of screen after the user clicked the play
button before the game started playing.
9. When the game starts, the timer will start with time according to level.
a. ’30 seconds’ for easy level
b. ‘20 seconds’ for medium level
c. ‘15 seconds’ for hard level
10. The player 1 position will be on the left and the player 2 will be on the right
11. The ball will appear from top to bottom in the middle of 2 characters.
12. The ball will bounce when it hits the body part of the character.
LKS PROVINSI WEB TECHNOLOGIES 2024

13. Player 1 move the character using the following buttons:


a. “A" to move left
b. “W” to jump
c. “D” to move right
d. “Space” to kick the ball
14. Player 2 move the character using the following buttons:
a. “Left arrow” to move left
b. “Right arrow” to move right
c. “Up arrow” to jump
d. “Enter” to kick the ball
15. Items will drop every 5 seconds.
16. The items that will drop are as follows:
a. Increase Ball box to increase ball size
b. Decrease Ball box to decrease ball size
c. Diamond ice to freeze ball in 3 seconds
17. Item will disappears after being hit by the ball
18. Walking animations are showing as the characters are moving.
19. The score will be increased if the player can score a goal against the opponent.
20. After a goal, the ball will disappear and reappear from top to bottom in the middle of 2
characters.
21. Players can pause the game.
22. Press Esc to open the pause popup. The game should be in a paused state when opening the
popup.
23. Press Esc again to continue or click the “continue” button and the countdown should appear
before the game continues.
24. Game Over when the timer time is up.
25. If the time is over but the score is still the same, then one of the characters must score again,
then the game is over.
26. Show popup after game over to display the player username, the countries, scores, save
match history button, and restart button.
27. Match results should be saved in the local storage after the player clicks the “Save Score”
button.
28. Players are able to see the match history after clicking the Match History Button.
29. Match history can be sorted by score or last matches based on user choices.
30. The game needs to work correctly in Google Chrome.
LKS PROVINSI WEB TECHNOLOGIES 2024

EXAMPLE
These following images are for example purposes only. You may design your own game layout.

INSTRUCTION FOR COMPETITORS


1. The media files are available in the ZIP file. You can modify the supplied files and create new
media files to ensure the correct functionality and improve the application.
2. The entry file should be ‘XX_CLIENT_SIDE/index.html’
3. You should create additional images for each of the requested resolutions to highlight hidden
elements, animations, interactions, or any additional information that will assist in the
presentation of the game design.
4. Save the working game to the directory on the server named "XX_CLIENT_SIDE". Be sure that
your main file is called index.html.
5. You are responsible for the time management in your development. If you finalize some tasks
you can continue to other tasks.

You might also like