Scribd
Upload
2 views

Module Client Side

The document outlines the development of a Shooter game using HTML, CSS, and JavaScript, requiring a tablet resolution of 1000 x 600 pixels. It details the project requirements, including game functionalities, layout design, and user interactions, as well as the necessity for compliance with web standards. Additionally, it provides instructions for competitors regarding media files, file structure, and time management during development.

Uploaded by

lab3cokro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Module Client Side

The document outlines the development of a Shooter game using HTML, CSS, and JavaScript, requiring a tablet resolution of 1000 x 600 pixels. It details the project requirements, including game functionalities, layout design, and user interactions, as well as the necessity for compliance with web standards. Additionally, it provides instructions for competitors regarding media files, file structure, and time management during development.

Uploaded by

lab3cokro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

CLIENT SIDE MODULE

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

INTRODUCTION
You are asked to develop a game called Shooter 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 3 hours. You can create the layout using HTML/CSS and create the
functionality of the game using JavaScript that allows the game to work correctly in different web
browsers.

Shooter game screen should have meet these requirements below:


1. Player Name
2. Gameboard
3. Gun Type
4. Target
5. Total Score
6. Timer
7. Shoot History

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. You are free to decorate the game screen design as long as it meets the requirements.
3. 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 guns to be used.
c. one of three targets to be used.
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. Add target randomly every 3 seconds.
11. The target will appear with animation.
12. When the game starts, there will be 3 random targets
13. The pointer will appear in the center of the screen and move with the mouse
14. gun will move follow pointer motion.
15. Player can shoot with click
16. Target will disappears after being hit by the shoot.
17. If the shot does not hit the target, the time will be reduced by 5 seconds
18. The score will be increased if the player can shoot to target.
19. Players can change guns after pressing the space button
20. There is an animation when changing guns.
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. Show popup after game over to display the player username and scores, save match history
button, and restart button.
26. Match results should be saved in the local storage after the player clicks the “Save Score”
button.
27. Players are able to see the match history after clicking the Match History Button.
28. Shoot history can be sorted by score or last matches based on user choices.
29. The game needs to work correctly in Google Chrome.

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

Show Instruction
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