HTML5 Roguelike Game Blueprint

html5 roguelike

Roguelike is a sub-genre of role-playing video games, characterized by random level generation, ASCII and tile-based graphics and permanent death. Roguelikes descend from the 1980 game Rogue, particularly mirroring Rogue’s character- or sprite-based graphics, turn-based gameplay that gives the player the time to plan each move, and high fantasy setting.

Have you ever wondered how to make Dwarf Fortress or how to make Nethack? This Blueprint will give you the head start that you need to start making your next Roguelike.


  • move with the arrow keys or by clicking/tapping in the direction you wish
  • bump into enemies to attack
  • pick up wand for ranged attack (4 bolts), click enemy to shoot once you have it
  • pick up pickaxe to gain the ability to remove walls/trees
  • pick up potion to heal
  • gain xp/levels by killing enemies.
  • traps (“slow” & “hurt”) trigger when you step on them
  • 3 enemy types each showcasing a different ai-type
  • 2 map generators: forest and dungeon.
  • 2 display modes: ascii & graphics

Related Documentation

For an in-depth look at how the Kiwi.JS Blueprint implements Map Generation, Pathfinding and Trajectory Plugins we’ve put together this more advanced Roguelike tutorial.

Keep a look out for more documentation and example games – coming soon!


If you discover a bug or find yourself just wanting to jump on in and help make this blueprint even better there are a number of things you can do to help. You could submit an issue via github, if you’re feeling generous you could provide us with a patch, best of all you could make a game and tell the world!

Download from Github

Share the joy
Comments 6
  1. Enzo


    I’m pretty new to programming so I wanted to start with a template/blueprint for my first program to tinker with the code and this seemed pretty neat so I downloaded it.

    I’ve tried a couple templates/blueprints before and they would use the index.html file to run it on a browser so I tried running the one that comes with this blueprint and all I got was a large dark blue square. I left it for a couple minutes thinking it would load and that didn’t work.

    I’ve tried different browsers and nothing I’ve tried gets it to work. Am I missing something? A code? Is this outdated?


  2. Hey Enzo,

    Good to hear that you are getting started programming!
    We have had a look into the Roguelike Blueprint and latest version on the repository does work, or at least we got it working.

    The issue that I think it maybe, is that you perhaps are not running the ‘index.html’ file through a server and are getting a ‘CROSS ORIGIN REQUESTS ARE ONLY SUPPORTED FOR HTTP’ error. For information of how to fix it, view or FAQ page, just because otherwise this comment would be extremely long :)

    Hope that fixes your problem. Also a handy tip is to make use of the developer tools, in particular the console because any errors or useful messages will be posted there.


  3. Woody

    Same issues as Enzo.

    Then I upload to my local test server and will not work either. Do not even get the “blue square”. Blank page.

    Looking at errors (chrome inspector) see:

    Kiwi.StateManager: Adding state
    Kiwi.StateManager: Preloader was successfully added.
    Kiwi.StateManager: Adding state
    Kiwi.StateManager: LoadingState was successfully added.
    Kiwi.StateManager: Adding state
    Kiwi.StateManager: IntroState was successfully added.

    Uncaught ReferenceError: PlayState is not defined

    Will keep trying to figure it out:)

  4. Shane Chubb

    Hello Woody,
    You might want to check out the index.html file and ensure that the following line:

    <script type="text/javascript" src="src/states/play.js"></script>

    is changed to:

    <script type="text/javascript" src="src/States/play.js"></script>

    The folder is States not states which may be the issue for you.

    <script type="text/javascript" src="src/states/play.js"></script>

  5. Ido Yehieli

    Hi guys,
    just tested it again and it still works.

    As Ben said you have to run it in a webserver (I use nginx), just double clicking the index.html file won’t do :)


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">