Home

Notes taken during the 0.1 build

name: SNEAKY SNEK

Grey areas

• What happens when the snake reaches an edge of the play grid (a. dies b. wraps around the play grid)
• How is the snake controlled by arrows? Only the left/right arrows can be used. They are used to request a direction change relative to the current direction the snake follows. Example: if the snake travels right, pressing the left arrow will change the direction of the snake to travel north. -> Modified in 0.2, now movement requests are not relative. If a user requests up, the snake will change to move upwards (unless the snake is moving down, in which case it would eat itself right away. And where's the fun in that?)
• What happens if a user requests a direction change more than once in a given loop interval? Only the last registered direction change is used.
• What is the initial length of the snake? 6 rings
• Browsers suppored? No specific requests here, so we use a sensible approach, supporting most modern browsers.

Game components

• Play grid
• Snake
• Score
• Food pellets
• Play button
• Game loop
• Game (duh)

COMPONENTS

Game

• have components
  • grid, snake, score, pellets, menu, game loop
• have
  • max score

Grid

• have
  • dimensions (WxH)
• do
  • tell if move is legal

Snake

• have
  • rings (list of positions), direction
• do
  • move
  • eat
  • die?

Score

• have
  • value, is new max boolean

Pellets

• have
  • location

Play button

• have
  • show flag, text

Game loop

• have
  • interval, direction change request

ROADMAP

• Angular2 quickstart / yeoman
• Move to ES6 ?
• Define components
• MVP
• Tests
• Improvements (UI/UX, etc)

REVISED STRUCTURE

• App (component)
  • Game loop
  • Menu (component)
    • play button
  • Header (component)
    • app title
    • score
  • Grid (component)
    • Pellets (directive)
    • Snake (directive)

THOUGHT PROCESS

• Should I decouple and run calculation and redrawing one after another?

• Canvas makes the presentation layer embedded into the business logic. Not like.

  • Refactor shapes into reusable shape definitions

• Bugs

  • FOUC

• TODO

  • Fix tests
  • Vastly improve test coverage
  • Turn snake and pellets into directives rather than components, since they have no template
  • Refactor game loop into its own directive
  • Refactor some methods into helper services (drawservice, etc)
  • Refactor addPellet into different parts
  • Add method and class level comment descriptions
  • Enums instead of magic strings: direction (up, left, right, down)
  • Typify some objects: gridSettings
  • Improve styling of the canvas elements
  • Animate canvas elements by avoiding rewriting everything all the time and/or separating layers