Rot.js tutorial

From RogueBasin
(Difference between revisions)
Jump to: navigation, search
Line 8: Line 8:
 
* Modern web browser (Firefox, Chrome, Opera, Safari, IE9+)
 
* Modern web browser (Firefox, Chrome, Opera, Safari, IE9+)
  
=== Notes ===
+
=== Game setting ===
  
Working code samples from this tutorial are hosted at jsfiddle.net and use rot.js from GitHub. Please note that GitHub is '''not''' a CDN; you should use your own servers to host all the necessary files.
+
The tutorial consists of three chapters, which gradually add more and more functionality. The game itself is pretty simple: motivated by [https://www.youtube.com/watch?v=z4dMkYUlrR8|this video], a player needs to find an ananas hidden within several boxes in an underground dungeon. It is necessary to find the ananas before Pedro (the ananas owner) finds and punishes you for sneaking into his warehouse.
  
=== Setting and contents ===
+
=== Tutorial contents ===
 +
 
 +
'''NOTE:''' Working code samples from this tutorial are hosted at jsfiddle.net and use rot.js from GitHub. Please note that GitHub is '''not''' a CDN; you should use your own servers to host all the necessary files.
  
The tutorial consists of three chapters, which gradually add more and more functionality. The game itself is pretty simple: motivated by [https://www.youtube.com/watch?v=z4dMkYUlrR8|this video], a player needs to find an ananas hidden within several boxes in an underground dungeon. It is necessary to find the ananas before Pedro (the ananas owner) finds and punishes you for sneaking into his warehouse.
 
  
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 1|Part 1: Graphics]]'''
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 1|Part 1: Graphics]]'''

Revision as of 15:00, 12 December 2012

Contents

Ananas aus Caracas: a sample game built using rot.js

Welcome to this tutorial! We are going to create a very simple roguelike game, playable in any modern browser. To achieve this, our language of choice would be JavaScript; to simplify our work, we are going to use the rot.js toolkit.

Requirements

  • Basic JavaScript knowledge
  • Modern web browser (Firefox, Chrome, Opera, Safari, IE9+)

Game setting

The tutorial consists of three chapters, which gradually add more and more functionality. The game itself is pretty simple: motivated by video, a player needs to find an ananas hidden within several boxes in an underground dungeon. It is necessary to find the ananas before Pedro (the ananas owner) finds and punishes you for sneaking into his warehouse.

Tutorial contents

NOTE: Working code samples from this tutorial are hosted at jsfiddle.net and use rot.js from GitHub. Please note that GitHub is not a CDN; you should use your own servers to host all the necessary files.


  • Part 1: Graphics
    Start your game right away by setting up the screen, printing the stereotypical @ character and moving it around with the arrow keys.


  • Part 2: The object and the map
    This introduces two new concepts: the generic object system that will be the basis for the whole game, and a general map object that you'll use to hold your dungeon.




  • Part 5: Preparing for combat
    Place some orcs and trolls around the dungeon (they won't stay there for long!). Also, deal with blocking objects and game states, which are important before coding the next part.



  • Part 7: The GUI
    A juicy Graphical User Interface with status bars and a colored message log for maximum eye-candy. Also, the infamous "look" command, with a twist: you can use the mouse.


  • Part 8: Items and Inventory
    The player gets to collect ("borrow") items from the dungeon and use them, with a neat inventory screen. More items added in the next part.


  • Part 9: Spells and ranged combat
    The player's strategic choices increase exponentially as we add a few magic scrolls to the mix. Covers damage and mind spells, as well as ranged combat.




Personal tools