block-puzzle/game.js at main · lisifun/block-puzzle · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
class Game {
  constructor() {
    this.startScreen = document.getElementById("home-screen");
    this.gameScreen = document.getElementById("game-screen");
    this.restartScreen = document.getElementById("restart-game");
    this.gameEndScreen = document.getElementById("end-screen");
    this.saveGameScreen = document.getElementById("save-screen");
    this.scoreElement = document.getElementById("actual-score");
    this.maxScoreElement = document.getElementById("max-score");
    this.score = 0;
    this.maxScore = 0;
    this.gameIsOver = false;
    this.board = new Board();
  }

  open() {
    this.startScreen.style.display = "inherit";
    this.gameScreen.style.display = "none";
    this.restartScreen.style.display = "none";
    this.gameEndScreen.style.display = "none";
    this.saveGameScreen.style.display = "none";

    setTimeout(() => {
      this.startScreen.style.display = "none";
      this.gameScreen.style.display = "inherit";
      drawBoard(this.board.boardStatus, this.board.boardElement);
      pickThree();
    }, 1000);
  }

  restartGame() {
    this.restartScreen.style.display = "inherit";

    // If the user select YES (to start a new game)
    const yesButton = document.getElementById("yes-button");
    const randomPieces = document.getElementById("random-pieces");

    yesButton.addEventListener("click", () => {
      randomPieces.innerHTML = "";
      this.board = new Board();
      this.score = 0;
      this.scoreElement.innerHTML = this.score;
      drawBoard(this.board.boardStatus, this.board.boardElement);
      pickThree();

      this.restartScreen.style.display = "none";
    });

    // If the user select NO
    const noButton = document.getElementById("no-button");
    noButton.addEventListener("click", () => {
      this.restartScreen.style.display = "none";
    });
  }

  updateScoreDropPiece(piece) {
    for (let i = 0; i < piece.length; i++) {
      for (let j = 0; j < piece[i].length; j++) {
        if (piece[i][j].color !== "none") {
          this.score++;
        }
      }
    }

    this.scoreElement.innerHTML = this.score;
  }

  updateScoreCompletedLines(completedRows, completedColumns) {
    if (completedRows.length !== 0 || completedColumns.length !== 0) {
      // If more than two lines are completed the score will increment 100. Otherwise will increment 10
      if (completedRows.length + completedColumns.length > 2) {
        this.score += 100;
      } else {
        this.score += completedRows.length * 10 + completedColumns.length * 10;
      }
    }

    this.scoreElement.innerHTML = this.score;
  }

  gameOver() {
    if (this.gameIsOver === true) {
      setTimeout(() => {
        this.gameEndScreen.querySelector("#final-score").innerText = this.score;
        this.gameEndScreen.style.display = "inherit";
        if (this.score > this.maxScore) {
          this.gameEndScreen.querySelector("#feedback").innerText = `FANTASTIC!
              NEW PERSONAL HIGHSCORE`;
        } else {
          this.gameEndScreen.querySelector("#feedback").innerText =
            "BRILLIANT!";
        }
      }, 1000);
    }
  }

  startNewGame() {
    if (this.score > this.maxScore) {
      this.maxScore = this.score;
      this.maxScoreElement.innerHTML = this.maxScore;
    }
    this.gameEndScreen.style.display = "none";

    randomPieces.innerHTML = "";
    this.board = new Board();
    this.score = 0;
    this.scoreElement.innerHTML = this.score;
    drawBoard(this.board.boardStatus, this.board.boardElement);
    pickThree();
  }

  saveGame() {
    this.saveGameScreen.style.display = "inherit";
    this.saveGameScreen.querySelector("#final-score").innerText = this.score;
  }
}