Introduction

We usually use Phaser to create HTML5 games.

Start from a template

You can start by cloning https://github.com/WonkyStar/nzk-game-starter

By doing so, you will start with:

• Preact environment (for basic UI)
• Phaser setup (game framework)
• Authentication and basic queries examples

Use data

You can look up what data is available by using tools such as GraphiQL to get the schema of our graphql server.

The endpoint is: https://graphql.nightzookeeper.com/graphql

Get an animal

Each game will be served through an iframe and launched with the following query parameter:

• animalId: Unique identifier of the animal that the kid chose for playing.

So the game is responsible of getting that parameter and fetching the correct animal.

You can fetch an animal by using a query like the following.

query getAnimal($animalId: String!) {
  me {
    _id
    animal(_id: $animalId) {
      _id
      name
      artwork {
        url
      }
    }
  }
}

During development phase, you might want to get a random animal or the first one to avoid having the query parameter everytime. You can get the first animal by querying something like this:

query getAnimals {
  me {
    _id
    animals(skip: 0, limit: 1) {
      _id
      name
      artwork {
        url
      }
    }
  }
}

This will get the animal, its name and artworkUrl.

NOTE: You have to be authenticated to query the current user (me). If you're using the starter provided above, you shouldn't have any problems. If you are not, please refer to Authentication for instructions on how to authenticate and make authenticated queries.

Save a score

You can use the following mutation to save a score entry

input ScoreInput {
  gameId: String!
  score: Int
  animal: String
}

extend type Mutation {
  saveScore(input: ScoreInput): Score
}

*NOTE: You have to be authenticated to save your score and the animal provided for the score entry should belong to the authenticated user.