PAUD

CLIENT SIDE MODULE

CONTENTS

This module has the following files:

MODULE_CLIENT_SIDE.docx

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:

Player Name

Gameboard

Gun Type

Target

Total Score

Timer

Shoot History

Design and Initial Layout

Develop the initial markup (HTML + CSS) of your game application. Overall screen must be within 1000 x 600 pixels and centered on the screen.

You are free to decorate the game screen design as long as it meets the requirements.

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

Show game welcome in the center after pages are loaded.

Players can go to the game after filling the username field and click the “Play Game” button at the bottom of the welcome page.

The “Play Game” button should be disabled if the user did not input the username.

User must choose one from each option:

one of three levels (easy, medium, hard).

one of two guns to be used.

one of three targets to be used.

Game instructions should be shown after the page is loaded.

After clicking the “Instruction” button, it shows game instructions.

Users can close instructions after clicking the “X” button.

Show countdown for three seconds in the center of screen after the user clicked the play button before the game started playing.

When the game starts, the timer will start with time according to level.

’30 seconds’ for easy level

‘20 seconds’ for medium level

‘15 seconds’ for hard level

Add target randomly every 3 seconds.

The target will appear with animation.

When the game starts, there will be 3 random targets

The pointer will appear in the center of the screen and move with the mouse

gun will move follow pointer motion.

Player can shoot with click

Target will disappears after being hit by the shoot.

If the shot does not hit the target, the time will be reduced by 5 seconds

The score will be increased if the player can shoot to target.

Players can change guns after pressing the space button

There is an animation when changing guns.

Players can pause the game.

Press Esc to open the pause popup. The game should be in a paused state when opening the popup.

Press Esc again to continue or click the “continue” button and the countdown should appear before the game continues.

Game Over when the timer time is up.

Show popup after game over to display the player username and scores, save match history button, and restart button.

Match results should be saved in the local storage after the player clicks the “Save Score” button.

Players are able to see the match history after clicking the Match History Button.

Shoot history can be sorted by score or last matches based on user choices.

The game needs to work correctly in Google Chrome.