Solution #1

pokhylko · 2020-07-20T09:26:43Z

https://pokhylko.github.io/js_2048_game/

Готово все, кроме:

Функции в случае проигрыша, если все поля заполнены
Ограничения возможности хода в сторону, если туда нельзя сдвинуть элементы
Остановки игры после победы

Не понял, каким образом считается результат, пока сделал сумму всех цифр на поле.

vpolets

поразка це коли на полі не має вільної клітинки, це можна перевірити, якщо немає куди вставляти нову цифру - це поразка.

vpolets · 2020-07-20T09:46:48Z

src/scripts/main.js

+function randomValue() {
+  if (Math.random() < 0.1) {
+    return 4;
+  } else {
+    return 2;
+  }
+}


це 9.999% але не 10, <= постав

vpolets · 2020-07-20T09:48:08Z

src/scripts/main.js

+function calculateScore() {
+  let totalScore = 0;
+
+  for (const row of arrField) {
+    for (const column of row) {
+      totalScore += column;
+    }
+  }
+
+  scoreValue.textContent = totalScore;
+}


рахунок це сума складених клітинок за хід
2 + 2 = 4
8+ 8 = 16

в результаті до рахунку додаємо + 20

vpolets · 2020-07-20T09:49:08Z

src/scripts/main.js

+// Win message
+
+function checkWin(number) {
+  if (number === 2048) {


що таке 2048?)))

vpolets · 2020-07-20T09:50:34Z

src/scripts/main.js

+    row: Math.floor(Math.random() * 4),
+    column: Math.floor(Math.random() * 4),


а 4 що таке? Чому саме 4? А якщо захочеться зробити розширену версію де бу 6*6? Прийдеться в багатьох місцях міняти код (що може призвести до помилок)
краще винести в константу FIELD_SIZE

vpolets · 2020-07-20T10:43:56Z

src/scripts/main.js

