Writing a game

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.

    js13kGames

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.