2048-cljs

2048 game implementation in ClojureScript using re-frame, React, and tailwindcss

This project uses Shadow CLJS for development and build setup.

Core

The core of this project is in board.cljs. The board is represented as a vector of vectors that represents rows and colums. Each cell is a vector that has a value and a state.

(def board
  [[[2 :random] [0] [0] [0]]
   [[0]         [0] [0] [0]]
   [[4]         [0] [0] [0]]
   [[8 :merged] [0] [0] [0]]])

Movements

There are 4 movements possible in the game, move up ⬆️, move down ⬇️, move left ⬅️, and move right ➡️.

Instead of implementing separate logic for each movement, all movements are based on the logic to move left, and move left is simply merges each row in the board towards left.

Move Right

• Reverse the board
• Move left
• Reserve it back

➡️ =️ ⤴️ ◀️ ⤵️

Move up

• Rotate the board to left
• Move left
• Rotate it back

⬆️ = ⬅️ ◀️ ➡️

Move down

• Rotate the board to right
• Move left
• Rotate it back

⬇️ = ➡️ ◀️ ⬅️

(merg-left [[4 :random] [4 :merged] [0] [0]]) ;; [[8] [0] [0] [0]]

(defn move-left
  "Move tiles to left and combine equal tiles"
  [board]
  (mapv b/merge-left board))

(defn move-right
  "Move tiles to right and combine equal tiles"
  [board]
  (-> board
      (b/reverse-board)
      (move-left)
      (b/reverse-board)))

(defn move-up
  "Move tiles to up and combine equal tiles"
  [board]
  (-> board
      (b/rotate-left)
      (move-left)
      (b/rotate-right)))

(defn move-down
  "Move tiles to down and combine equal tiles"
  [board]
  (-> board
      (b/rotate-right)
      (move-left)
      (b/rotate-left)))

Development

Clone the repository using git

git clone [email protected]:WarFox/2048-cljs

Commands

1. npm run watch

   This will start shadow-cljs and tests on watch mode

2. bb dev

   This will run npm run watch. You need to setup babashka for this to work.

References

• https://www.youtube.com/watch?v=vI0QArPnkUc
• https://github.com/Nathen-Smith/2048/