Uploading HTML5 games to Kongregate

  • 35 favourites



5,760 visits, 12,420 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

What is Kongregate?

Kongregate.com in the most basic description, is a flash game website that offers tons of games to play from various developers. Its a great source for those starting out as ideas often get feedback rather quickly. Its a nice place to make a little cash as well as Kongregate features an ad revenue type service that shares up to %50 of its revenue with indie developers (This of course depends on how many plays your game gets).

A Few things to Note.

Kongregate.com is mainly a flash game site, meaning most of the games on there are made in either flash, or Unity. However, Kongregate can support JavaScript.

All non-flash games need to be manually approved by the Kongregate staff after uploading before they can be published.

Don't let this discourage you though, as Kongregate generally publishes them. The specifics of whats required to publish a game are here.

With that said, lets continue to the tutorial.

Kongregate offers a Template on their site for the JavaScript API. Within this template is three files- Assets, Game.html and kongregate_shell.html. You only need the shell file.

1.Export your game as an "HTML5 website." This will make the tutorial all the more easier to follow. Also, Download the "HTML shell" template which can be found here.

2. Unzip the file to your desktop for easy access.

3. Open up the resulting folder and take the kongregate_shell.html file. Drag the over to your games core directory and place it there.

4.Open up the file and navigate toward the bottom of the code until you see this:

    <div id="contentdiv" style="top:0px; left:0px; width:700px; height:500px; borders:none;">

That is where we will place our iframe code.

Extra: You'll also notice that a few lines above you'll see an Embed for the game. To make doubly sure that the game works on all browsers I left the embed there and changed the quote in the line from "game.html" to "index.html"

5.Within the "contentdiv" place this code:

        <iframe src = "index.html" width = "[gamewidth]" height = "[gameheight]">
    		<p>This Browser does not support the iFrame.</p>

Where you would enter the specifications relevant to your game respectively.

Thats pretty much it for part of wiring your game to work within the API. Next you'll need to upload it Which is covered on the next page.


  • Order by
Want to leave a comment? Login or Register an account!