Solution

[oleksandrorel]

• DEMO LINK
• Created class Game with property gameField.
• Created method createGameField that creates array matrix 4x4 and store matrix in gameField property.
• Created method startGame that runs click handler for start button. Method also invokes clearField, createCell, render methods.
• Created method randomValue that generate random value 2 or 4.
• Created method createCell that searches empty cell in matrix and select random empty cell and assign to selected empty cell random value generated by randomValue method.
• Created method movesHandler that invokes moveUp and rotateMatrix methods certain times based on the pressed arrow buttons and also invokes methods render and checkForLose
• Created method moveUp that performs movement and merge of cells.
• Created method recordOfScore that takes value parameter passed from merge method and record the score of the game.
• Created methods winGameMessage and loseGameMessage that show win or lose messages.
• Created method clearField that clears matrix values (make all matrix value as 0 )
• Created method rotateMatrix that rotates matrix in clockwise direction for 90 degrees per movement
• Created method render that performs rendering cell values from the matrix (gameField property) to the DOM elements.
• Created method checkForLose that checks if the game is lost after each movement of the cells.

[vpolets]

1. В іграх ніхто не опирається на дані в DOM дереві, це небезпечно і ненадійно. Користувач не має мати можливості якось повпливати на результат через html
2. Багато однакових функцій які роблять одне і теж, moveUp, moveDown, moveLeft і combineRow, combineColumn, багато коду дублюється, десь -1, десь +1, цього в ідеалі треба уникати.
3. Не всі назви змінних відповідають дійсності.
4. Діли логіку великих функцій на менші функції, код має виглядати декларативно, колеги не мають догадуматися що значить той чи інших цикл.
5. В даному випадку для гри краще використовувати масив як поле і працювати з ним.

[
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [0, 0, 0, 0],
]

1. Маючи поле в JS отримати доступ до нього вже важче (але все ще можливо). За те це набагато безпечніше і ти вже не віриш даним в DOM
2. Створюєш метод render, який відмальовує дані з масиву на ігровому полі після всіх операцій з матрицею
3. Створюєш метод rotateMatrix, розвертаєш матрицю в правильну сторону і тоді можеш завжди moveUp тільки робити і працювати в одну сторону. Тобто ти розвертаєш матрицю в правильну сторону, мерджиш клітинки - розвертаєш матрицю в початкове положення, вуаля -3 зайвих функції
4. Для гри краще використовувати клас Game з статичними полями та методами.
5. Не варто запускати цикли які намагаються попасти в пусту клітинку, є імовірність що вони її ніколи не знайдуть, хоч і мізерна. Шукай координати всіх пустих клітинок спершу і тоді серед масиву пустих кілитинок вибирай випадкову, кількість операцій буде в сотні разів меншою.

А так реалізація хороша і робоча, прекрасна робота.

[vpolets]

Це велике завдання і назви змінних тут дуже важливі. Я не розумію що це за tr

[vpolets]

чому це тут і що це означає?

[vpolets]

є підозра що це може тривати безкінечно. Може так бути, що ти ніколи не попадеш в пусту клітинку?

[vpolets]

окрема функція clearField

[vpolets]

це супер ненадійно. Я зайду через інспектор і виграю цю гру ще до її початку

просто оновив значення клітинки.

[vpolets]

Suggested change

	const winGameMessage = () => {
	const showWinGameMessage = () => {

[vpolets]

Ідеально! Додаш собі в портфоліо