koth-webplayer

Create A Game

Looking to make an online, javascript-based king-of-the-hill game? Great! Follow these steps to get going.

Fork this Project

The first thing you should do is fork this project so that you will have control over your own game.

• In github, click the “Fork” button (top-right)
• In your newly created fork, click Settings and scroll to “GitHub Pages”. Set the source to “master branch”. You will now be able to share links to your forked project so that others can play your game.
• Back in the code, click “Clone or download” and follow your prefered method to get the code on your local machine (if you’re not familiar with git, you can check github’s guide for details).

Define your Game

The example game provided is a good starting point for making a game. You can begin by copying it:

• Copy /example.htm as /<game_name>.htm
• Copy /games/example as /games/<game_name>

Next you’ll want to configure the properties for your game. Open your newly created /<game_name>.htm file and change the meta values. There are descriptive comments throughout to help you.

• When you are creating a new game from scratch, you won’t have a question ID yet (since you won’t have posted the question!). You can leave this blank, and when you run the game it will show an error but offer to continue anyway. Once you have posted the game, return to this and fill in the question ID.

• You probably won’t have much to fill in for the -config entries yet; come back to them once you’ve defined your game and display, and fill these entries with sensible defaults.

• You should create a fancy favicon for your game. These are kept in /favicons and are typically 64x64 PNGs. When rendered by browsers, they can be at various resolutions but will typically occupy 16x16 virtual pixels.

Write your Code

At a minimum, all games need a GameManager, GameScorer and Display defined. You can see examples of all of these in the example folder you copied.

If you want more components, the structure is up to you, but it is recommended to add them in the components subdirectory. You may also want to define a stylesheet, which by convention is named style.css in the game’s folder, and referenced by the Display file (when defining the module dependencies you can include './style.css' to include the stylesheet).

The example files should provide some guidance on what needs to be written, but it may be helpful to have a high-level overview as well:

• Your GameManager will be instantiated for each game. It will be inside a sandboxed web worker, so cannot display anything on the screen or fetch remote files. All communication will be through the defined API.
• The GameManager has access to the game-config, but not the play-config or display-config. The game-config will include a random seed for the game, and a list of teams (which contains entries’ source code).
• Your Display will be instantiated once and used for many games, with clear called between them. This is responsible for rendering the UI and providing any desired interactivity (e.g. changing the game speed, zooming in on areas, etc.)
• The Display has access to all configurations; game-config, play-config and display-config, and can make changes to them by triggering change* events.
• The Display is given a state generated by the GameManager (getState) after each update. This has some required fields, but in general can contain anything you want to communicate from the GameManager to the Display for rendering. Note that some object types cannot be sent through the state, as it must be passed through the web worker and sandbox boundaries.
• The GameScorer defines a simple (pure) function which will turn a game-config and state into a list of team and entry scores.

Test your Game

Once you have written some code, you can test it by opening your .htm file in a browser. Check the console for any errors encountered.

Until you have a question ID, the only way to get entries is to create them each time you open the game. Click “+ Add Entry” in the list on the left and paste in some test code. You can add as many entries as you need. Then you can “Begin Random Game” to see your game in action. Once you’re happy with the mechanics for a game, try “Begin Random Tournament” to see how it behaves when running as part of a full tournament (the tournament is configured by the meta tags in your HTML document).

Lint your Code

If you want to check your code for simple mistakes, you can add it to test.htm as a lint-module. Once you have done this, opening test.htm will run the linter against your code and warn you about any issues encountered. It is recommended that you fix these since some can lead to browser compatibility issues or subtle bugs. Others relate to code quality, and fixing them can make your code easier to work with in the future.

Release your Game

Once you’re happy with everything, post your game! This framework has built-in integration with the Stack Exchange network, so you can post a question on Programming Puzzles & Code Golf (but remember to test-drive it first on Meta!) then return to your /<game>.htm file and fill in the question ID so that it will automatically load answers.

Tag your question king-of-the-hill and javascript so that it will show up in this list.

This site is open source. Improve this page.