+function newRandomCell() {
+  const { row, column } = randomPosition();
+
+  if (arrField[row][column] === 0) {


таке теж виносять в змінну

Suggested change

if (arrField[row][column] === 0) {

const isCellEmpty = arrField[row][column] === 0;

if (isCellEmpty) {

vpolets · 2020-07-20T10:47:28Z

src/scripts/main.js

+function moveUp(row, column) {
+  if (arrField[row][column] > 0 && row - 1 >= 0) {
+    if (arrField[row - 1][column] === 0) {
+      moveElement(row, column, row - 1, column);
+
+      return moveUp(row - 1, column);
+    }
+
+    if (arrField[row][column] === arrField[row - 1][column]
+      && row - 1 >= 0) {
+      sumElement(row, column, row - 1, column);
+    }
+  }
+}
+
+// Move elements down
+
+function moveDown(row, column) {
+  if (arrField[row][column] > 0 && row + 1 < arrField.length) {
+    if (arrField[row + 1][column] === 0) {
+      moveElement(row, column, row + 1, column);
+
+      return moveDown(row + 1, column);
+    }
+
+    if (arrField[row][column] === arrField[row + 1][column]
+      && row + 1 < arrField.length) {
+      sumElement(row, column, row + 1, column);
+    }
+  }
+}
+
+// Move elements left
+
+function moveLeft(row, column) {
+  if (arrField[row][column] > 0 && column - 1 >= 0) {
+    if (arrField[row][column - 1] === 0) {
+      moveElement(row, column, row, column - 1);
+
+      return moveLeft(row, column - 1);
+    }
+
+    if (arrField[row][column] === arrField[row][column - 1]
+      && column - 1 >= 0) {
+      sumElement(row, column, row, column - 1);
+    }
+  }
+}
+
+// Move elements right
+
+function moveRight(row, column) {
+  if (arrField[row][column] > 0 && column + 1 < arrField[row].length) {
+    if (arrField[row][column + 1] === 0) {
+      moveElement(row, column, row, column + 1);
+
+      return moveRight(row, column + 1);
+    }
+
+    if (arrField[row][column] === arrField[row][column + 1]
+      && column + 1 < arrField[row].length) {
+      sumElement(row, column, row, column + 1);
+    }
+  }
+}


Якщо так глянути не вчитуючись то ці функції ідентичні просто різниця в них в 0, 1, -1 в правильних місцях, Думаю можна спокійно скоротити і не дублювати код

vpolets · 2020-07-20T10:52:05Z

src/scripts/main.js

+    newRandomCell();
+    loopArray(buildGameField);
+    calculateScore();


ці три рядки відбуваються в любому випадку? Виносимо за if? А перед цим перевіряємо чи arrows.includes(event.key) якщо ні то виходимо
(~ -7 рядків коду на рівному місці.)
А якщо написати функцію getMoveMethod(key), котра буде повертати правильну функцію в залежності від кнопки, то тут if взагалі не потрібні

vpolets

Пограв трішки і знайшов баг

vpolets

Одразу порада як логічно таке пофіксити, проходитися не по всьому полю, в з кінця до початку
Тобто якщо це стрілка в ліво то починаємо перевіряти поле від 0 до кінця
Якщо стрілка в право то починаємо перевіряти від кінця до початку
в такому разі при наборі 2 - 2 - 4 ми перевіримо 4ку, побачимо що поруч стоїть не 4ка і все підемо далі, 2 зліпиться з 2кою, а до 4ки ми вже не повернемося

vpolets · 2020-07-27T06:42:11Z

src/scripts/main.js

+const loseMessage = messages.querySelector('.message-lose');
+const winMessage = messages.querySelector('.message-win');
+const scoreValue = container.querySelector('.game-score');
+const winNumber = 2048;


глобальні константи пишуться в upper case

vpolets · 2020-07-27T06:43:13Z

src/scripts/main.js

+const FIELD_SIZE = {
+  rows: 4,
+  columns: 4,
+};


просто 4 і все, 2048 це гра про квадрат, тому прямокутники там не передбачені, але хай буде, то твоє бачення)

vpolets · 2020-07-27T06:45:23Z

src/scripts/main.js

+const ARROWS = {
+  'ArrowUp': 'ArrowUp',
+  'ArrowRight': 'ArrowRight',
+  'ArrowDown': 'ArrowDown',
+  'ArrowLeft': 'ArrowLeft',
+};


те що ти пишеш в значенні повну назву кнопки з івента це нормально, але те що ти пишеш в ключі повну назву трішки не камільфо. Виходить маслоМасляне. В тебе вже об'єкт в цілому має назву ARROWS, що передбачає що у ньому стрілки зберігаються тобто ARROWS.left само собою означа стрілку в ліво.

vpolets · 2020-07-27T06:51:22Z

src/scripts/main.js

+  if (checkUp() || checkDown() || checkLeft() || checkRight()) {
+    return true;
+  }


по твоїй логічі, якщо хоч одна з штук зверху поверне true, то ти програв, але ж насправді ні. не треба нічого повертати, можкш просто return; написати щоб вийти з функції
Чому перевірка на програш, щей викликає "програти". Вона має тільки перевіряти, а не викликати сайд ефекти у вигляді програшу.
Назви її isLose
тоді має бути щось типу

if (isLose()) { endGame(); }

vpolets · 2020-07-27T06:54:18Z

src/scripts/main.js

+  arrField[newRow][newColumn] *= 2;
+  arrField[row][column] = 0;
+  calculateScore(arrField[newRow][newColumn]);
+  checkWin(arrField[newRow][newColumn]);


та сама історія, функція і перевіряє і ще й щось робить окрім того.

if (checkWin()) { endGame() }

Вона має просто true або false повертати

vpolets

Кароч це може був і не баг, а просто 2ка з'явилася не в тому місці і так здалося але ось ілюстрація того що було

Яне певен що було саме так, але мені здалося що було так, по коду не можу зрозуміти точно чи це могло відбутися

Solution

1b01443

vpolets suggested changes Jul 20, 2020

View reviewed changes

Working version of the game. Enjoy!

2657663

pokhylko requested a review from vpolets July 25, 2020 12:47

Add hide lose message after reset

b3e36ac

vpolets suggested changes Jul 27, 2020

View reviewed changes

pokhylko added 3 commits July 27, 2020 17:49

Fix game mechanics

d030d7b

Fixed after code review

3282fd0

Fixed the mechanics of summing elements

c7a891b

pokhylko requested a review from vpolets July 28, 2020 15:07

vpolets reviewed Jul 30, 2020

View reviewed changes

vpolets approved these changes Sep 3, 2020

View reviewed changes

NataliiaNudyk added a commit to NataliiaNudyk/js_2048_game that referenced this pull request Feb 14, 2025

fix bugs mate-academy#1

ac5bc82

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solution #1

Solution #1

pokhylko commented Jul 20, 2020

vpolets left a comment

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets Jul 20, 2020

vpolets left a comment

vpolets left a comment

vpolets Jul 27, 2020

vpolets Jul 27, 2020

vpolets Jul 27, 2020

vpolets Jul 27, 2020

vpolets Jul 27, 2020

vpolets left a comment

		row: Math.floor(Math.random() * 4),
		column: Math.floor(Math.random() * 4),

-  if (arrField[row][column] === 0) {
+  const isCellEmpty =  arrField[row][column] === 0;
+  if (isCellEmpty) {

Solution #1

Are you sure you want to change the base?

Solution #1

Conversation

pokhylko commented Jul 20, 2020

vpolets left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vpolets left a comment

Choose a reason for hiding this comment

vpolets left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vpolets left a comment

Choose a reason for hiding this comment