6 Homework (TypeScript)

[DrSmile444]

Ціль:

Потрібно створити гру, в якій є головний герой-квадрат і гравцю потрібно натискати клавіші з екрану, щоб квадрат збільшувався і набирав очки.

Основне завдання:

Правила:

• гра починається з 100 очків;
• на екрані з'являється клавіша, яку потрібно натиснути;
• на натиснення на клавішу у гравця є 2 секунди;
• якщо юзер натискає вірну клавішу, до рахунку додається від 5 до 10 очків;
• якщо юзер натискає не вірно клавішу, віднімається від 20 до 25 очків;
• якщо рахунок менше 0 очків, гравець програв;
• якщо рахунок більше 200 очків, гравець виграв.

Ігровий процесс:

• при кожній зміні рахунку (додається або віднімається), гравець повинен бачити як змінився його рахунок збоку від квадрату. Повиннен з'являтись блок, в якому буде відображатись на яке значення змінився рахунок (+10, +8, -25);
• використовувати тільки англійський алфавіт;
• кожна клавіша повинна бути в верхньому регістрі (A, B, T, S...);
• гра повинна реагувати як на клавішу в верхньому регістрі (S), так і в нижньому (s).

Технічна сторона:

• засетапити webpack, додати в нього можливість використовувати typesciprt;
• typescript, який буде компілюватись в нативний javascript проект;
• зробити класс Game, який в собі буде мати всі змінні та методи, потрібні для гри;
• кожен лісенер та перемінна мають мати визначений тип (string, number, interface, enum).

Завдання з зірочкою:

• додати кнопки із стартом, кінцем, та перезапуском гри;
• якщо юзер не натискає клавішу, віднімається від 10 до 15 очків;
• при кожній зміні рахунку, квадрат гравця повинен реагувати на зміни (збільшуватись, зменшуватись);
• повинен відображатись прогресс бар під клавішою скільки залишилось часу;

Корисні матеріали:

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

Презентація: https://drive.google.com/file/d/1hb2VwjC8prpSmdcQPbs9maocznr2A1tN/view?usp=sharing
DEMO завдання: https://drive.google.com/file/d/1RIbZjdWb8bEZBAC4wn7sM48cLUkbiNtk/view?usp=sharing

Ви можете юзати цей леяут для спрощення розробки:

const scoreElement = document.querySelector('[data-score]') as HTMLHeadingElement;
const cubeElement = document.querySelector('[data-cube]') as HTMLDivElement;
const cubeScoreElement = document.querySelector('[data-cube-score]') as HTMLDivElement;
const keyElement = document.querySelector('[data-key]') as HTMLDivElement;
const progressBarElement = document.querySelector('[data-progress-bar]') as HTMLDivElement;

class Game {
  private score: number = 100;
  private currentKey: string = '';
  private interval: number = 2000;

  constructor(
    private scoreElement: HTMLHeadingElement,
    private cubeScoreElement: HTMLDivElement,
    private keyElement: HTMLDivElement,
    private cubeElement?: HTMLDivElement,
    private progressBarElement?: HTMLDivElement,
  ) {}

  start() {
    // code...
  }

  private startKeysInterval() {
    // code...
  }

  private setScore(score: number) {
    // code...
  }

  private setKey(key: string) {
    // code...
  }

  private addScore(score: number) {
    // code...
  }

  private subscribeOnKeyPress() {
    // code...
  }
}

const game = new Game(scoreElement, cubeScoreElement, keyElement, cubeElement, progressBarElement);

game.start();

[DrSmile444]

Назва вітки:
6-typescript