Homework 6 - TypeScript

[NickCashFlow]

Deadline

• Create pull request until 27 Nov, 12:00
• Mistakes and comments should be resolved until 29 Nov, 20:00
• Request should be merged until 29 Nov, 21:00
• In other cases pull request will be closed

First of all

1. Get the latest updates from Academy's repo by instruction;

2. To your homework folder add a folder named 6-typescript

3. Add your files into this folder:

homeworks/elon.musk_spacex2021/6-typescript

Task:

Make a simple game that is the main character is a circle and the player needs to press the keys on the screen so that the circle increases and gains points.

Main Task

Rules:

• the game starts with 100 points;
• the key you want to press appears on the screen;
• when a key is pressed, the player has 2 seconds;
• if the user presses the correct key, the score is given from 5 to 10 points;
• if the user does not press the key, 10 to 15 points are deducted;
• if the user presses the wrong key, 20 to 25 points are deducted;
• if the score is less than 0 points, the player loses;
• if the score is more than 200 points, the player wins.

Gameplay:

• each time the score changes (added or subtracted), the player must see how his score has changed on the side of the square. A block should appear in which the value of the account has changed (+10, +8, -25);
• use only the English alphabet;
• each key must be uppercase (A, B, T, S ...);
• the game must respond to both the uppercase key (S) and the lowercase (s).

Technical side:

• setup the webpack, add the ability to use TypeScript;
• TypeScript, which will be compiled into a native javascript project;
• make functions that needed for the game;
• each listener, variable and another entity must have a specific type (string, number, interface, enum, etc.).

The task with an asterisk (optional):

• add buttons to start, end, and restart the game;
• add a table with 10 best game scores;
• if the user presses the correct key, the score is given from 5 to 10 points and show the next task immediately;
• with each change of account, the player's circle must respond to the changes (increase, decrease);
• the progress bar should be displayed under the key how much time is left;

Useful materials:

https://webpack.js.org/guides/typescript/
https://learn.javascript.ru/dom-nodes
https://www.w3schools.com/howto/howto_js_progressbar.asp