add task solution

README.md

@@ -61,7 +61,7 @@ You can change the HTML/CSS layout if you need it.
 ## Deploy and Pull Request
 
 1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_2048_game/)
+    - [DEMO LINK](https://andreyysak.github.io/js_2048_game/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
     - Run `npm run test` command to test your code;
     - Run `npm run test:only -- -n` to run fast test ignoring linter;

src/index.html

@@ -21,38 +21,86 @@ <h1>2048</h1>
             Score:
             <span class="game-score">0</span>
           </p>
-          <button class="button start">Start</button>
+          <button class="button start button-start">Start</button>
         </div>
       </div>
 
       <table class="game-field">
         <tbody>
           <tr class="field-row">
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
+            <td
+              class="field-cell"
+              data-position="0-0"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="0-1"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="0-2"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="0-3"
+            ></td>
           </tr>
 
           <tr class="field-row">
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
+            <td
+              class="field-cell"
+              data-position="1-0"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="1-1"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="1-2"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="1-3"
+            ></td>
           </tr>
 
           <tr class="field-row">
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
+            <td
+              class="field-cell"
+              data-position="2-0"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="2-1"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="2-2"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="2-3"
+            ></td>
           </tr>
 
           <tr class="field-row">
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
-            <td class="field-cell"></td>
+            <td
+              class="field-cell"
+              data-position="3-0"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="3-1"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="3-2"
+            ></td>
+            <td
+              class="field-cell"
+              data-position="3-3"
+            ></td>
           </tr>
         </tbody>
       </table>
@@ -65,6 +113,10 @@ <h1>2048</h1>
         </p>
       </div>
     </div>
-    <script src="scripts/main.js"></script>
+    <script
+      type="module"
+      defer
+      src="scripts/main.js"
+    ></script>
   </body>
 </html>

src/modules/Game.class.js

@@ -1,68 +1,168 @@
 'use strict';
 
-/**
- * This class represents the game.
- * Now it has a basic structure, that is needed for testing.
- * Feel free to add more props and methods if needed.
- */
 class Game {
-  /**
-   * Creates a new game instance.
-   *
-   * @param {number[][]} initialState
-   * The initial state of the board.
-   * @default
-   * [[0, 0, 0, 0],
-   *  [0, 0, 0, 0],
-   *  [0, 0, 0, 0],
-   *  [0, 0, 0, 0]]
-   *
-   * If passed, the board will be initialized with the provided
-   * initial state.
-   */
-  constructor(initialState) {
-    // eslint-disable-next-line no-console
-    console.log(initialState);
+  constructor(
+    cells = [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+    ],
+  ) {
+    this.cells = cells;
+    this.restart();
   }
 
-  moveLeft() {}
-  moveRight() {}
-  moveUp() {}
-  moveDown() {}
-
-  /**
-   * @returns {number}
-   */
-  getScore() {}
-
-  /**
-   * @returns {number[][]}
-   */
-  getState() {}
-
-  /**
-   * Returns the current game status.
-   *
-   * @returns {string} One of: 'idle', 'playing', 'win', 'lose'
-   *
-   * `idle` - the game has not started yet (the initial state);
-   * `playing` - the game is in progress;
-   * `win` - the game is won;
-   * `lose` - the game is lost
-   */
-  getStatus() {}
-
-  /**
-   * Starts the game.
-   */
-  start() {}
-
-  /**
-   * Resets the game.
-   */
-  restart() {}
-
-  // Add your own methods here
+  slideAndMerge(row) {
+    const filteredRow = row.filter((val) => val !== 0);
+    const newRow = [];
+
+    for (let i = 0; i < filteredRow.length; i++) {
+      if (filteredRow[i] === filteredRow[i + 1]) {
+        newRow.push(filteredRow[i] * 2);
+        this.score += filteredRow[i] * 2;
+        i++;
+      } else {
+        newRow.push(filteredRow[i]);
+      }
+    }
+
+    while (newRow.length < 4) {
+      newRow.push(0);
+    }
+
+    return newRow;
+  }
+
+  move(direction) {
+    if (this.status !== 'playing') {
+      return;
+    }
+
+    const rotated = (board) => {
+      return board[0].map((_, colIndex) => board.map((row) => row[colIndex]));
+    };
+
+    let moved = false;
+
+    if (direction === 'up' || direction === 'down') {
+      this.board = rotated(this.board);
+    }
+
+    for (let i = 0; i < 4; i++) {
+      const row =
+        direction === 'right' || direction === 'down'
+          ? [...this.board[i]].reverse()
+          : [...this.board[i]];
+
+      const newRow = this.slideAndMerge(row);
+
+      if (direction === 'right' || direction === 'down') {
+        newRow.reverse();
+      }
+
+      if (this.board[i].toString() !== newRow.toString()) {
+        this.board[i] = newRow;
+        moved = true;
+      }
+    }
+
+    if (direction === 'up' || direction === 'down') {
+      this.board = rotated(this.board);
+    }
+
+    if (moved) {
+      this.addRandomTile();
+    }
+    this.checkGameOver();
+  }
+
+  moveLeft() {
+    this.move('left');
+  }
+
+  moveRight() {
+    this.move('right');
+  }
+
+  moveUp() {
+    this.move('up');
+  }
+
+  moveDown() {
+    this.move('down');
+  }
+
+  checkGameOver() {
+    if (this.board.some((row) => row.includes(2048))) {
+      this.status = 'win';
+    } else if (!this.canMove()) {
+      this.status = 'lose';
+    }
+  }
+
+  canMove() {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 4; j++) {
+        if (this.board[i][j] === 0) {
+          return true;
+        }
+
+        if (j < 3 && this.board[i][j] === this.board[i][j + 1]) {
+          return true;
+        }
+
+        if (i < 3 && this.board[i][j] === this.board[i + 1][j]) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  addRandomTile() {
+    const emptyCells = [];
+
+    this.board.forEach((row, rowIndex) => {
+      row.forEach((value, colIndex) => {
+        if (value === 0) {
+          emptyCells.push({ rowIndex, colIndex });
+        }
+      });
+    });
+
+    if (emptyCells.length > 0) {
+      const randomIndex = Math.floor(Math.random() * emptyCells.length);
+      const { rowIndex, colIndex } = emptyCells[randomIndex];
+
+      this.board[rowIndex][colIndex] = Math.random() < 0.9 ? 2 : 4;
+    }
+  }
+
+  restart() {
+    this.board = this.cells.map((row) => [...row]);
+    this.score = 0;
+    this.status = 'idle';
+  }
+
+  start() {
+    this.status = 'playing';
+    this.addRandomTile();
+    this.addRandomTile();
+  }
+
+  getScore() {
+    return this.score;
+  }
+
+  getState() {
+    return this.board.map((row) => [...row]);
+  }
+
+  getStatus() {
+    return this.status;
+  }
 }
 
 module.exports = Game;