🖥 Лайвкодинг в компании Postgres Pro

Позиция Middle Frontend Разработчик

Достаточно сложные вопросы были по опыту, проектам. А так же не было стандартных технических вопросов.

На собеседовании нужно было реализовать Игру "Crush the mole".
Описание задачи:
Необходимо реализовать игру "Crush the mole" на TypeScript. Игра представляет собой поле 4x4 клетки, на котором через случайные промежутки времени в случайной клетке появляется крот. Игрок должен успеть "прихлопнуть" крота, кликнув по нему левой кнопкой мыши. После успешного клика крот исчезает и появляется в новой случайной клетке. Игру можно остановить и начать заново с помощью кнопки.

Требования:
- Поле игры: Игровое поле состоит из 16 клеток (4x4).
- Появление крота: Крот появляется в случайной клетке через случайные промежутки времени.
- Управление: Игрок кликает по клетке, чтобы "прихлопнуть" крота. Если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке.
- Кнопка управления: Игру можно остановить и начать заново с помощью одной кнопки.
- Отображение крота: Крот отображается символом, например, @.
- Генерация случайных чисел: Для генерации случайного числа можно использовать Math.random().

import React from 'react';

const elements = Array(16).fill(0);

export default function App() {
  const [randomIndex, setRandomIndex] = React.useState(0);
  const [isStart, setStart] = React.useState(false);

  // Ваш код здесь

  return (
    <div className="App">
      <h1>⭐ Crush the mole ⭐</h1>
      <button onClick={() => { /* Ваш код здесь */ }}>
        {isStart ? "Остановить" : "Начать игру"}
      </button>
      <div className="container">
        {elements.map((elem, index) => (
          <div
            key={index}
            className="item"
            onClick={() => { /* Ваш код здесь */ }}
          >
            {index === randomIndex ? "@" : ""}
          </div>
        ))}
      </div>
    </div>
  );
}

Задачи для кандидата:
- Реализовать логику появления крота в случайной клетке через случайные промежутки времени.
- Реализовать обработку клика по клетке: если клик был по клетке с кротом, крот исчезает и появляется в новой случайной клетке.
- Реализовать кнопку, которая будет останавливать и запускать игру.
- Убедиться, что игра корректно работает и не содержит багов (например, крот не появляется в той же клетке сразу после исчезновения).

Дополнительные вопросы для обсуждения:
- Как можно оптимизировать код для улучшения производительности?
- Как можно добавить дополнительные функции в игру (например, счетчик очков, таймер, уровни сложности)?
- Как можно протестировать эту игру?

Ожидаемый результат:
Кандидат должен предоставить рабочую версию игры, соответствующую всем требованиям, и быть готовым объяснить свой код и принятые решения.

#interview