Node Defender: Building a Websocket Game with Node

A short talk on the process and tools we used to create a websocket game geared towards developers.

Transcript

1. Node
   Defender
   Building a Websocket Game with Node
   

   View Slide

2. Chris Saylor
   Lead Engineer
   Stephen Young
   Senior Engineer
   @cjsaylor
   @young_steveo
   185 countries
   14 million weekly class
   participants
   15 million monthly
   pageviews
   ~30 million monthly service
   requests
   Zumba Fitness
   @zumbatech
   

   View Slide

3. What is Node
   Defender?
   

   View Slide

4. Node Defender is a game for developers
   where the objective is to craft the best
   possible strategy to defend against the
   server's onslaught of enemies.
   

   View Slide

5. What does it look like?
   

   View Slide

6. View Slide

7. Why did we build this?
   We wanted to build something that would be fun for
   developers to hack on at our booth.
   We wanted to build a tool that can help teach javascript.
   We wanted to experiment with real-time applications.
   

   View Slide

8. Infrastructure
   

   View Slide

9. Overview
   Two servers (Heroku dynos)
   Client server for hosting game assets and interface
   Game server for hosting game logic and leaderboard
   MongoDB - Sessions and Game results
   Redis - Multi-server socket.io pubsub
   

   View Slide

10. View Slide

11. Using
    allows easy scaling, configuration
    changes, and viewing logs from the command line.
    Uses for deployments.
    HTTPS supported for free for the h
    e
    r
    o
    k
    u
    a
    p
    p domain.
    In general, your app configurations should be using
    environment variables: p
    r
    o
    c
    e
    s
    s
    .
    e
    n
    v
    .
    S
    O
    M
    E
    V
    A
    R
    Gotcha: Heroku dynamically assigns an internal port via
    the environment variable: P
    O
    R
    T
    Uses to run your application, hence the
    requirement for a P
    r
    o
    c
    f
    i
    l
    e
    Provides "addons" which are very convenient services that
    have SSO and create access configurations automatically.
    Heroku Toolbelt
    Git
    Foreman
    

    View Slide

12. Game Design
    

    View Slide

13. Design Goals
    Simple: easy to grok in 5 minutes.
    Accessible: beginners should be able to play.
    Challenging: stay interesting & hard to master.
    Fun: it's a game where you write code, for crying out loud.
    

    View Slide

14. Our Process
    Started with an idea: a Programming Game!
    Decided from the start to build it in Node.js
    Collaborated on game design document in Google Drive.
    Did a lot of brainstorming. a little too much...
    Threw away ideas that we deemed too complex.
    Developed game logic using BDD (jasmine tests)
    Relied on Github issues to track features and bugs
    

    View Slide

15. The Prototype
    steps to play the game
    1. checkout the client repository
    2. modify the strategy files
    3. set environment variables
    4. run the game with n
    p
    m s
    t
    a
    r
    t
    5. all feedback in the console
    6. "visualize" the battle in your head
    somewhat involved
    but it was fun!
    

    View Slide

16. So, we built a browser client.
    Node Template Engine
    &
    browser based code editor
    Canvas framework
    Bootstrap 3.0
    jade
    Sass Compass
    RequireJS
    Ace
    KineticJS
    howler.js
    

    View Slide

17. Grunt!
    The Javascript Task Runner
    Seriously, without Grunt this game wouldn't be what it is.
    

    View Slide

18. What Grunt Did for Us
    Lint our source files with g
    r
    u
    n
    t
    -
    c
    o
    n
    t
    r
    i
    b
    -
    j
    s
    h
    i
    n
    t
    Automate Sass build with g
    r
    u
    n
    t
    -
    c
    o
    n
    t
    r
    i
    b
    -
    c
    o
    m
    p
    a
    s
    s
    Quickly run jasmine tests with j
    a
    s
    m
    i
    n
    e
    -
    n
    o
    d
    e
    All in a matter of milliseconds.
    

    View Slide

19. If you work with Javascript
    do yourself a favor and install Grunt.
    n
    p
    m i
    n
    s
    t
    a
    l
    l -
    g g
    r
    u
    n
    t
    -
    c
    l
    i
    

    View Slide

20. Play Online
    tinyurl.com/zumbagame
    Top scores will receive prizes!
    

    View Slide