We have created our own example text-based idle RPG.
This page takes you through the process of the game's creation.
Click on the Contents heading to get started.
Before starting any programming, you need a basic plan.
What will your game look like?
In this case, we have chosen a text based idle clicker game.
What is the aim of the game?
To collect resources, build up skills, and evolve over time.
What language will you be programming in?
We shall be making this in a web-browser using HTML, CSS, and JavaScript.
Is it in your skillset to attempt this?
By keeping it as text-based, we will be building on the skills learned through our HTML mini-series, CSS mini-series, and JavaScript mini-series.
Now, we can start to look at getting the files we will need set-up.
We will need to create a new HTML for this game, and link it to both a new styling sheet and a script.
As our player is just starting out, the only action they have available is to forage (collect surface materials).
This action could result in the player collecting a stick, a stone, a piece of flint, some grass, or some dirt.
We need a button which activates a function when clicked in our HTML
Now to write the script for this new forage() function in JavaScript.
We used an array and then had the function select a random item from the array before printing that item into the console (right click on the game's webpage and select 'inspect the page' to view this console).
This is a good proof of concept which we now need to make more user friendly - We cannot expect our player to use the inspect panel as part of their experience.
So, we then created a starting framework for an inventory.
At this stage, the button is simply calling a random word from an array and printing it in the console.
We need to make it save each outcome and stack the items in an inventory.
We are not yet interested in styling or the GUI (Graphical User Interface). Instead, we focused on getting some starter scripts working.
We currently have five different resources that can be collected using the forage button. For each of these we created a global variable, matching the naming used in the array, and assigned them to zero to start.
Please note: Global variables in JavaScript are considered bad coding practice, but are useful during design and testing phases.
Initially we used the console log to track if the script works and that the inventory values are being stored correctly.
Surely there is a way to use the array names to set the inventory amount, instead of a large if statement and lots of individual variables?
Our currrent issue is that our array is made up of string values, whilst our variables of the same name are integer values.
So, let's do some refactoring (restructuring without altering the outcome), and create a single global variable object (or dictionary) of the strings (called keys in this context) with their assigned values. This will replace the individual global variables for these items.
We can now use this new JavaScript object with its keys in the forage() function to replace both the array generation and the if statement.
To have the player see their inventory on the screen we added a new division to the HTML for the inventory.
<html>
<header>
<title>Idle Game</title>
<link rel="stylesheet" href="./idleGame.css">
<script src="./idleGame.js"></script>
</header>
<body>
</body>
</html>
<body>
<h1>Idle Game</h1>
<div id="div1">
<button onclick="forage()">Forage</button>
</div>
</body>
<body>
<h1>Idle Game</h1>
<div id="div1">
<button onclick="forage()">Forage</button>
</div>
<div id="inventory">
</div>
</body>
function forage()
{
var forageArray = ['dirt', 'stone', 'stick', 'flint', 'grass'];
const randomForage = Math.floor(Math.random() * forageArray.length);
var collected = forageArray[randomForage];
console.log("collected " + collected);
}
var dirt = 0;
var stone = 0;
var stick = 0;
var flint = 0;
var grass = 0;
function forage()
{
var forageArray = ["dirt", "stone", "stick", "flint", "grass"];
const randomForage = Math.floor(Math.random() * forageArray.length);
var collected = forageArray[randomForage];
console.log("collected " + collected);
if (collected === "dirt"){dirt++;}
else if (collected === "stone"){stone++;}
else if (collected === "stick"){stick++;}
else if (collected === "flint"){flint++;}
else if (collected === "grass"){grass++;}
console.log("inventory contents: dirt: " + dirt + " stone: " + stone +" stick: " + stick + " flint: " + flint + " grass: " + grass);
}
var dirt = 0;
var stone = 0;
var stick = 0;
var flint = 0;
var grass = 0;
var forageDictionary = {
"dirt": 0,
"stone": 0,
"stick": 0,
"flint": 0,
"grass": 0
};
function forage()
{
var forageArray = ["dirt", "stone", "stick", "flint", "grass"];
var forageArray = Object.keys(forageDictionary);
const randomForage = Math.floor(Math.random() * forageArray.length);
var collected = forageArray[randomForage];
console.log("collected " + collected);
if (collected === "dirt"){dirt++;}
else if (collected === "stone"){stone++;}
else if (collected === "stick"){stick++;}
else if (collected === "flint"){flint++;}
else if (collected === "grass"){grass++;}
forageDictionary[collected]++;
console.log("inventory contents: dirt: " + forageDictionary["dirt"] + " stone: " + forageDictionary["stone"] +" stick: " + forageDictionary["stick"] + " flint: " + forageDictionary["flint"] + " grass: " + forageDictionary["grass"]);
}