Skip to content

Writing a game

Jump to bottom Edit New page
Aurélio A. Heckert edited this page Aug 26, 2014 · 8 revisions

Step 1 - Download the Server and Install the server locally

$ git clone https://github.com/aurium/js-game-server.git
$ cd js-game-server
$ npm install
$ npm test

If npm test fails, please report it with information about your system. Do not worry about eslint warns.

Step 2 - Create and point to your local games directory

$ mkdir /some/path/local-games
$ cp config.dist.json config.json  # create a configuration file based on a default.
$ gedit config.json                # open the configuration on your editor

In the editor change "games_directory": "./examples", to point to your games directory. For this example the value will be: "games_directory": "/some/path/local-games",

Step 3 - Create and setup your game directory

$ cd /some/path/local-games
$ mkdir my-game     # This is your game container.
# The name "my-game" is up to you to chose, but that is not what you will send to js13kGames.
# This container maintains some extra data files about this game for the server.
$ cd my-game
$ gedit game.json   # This file will not to be in your competition entry, but it's content.

game.json At your editor:

{
  "title": "My Game",
  "description": "An amazing game from myself."
}

Ok! Back to the console:

# you are inside my-game
you@host:/some/path/local-games/my-game$ mkdir game  # This name is mandatory!
you@host:/some/path/local-games/my-game$ cd game
# This dir content will be all your entry package for the js13kGames competition.
$ touch index.html package.json my-game.js

Now you have this tree on local-games directory:

local-games
└── my-game
    ├── game.json
    └── game
        ├── index.html    # Mandatory file. Will be displayed on the client automaticaly
        ├── my-game.js    # Mandatory with optional name (node.js main file package)
        └── package.json  # Mandatory definition package
        # You can add more files here if you need them.

Open package.json for edition, and set:

{
  "name": "my-game",
  "main": "my-game.js", // <-- this attribute allows you to chose your server-side main file name.
  "author": "Me <me@somewhere>",
  "license": "some one free as in freedom"
}

Step 4 - Hello World

If you start your installation of the js-game-server now you will see your game.

$ cd /path/to/js-game-server
$ npm start  # All games and the game lobby will start

Now you can visit http://localhost:3000 and you will see:

my-game on the server

But your game's index.html is empty. Lets add this to the file:

<html>
  <head>
    <title>My Game</title>
  </head>
  <body>
    <h1>My Game</h1>
    <div id="hello"></div>
    <script>
      hello.innerHTML = "Hello World!";
    </script>
  </body>
</html>

Now you can click on the game bottom to see this page. You don't need to restart the server.

Step 5 - Server interaction (Basic socket.io usage)

Open the my-game.js on your editor and write:

var io = require('sandbox-io');

io.on('connection', function(socket) {
  // See the generated log in the server console:
  log.debug('New connection', socket.id);
  // Send a message to this player:
  socket.emit('srv-msg', { message: 'Welcome!' });
  // Link a receiveClientMessage reference to this socket
  // and add it as a listener for 'cli-msg' events:
  socket.on('cli-msg', receiveClientMessage.bind(socket));
});

function receiveClientMessage(data) {
  if (data == 'Hello') {
    this.emit('srv-msg', { hello: 'Wold!' });
  } else {
    this.emit('srv-msg', {
      data: data,
      msg: 'This data is a ' +
       data.constructor.toString().replace(/^function ([^(]+).*/, '$1')
      }
    );
  }
}

Open the index.html on your editor and replace its content by:

<html>
  <head>
    <title>My Game</title>
    <!-- The socket.io client lib is for free. ;-) -->
    <script src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <h1>My Game</h1>
    <ul id="log"></ul>
    <script>
      // Connect to the server:
      socket = io(document.location.href);

      socket.on('srv-msg', function(data) {
        log.innerHTML += '<li>Received: '+ JSON.stringify(data) +'</li>';
      });

      function send(data) {
        log.innerHTML += '<li>Sending: '+ JSON.stringify(data) +'</li>';
        socket.emit('cli-msg', data);
      }
      send('Hello');
      send(42);
      send(['aa', 'bb', 'cc']);
      send({ aa:111, bb:222 });
    </script>
  </body>
</html>

As you had changed the server code, you must to restart the js-game-server. Press Ctrl+C on the console and npm start it again.

Visit the game and you must see this list:

  • Sending: "Hello"
  • Sending: 42
  • Sending: ["aa","bb","cc"]
  • Sending: {"aa":111,"bb":222}
  • Received: {"message":"Welcome!"}
  • Received: {"hello":"Wold!"}
  • Received: {"data":42,"msg":"This data is a Number"}
  • Received: {"data":["aa","bb","cc"],"msg":"This data is a Array"}
  • Received: {"data":{"aa":111,"bb":222},"msg":"This data is a Object"}

I believe, with this example, you already get how to implement your multi-player game. For more information, please see http://socket.io/docs

Step 6 - Adding CSS and Images

All files inside the game directory are public. You don't need to implement anything to access your assets on the client. You can also create sub-directories.

Try to create a directory imgs and add a file picture.png. Also add this css to style.css on the game directory.

body {
  background: gray;
}

Update your html:

  ...
  <head>
    <title>My Game</title>
    <link rel="stylesheet" href="style.css">
  ...
  <body>
    <img src="/imgs/picture.png">
  ...

Reload and see.

Step 7 - Preview

Now you have a game. Screenshot it, crop in your editor and save at /some/path/local-games/my-game with the name preview.(png|jpg|svg). The type is up to you on this server, however you must to follow the js13kGames rules.

Do you want some real game? See the Pong example.

Add a custom footer

    js13kGames

Clone this wiki locally