We have an HTML file in jgame.html which will be our entry point into the application, and which is set up to import all the CSS and JavaScript, then the following directories
- css - for all jgame CSS files
- src - for all jgame JavaScript files
- vendor - for all libraries and other 3rd party bits we'll use (like bootstrap and jquery)
In order to see what the program is outputting, we need to set up the interface so that we can start outputting things to it.
We do this by using JavaScript to write some HTML into the page, and using some CSS to style that HTML into a basic interface for our game
- src/jgame.js - defines a TEMPLATE for the layout, and writes it into the HTML DIV with the id "jgame"
- css/jgame.css - defines layout styles for the scene and the controls
- jgame.html - calls the jgame.startup() function to load the game when the browser is ready
We represent each scene in the game with an object which will hold the state for that scene, and will now how to render itself
- src/jgame.js - defines a newScene function with constructs a Scene object which can have properties, like an intro
- src/demo.js - this is where we'll build our actual game data
- jgame.html - load our new demo.js file, and send the initial scene into jgame.startup()
Each scene will have controls that are dependent on what is going on in the scene. We make a new Controls object which can take the scene's requirements and render them on the page.
- jgame.js - defines a newControls function which constructs a Controls object, which knows about the moves you can make in a Scene. We also have the Scene give us the correct Controls.
- demo.js - extend our description of the scene a little, and add a single available move
Up until now, we've focused on rendering a single scene and its controls. Our code isn't well suited to supporting multiple scenes, so we need to change some things
- demo.js - change the structure of the demo game, to allow multiple scenes by name
- jgame.html - instead of sending the initialScene to the game, send the entire game data module
- jgame.js - Change the way we startup to use the game data module
We create second scene in the demo game, and add a link in the controls that allows us to change the scene by clicking the move instruction
- demo.js - add a new scene ("cliff") and a "move_to" field in the "move" objects
- jgame.js - create a move link, and bind a jquery event handler which calls the new jgame.move function, which moves the view to a new scene
We had 2 functions (jgame.startup and jgame.move) that were of a similar structure. We now want to DRY (Don't Repeat Yourself) that code
- jgame.js - merge shared functionality from jgame.startup and jgame.move into jgame.enterScene, and have the old functions use that new one
We add the ability for a scene to contain items, and for those items to be passed on to the controls, so that in the next step we can interact with them
- demo.js - add a list of a single item with a name and sceneDescription to the first scene
- jgame.js - support the adding of items to a scene, render the scene description for the item at draw, and pass it on to the controls. The controls now render select boxes for interacting with scene items.
We add the general ability to interact with an item in a scene, and implement the ability to look at items.
- demo.js - add the text that will be displayed when you look at an item
- jgame.js - bind an event handler to the item interaction button, and an action method on the Scene that an react to the interaction, which implements the ability to Look At an item
We add the concept of a "player" who has an inventory, and modify the existing code to allow items from a scene to be collected
- demo.js - add an "inventory" version of an item, which is different from the version of the item as it appears in the scene
- jgame.js - implement "pick_up" as an action you can take on an item in the scene, and add an additional action method in the root of jgame which allows the controls to be re-drawn after
We add the inventory to the list of items you can interact with, and handle the look_at and pick_up behaviours for collected items
- jgame.js - add the inventory items to the controls pull-down and upgrade jgame.action so that it can distinguish between actions on the scene and actions on the inventory, and behave appropriately.
The Player's inventory was getting a bit out of hand, so we're going to pull all the inventory functionality into a single object, and make the Player a fully constructed object, to bring it in line with the rest of the app
- jgame.js - create a new Player object, and give it functions for interacting with the inventory. Refactor the rest of the code to use this new object
Sometimes we'll want to interact with items in a scene that we don't want the player to be able to pick up, so we introduce that kind of item, and refactor the code to handle it
- demo.js - add an item to the "cliff" scene, and introduce a new allowPickUp attribute to an items' definition
- jgame.js - refactor jgame.action to respect allowPickUp
In order to use items with eachother we'll need to add a "use" control, and we'll need to extend the current controls to allow that
- jgame.js - add a hidden select box which then appears only when "use" is selected from the controls. Extend the action click handler to extract that information and send it to jgame.action if it is relevant
This is probably our toughest step so far. Using one object on another could have a variety of consequences, so it's not so easy to declare it like we did with Look At and Pick Up.
Instead we're going to have to alow the game data to specify the behaviour, by allowing it to run a function of its own when one object is used on another. So in this step we add such a function, and build all the extra behaviour the game needs to support running it.
- demo.js - define a function to run when one item is used on another, and referene that function from within each of the items concerned, so we know when to run it
- jgame.js - add some utility functions to the player and the scene, and add the capability to act on a "use" action. When the result of the "use" puts a new item on the scene we also find a bug in our event handler, so we fix that.
To demonstrate how the controls can be changed based on actions in the game, we add a new scene which can only be reached after an item has been used on another.
- demo.js - define the new scene, and update the "use" function to add a move to that scene once the action has completed
- jgame.js - a tiny enhancement, to allow new moves to be added to a scene
The code to handle the actions "Look At", "Pick Up" and "Use" was fragmented and confusing, so we need to take a step back and make a better job of handling actions. This step consolidates actions into their own functions, which can be more complete in their behaviour.
- jgame.js - refactor jgame.action, and farm out behaviours to jgame.lookAt, jgame.pickUp and jgame.use. Along the way we make Scene.action obsolete, so it gets removed.
We want to be able to "Talk To" characters in the game, but that will require different controls from the navigation we've been using so far. So let's introduce the ability to change the controls based on actions.
- demo.js - add a simple question/answer dialogue option. This is probably the wrong way to do it, but we'll work out the right way later
- jgame.js - introduce a second set of controls, and support a "talk to" action which triggers a mode change on the scene so that it starts to issue Talk controls rather than Navigate controls
In the previous step we introduced a conversation control, though it didn't work. Here we implement the ability to have a basic conversation, and to leave that conversation.
- jgame.js - Define jgame.converse which runs the conversation, and add event handlers to the conversation control to interact with that method
The basic conversation was a bit unfulfilling, let's make it so the conversation can unfold over several steps instead.
- demo.js - define a new conversation object, with three options, only two of which are initially available to the user
- jgame.js - switch our basic list of conversation items for a Conversation object, which implements a load of features for working through conversations.