Difference between revisions of "Rot.js tutorial"

From RogueBasin
Jump to navigation Jump to search
(Linked to the Node.js version on GitHub.)
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
== Ananas aus Caracas: a sample game built using rot.js ==
== 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|rot.js toolkit]].
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 will be [[JavaScript]]; to simplify our work, we are going to use the [[rot.js|rot.js toolkit]].
 
This tutorial covers creation of a game to be played in a web browser. [http://github.com/blinkdog/ananas-aus-caracas-node See here] for a version of the game ported to Node.js so it can be played in a terminal emulator.


=== Requirements ===
=== Requirements ===
Line 10: Line 12:
=== Game setting ===
=== Game setting ===


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.
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'' (pineapple) 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 ===
=== Tutorial contents ===
Line 16: Line 18:
'''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.
'''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.


* '''[[rot.js tutorial, part 1|Part 1: Basics, map]]'''
*: Create the basic data structures, initialize the output area, generate and draw the map


* '''[[Complete Roguelike Tutorial, using python+libtcod, part 1|Part 1: Graphics]]'''
* '''[[rot.js tutorial, part 2|Part 2: Asynchronous game engine, player character]]'''
*: Start your game right away by setting up the screen, printing the stereotypical @ character and moving it around with the arrow keys.
*: Introduce the player character, add it to the engine/scheduler, let it move around
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 2|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.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 3|Part 3: The dungeon]]'''
*: Learn how to code up a neat little dungeon generator.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 4|Part 4: Field-of-view and exploration]]'''
*: Display the player's field-of-view (FOV) and explore the dungeon gradually (also known as fog-of-war).
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 5|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.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 6|Part 6: Going Berserk!]]'''
*: Stalking monsters, fights, splatter -- need we say more?
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 7|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.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 8|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.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 9|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.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 10|Part 10: Main menu and saving]]'''
*: A main menu complete with a background image and the ability to save and load the game.
 
 
* '''[[Complete Roguelike Tutorial, using python+libtcod, part 11|Part 11: Dungeon levels and character progression]]'''
*: Let the player venture deeper into the dungeon and grow stronger, including experience gain, levels and raising stats!


* '''[[rot.js tutorial, part 3|Part 3: Interaction, Pedro]]'''
*: Let the player open boxes (to make the game winnable); implement Pedro and his pathfinding (to make the game losable)


* '''[[Complete Roguelike Tutorial, using python+libtcod, part 12|Part 12: Monster and item progression]]'''
*: Deeper dungeon levels become increasingly more difficult! Here we create tools for dealing with chances and making them vary with level.




[[Category: Developing]]
[[Category: Developing]]

Latest revision as of 13:06, 20 March 2015

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 will be JavaScript; to simplify our work, we are going to use the rot.js toolkit.

This tutorial covers creation of a game to be played in a web browser. See here for a version of the game ported to Node.js so it can be played in a terminal emulator.

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 this video, a player needs to find an ananas (pineapple) 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: Basics, map
    Create the basic data structures, initialize the output area, generate and draw the map
  • Part 3: Interaction, Pedro
    Let the player open boxes (to make the game winnable); implement Pedro and his pathfinding (to make the game losable)
Retrieved from "http://roguebasin.com/index.php?title=Rot.js_tutorial&oldid=40055"