Scribd
Upload
82 views

Module Client Side

This document outlines requirements for developing a Plants vs Zombies clone called LKS PVZ using HTML, CSS, and JavaScript. It details that the game must have a tablet resolution of 1000x600 pixels and include player name, gameboard, plant and zombie characters, score, time elapsed, and leaderboards. It provides 35 functional requirements for the game, including planting and removing plants, zombie movement, scoring, pausing, and saving high scores. Competitors are instructed to develop the initial layout in 2 hours using HTML and CSS, then add functionality in the remaining 2 hours using JavaScript.

Uploaded by

plg bk
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
82 views

Module Client Side

This document outlines requirements for developing a Plants vs Zombies clone called LKS PVZ using HTML, CSS, and JavaScript. It details that the game must have a tablet resolution of 1000x600 pixels and include player name, gameboard, plant and zombie characters, score, time elapsed, and leaderboards. It provides 35 functional requirements for the game, including planting and removing plants, zombie movement, scoring, pausing, and saving high scores. Competitors are instructed to develop the initial layout in 2 hours using HTML and CSS, then add functionality in the remaining 2 hours using JavaScript.

Uploaded by

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

CLIENT SIDE MODULE

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

INTRODUCTION
In recent years, people are intrigued to know about playing game in their devices. A lot of
people play the game that has a gameplay of plants against zombies.
You are asked to develop a game called LKS PVZ 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 (1000x600 pixels). In bigger resolution, the game must be centred 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.

PVZ game screen should have meet these requirements below:


1. Player Name
2. Gameboard
3. Plants Character
4. Zombie Character
5. Total Score
6. Total time elapsed
7. Leaderboards
Design and Initial layout
1. Develop the initial markup (HTML + CSS) of your game application. Overall screen must
be within 1024x1024 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 page are loaded.
2. Player can go to game after fill username field and click “Play Game” button at the
bottom of welcome page.
3. The “Play Game” button should be disabled if the user did not input username.
4. User can choose one of three level (easy, medium, hard).
5. User can show instruction after click “Instruction” button.
6. User can close instruction after click “X” button.
7. Show countdown for three seconds in the center of screen after user clicked the
play button before the game started playing.
8. When the game starts, the player will get 50 suns.
9. Timer will start from 0.
10. Game has a random four plant cards.
11. Zombies should move left the border vertically at the exact given time.
12. Zombies can eat plants when zombies are near plants.
13. The plant will be destroyed when the zombie bites it 3 times.
14. Zombies should show random every 5 second.
a. ‘1 zombie’ for easy level
b. ‘2 zombies’ for medium level
c. ‘3 zombies’ for hard level
15. Drops suns randomly every 3 seconds.
16. When the game starts, there will be 2 random suns.
17. To set the plants in the field, user can click the plant card then click the location to
be placed.
18. The user can only set the plant in an empty place.
19. The user can remove plant with clicking on the shovel icon and selecting the plants
to be removed.
20. Player can set four plants with the following :
a. Sunflower to produce sun every 10 seconds
b. Wallnut can destroy after 5 zombie bites
c. Pea can destroy zombie in 5 shoots
d. Ice Pea can destroy zombie in 7 shoots and slow zombie movements
21. Walking animation when the zombies is moving.
22. The score will be increased if player can destroy zombies.
23. Zombie will have animation effects when hit by pea and ice pea.
24. When the zombie touches the left border, Lawnmower will move to right and hit
zombies.
25. Zombies hit by a lawnmower will have the effect of falling and disappearing.
26. Player can pause the game.
27. Press Esc to open the pause popup. The game should be in paused state when
opening the popup.
28. Press Esc again to continue or click the continue button.
29. Game Over if zombie can pass left border and no lawnmower.
30. Show popup after game over to display the player username, time elapsed, score,
save high score button and restart button.
31. Highscore should be saved in database after player click Save high score button.
32. Players can see the leaderboard on the right of the game board and see details of
players on the leaderboard by pressing the details button.
33. The leaderboard can be sorted by score and username.
34. Show popup detail to display the player username, time elapsed and score after
player click Detail button.
35. The game needs to work correctly in Google Chrome.

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 ‘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 any image source files to a folder named "source" inside the "client-side/design"
folder. The source files are the files that contain the design layers, development files, i.e.
xd, fig, psd, ai, or svg.
5. Save the working game to the directory on the server named "client-side". Be sure that
your main file is called index.html.
6. You are responsible for the time management in your development. If you finalize some
tasks you can continue to other tasks.
Example
These following images are for example purpose only. You may design your own game layout.

You might also like