Telegram Group & Telegram Channel
🖥 Лайвкодинг в компании 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
Please open Telegram to view this post
VIEW IN TELEGRAM



group-telegram.com/reactify_IT/1410
Create:
Last Update:

🖥 Лайвкодинг в компании 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

BY Reactify | Frontend Разработка


Warning: Undefined variable $i in /var/www/group-telegram/post.php on line 260

Share with your friend now:
group-telegram.com/reactify_IT/1410

View MORE
Open in Telegram


Telegram | DID YOU KNOW?

Date: |

On Feb. 27, however, he admitted from his Russian-language account that "Telegram channels are increasingly becoming a source of unverified information related to Ukrainian events." Now safely in France with his spouse and three of his children, Kliuchnikov scrolls through Telegram to learn about the devastation happening in his home country. "Russians are really disconnected from the reality of what happening to their country," Andrey said. "So Telegram has become essential for understanding what's going on to the Russian-speaking world." Under the Sebi Act, the regulator has the power to carry out search and seizure of books, registers, documents including electronics and digital devices from any person associated with the securities market. Just days after Russia invaded Ukraine, Durov wrote that Telegram was "increasingly becoming a source of unverified information," and he worried about the app being used to "incite ethnic hatred."
from hk


Telegram Reactify | Frontend Разработка
FROM American