theronic / cljs-snake

Snake in 100 lines of ClojureScript using Reagent for a #TechTalk at UCT

Snake in 100 Lines of ClojureScript

On 12 August 2015, I presented a talk at UCT on The State of the Art in Front End Development, during which we built a game in ClojureScript.

You can download the slides with coding videos and audio by reading the blog post.

Tools:

• ClojureScript 1.7
• Boot-clj

To Run:

boot dev

When it's done compiling, open http://localhost:8002/

To Build for Production:

boot prod

This will write out artifacts to the docs folder.

Features:

You can:

• Turn left/right with the arrow keys
• Take the red pill
• Die by running into your tail
• Get a high score

Turning

When turning, the velocity vector is rotated by 90 degrees clockwise or counter-clockwise in the next-state function using a hard-coded rotation matrix.

Data Model

The simulation state is stored in an atom named state with these keys:

• :size stores the size of the body of the snake, initially 3.
• :position stores the snake's head as an [x y] coordinate, e.g. [7 9]
• :history stores a list of previous head positions, so we can render the snake's body as the last N head positions, e.g. ([7 9] [6 9] [6 8] ...).
• :velocity holds a relative [x y] vector that is added to the :position coordinate on every animation tick.
• :dead? will be true when the snake die by running into its own body.
• :pills stores a set of edible [x y] pill coordinates.