Skip to content

Commit

Permalink
doc: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
WarFox committed Jun 7, 2024
1 parent 4c1ef0f commit d96b457
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 5 deletions.
92 changes: 92 additions & 0 deletions README.org
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
#+title: 2048-cljs

2048 game implementation in [[https://clojurescript.org/][ClojureScript]] using [[https://day8.github.io/re-frame/][re-frame]], [[https://react.dev/][React]], and [[https://tailwindcss.com/][tailwindcss]]

This project uses [[https://shadow-cljs.github.io/docs/UsersGuide.html][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.

#+begin_src clojurescript
(def board
[[[2 :random] [0] [0] [0]]
[[0] [0] [0] [0]]
[[4] [0] [0] [0]]
[[8 :merged] [0] [0] [0]]])
#+end_src

* 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
⬇️ = ➡️ ◀️ ⬅️

#+begin_src clojurescript
(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)))
#+end_src

* Development

Clone the repository using git

#+begin_src sh
git clone git@github.com:WarFox/2048-cljs
#+end_src

** Commands

1. =npm run watch=

This will start =shadow-cljs= and tests on watch mode

** References

- https://www.youtube.com/watch?v=vI0QArPnkUc
- https://github.com/Nathen-Smith/2048/
5 changes: 0 additions & 5 deletions README.md → docs/re-frame.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
# cljs-2048

A [re-frame](https://github.com/day8/re-frame) application designed to ... well, that part is up to
you.

## Getting Started

### Project Overview
Expand Down

0 comments on commit d96b457

Please sign in to comment.