Game 2048

Tutorial kali ini kita akan membuat game 2048 mulai dari membuat psudo-code, implementasi pseudo-code ke dalam bahasa pemrograman, kemudian membuat tampilan. Hasilnya nanti kurang lebih seperti ini yaa demo

Pseudo Code

Langkah - langkahnya, yaitu
1. Method gameOver()
   - gameover jika kotak - kotak pada borad sudah tidak dapat bergeser lagi
2. Method addVal(board)
   - digunakna untuk menambahkan nilai 2 atau 4 pada papan denga posisi random
   - pemanggilan method ini dilakukan jika ketika nilai -nilai pada board bergeser dan terjadi merge pada nilai yang sama
3. Membuat listener arrow UP, DOWN, RIGHT, dan LEFT.

              S T E P   1

SET FLAG = TRUE
FOR i = 0  UNTIL i < LENGTH OF boards AND i++
  FOR j = 0  UNTIL j < LENGTH OF boards AND j++
    IF boards[i][j]
    |   SET up = i + 1;
    |   SET down = i - 1;
    |   SET right = j + 1;
    |   SET left = j - 1;
    |   SET length = LENGTH OF boards - 1;
    |
    |   IF up >= 0 && up <= length
    |     IF boards[i][j] === boards[up][j]
    |       SET FLAG = FALSE
    |       BREAK LOOPING
    |     END IF
    |   END IF
    |
    |   IF down >= 0 && down <= length
    |     IF boards[i][j] === boards[down][j]
    |       SET FLAG = FALSE
    |       BREAK LOOPING
    |     END IF
    |   END IF
    |
    |   IF right >= 0 && right <= length
    |     IF boards[i][j] === boards[i][right]
    |       SET FLAG = FALSE
    |       BREAK LOOPING
    |     END IF
    |   END IF
    |
    |   IF left >= 0 && left <= length
    |     IF boards[i][j] === boards[i][left]
    |       SET FLAG = FALSE
    |       BREAK LOOPING
    |     END IF
    |   END IF
    |
    ELSE
    |   SET FLAG = FALSE
    |   BREAK LOOPING
    END IF

    IF !FLAG
      BREAK LOOPING
    END IF
  END FOR
END FOR

              S T E P   2

SET positions = []

FOREACH boards => (rows, i)
  FOREACH rows => (val, j)
    IF val === NULL
      PUSH {i, j} TO positions
    END IF
  END FOREACH
END FOREACH

IF LENGTH OF position === 0
  RETURN boards
END IF

SET min = 0
SET max = LENGTH OF positions - 1
SET RANDOM_POSITION = RANDOM NUMBER by (min - max)
DISTRACT {i, j} = positions[RANDOM_POSITION]

SET bords[i][j] = RANDOM NUMBER by (2 or 4)
RETURN boards

            S T E P   3

SET BORDS = [
  [...],
  [...],
  ...
]
SET isGameOver = FALSE
SET isWin = FALSE
SET score = 0
SET bestScore = 0
document.addEventListener("keydown", (event) => {
  IF ELSE
    event.key ===  "ArrowUp"      RETURN arrowUp();
    event.key ===  "ArrowDown"    RETURN arrowDown();
    event.key ===  "ArrowRight"   RETURN arrowRight();
    event.key ===  "ArrowLeft"    RETURN arrowLeft();
  END IF
});

METHOD ARROW UP  arrowUp()
IF isGameOver || isWin
  RETURN FALSE
END IF

SET VAL = NULL
SET FLAG_NEW_VAL = FALSE
SET boards = CLONE BOARDS

FOR j = 0 UNTIL j < LENGTH OF boards AND j++
  FOR i = 0 UNTIL i < LENGTH OF boards AND i++

    FOR down = i down < LENGTH OF boards AND down++
    |   IF boards[down][j]
    |     IF boards[i][j] === boards[down][j]
    |     |   SET boards[i][j] += boards[down][j]
    |     |   SET VAL = boards[i][j]
    |     |
    |     |   // UBAH SCORE
    |     |   SET score += boards[i][j]
    |     |   IF score > bestScore
    |     |     SET bestScore = score
    |     |   END IF
    |     |
    |     |   SET boards[down][j] = NULL
    |     |   SET FLAG_NEW_VAL = TRUE
    |     END IF
    |     BREAK LOOPING
    |   ENF IF
    END FOR

    // UNTUK MENGGESER NILAI (KE ATAS)
    IF boards[i][j]
    |   SET moveI = NULL
    |   FOR up = i - 1 UNTIL up >= 0 AND up--
    |     IF(boards[up][j])
    |       BREAK LOOPING
    |     END IF
    |     IF(boards[up][j] === NULL
    |       SET moveI = up
    |     END IF
    |   END FOR
    |
    |   IF moveI !== null
    |     SET FLAG_NEW_VAL = TRUE
    |     SET boards[moveI][j] = boards[i][j]
    |     SET board[i][j] = NULL
    |   END IF
    END IF
  END FOR
END FOR

IF FLAG_NEW_VAL
  IF VAL === 2048
    SET isWin = TRUE
    SET BOARDS = CALL addVal(boards)
  END IF
  CALL addVal()
END IF
CALL gameOver()


METHOD ARROW DOWN  arrowDown()
IF isGameOver || isWin
  RETURN FALSE
END IF

SET VAL = NULL
SET FLAG_NEW_VAL = FALSE
SET boards = CLONE BOARDS

.....
// SAMA DENGAN METHOD arrowUP()
// PERBEDAAN KETIKA MENGGESER NILAI (ke bawah)
FOR down = i + 1 UNTIL down < LENGTH OF boards AND down++
boards[down][j]
.....

IF FLAG_NEW_VAL
  IF VAL === 2048
    SET isWin = TRUE
    SET BOARDS = CALL addVal(boards)
  END IF
  CALL addVal()
END IF
CALL gameOver()


METHOD ARROW RIGHT  arrowRight()
IF isGameOver || isWin
  RETURN FALSE
END IF

SET VAL = NULL
SET FLAG_NEW_VAL = FALSE
SET boards = CLONE BOARDS

.....
// SAMA DENGAN METHOD arrowUP()
// PERBEDAAN KETIKA MENGGESER NILAI (ke kanan)
FOR right = j + 1 UNTIL right < LENGTH OF boards AND right++
boards[i][right]
.....

IF FLAG_NEW_VAL
  IF VAL === 2048
    SET isWin = TRUE
    SET BOARDS = CALL addVal(boards)
  END IF
  CALL addVal()
END IF
CALL gameOver()


METHOD ARROW LEFT  arrowLeft()
IF isGameOver || isWin
  RETURN FALSE
END IF

SET VAL = NULL
SET FLAG_NEW_VAL = FALSE
SET boards = CLONE BOARDS

.....
// SAMA DENGAN METHOD arrowUP()
// PERBEDAAN KETIKA MENGGESER NILAI (ke kiri)
FOR left = j - 1 UNTIL left >= 0 AND left--
boards[i][left]
.....

IF FLAG_NEW_VAL
  IF VAL === 2048
    SET isWin = TRUE
    SET BOARDS = CALL addVal(boards)
  END IF
  CALL addVal()
END IF
CALL gameOver()