Wikipedia says the following about incremental games:
Incremental games (also known as idle games, clicker games, or clicking games) are video games whose gameplay consists of the player performing simple actions such as clicking on the screen repeatedly to earn currency. In some games, even the clicking becomes unnecessary after a time, as the game plays itself, including in the player's absence, hence the moniker "idle game".
In an incremental game, a player performs a simple action – usually clicking a button – which in turn rewards the player with a unit of currency. The player may spend their currency to purchase items or abilities that allow the player to earn currency faster or automatically, without needing to perform the initial action. A common theme is to give the player sources of time-based income displayed as "buildings", such as factories or farms. These sources increase the currency production rate, but higher tier sources usually have an exponentially higher cost, so upgrading between tiers takes usually about the same time or even increasingly longer.
Some games feature a reset-based system where the player resets the progress of their game and gains another form of currency. This new currency is normally used to gain global bonuses which do not disappear after a reset, allowing the player to go further than the previous reset. Incremental games vary as to whether they have a victory condition: games like Cookie Clicker allow the players to play indefinitely, while games like Candy Box! or Universal Paperclips feature endings that can be reached after a certain amount of progress is made within the games.
The first thing you need to do is create a text element. This text element will keep track of the resource used in the game. In this example we will be using gold as the resource.
<p><span id="gold">0</span> gold</p>
In the example above, we use a span element around the amount of gold with an ID of gold. This is so that later when we create our javascript, we can target the number to change the amount.
The next thing we need to do is create a button
<button onclick="mineGold()">Mine Gold</button>
Notice that we have added an attribute to the button called "onclick". This attribute is used to call functions in javascript when the button is clicked.
Before we can start coding the logic for our game, we need to import a javascript file to the HTML
<script src="scripts/game.js"></script>
The "src" attribute tells the HTML where the JavaScript file is stored. Once we have imported the script, we are now ready to write the logic for the game
In the JavaScript file we have made, which in our example is game.js, we now write the following code:
var gold = 0;
function mineGold() {
gold++;
document.getElementById("gold").innerHTML = gold;
}
We can see here how the value of the "onclick" attribute corresponds to the function name, and how the "ID" of the span is fetched in the "getElementByID" command.
Here is some explanation as to what the syntax does:
var gold = 0;
This line creates a variable named gold and assigns it the value of 0. This means that the player starts with 0 gold.
function mineGold() {
This creates a function called "mineGold()", seeing as it has the same name as the value of the onclick attribute in our button, this function will be run by clicking the button.
gold++;
This line simply increments the value in the gold variable by one.
document.getElementById("gold").innerHTML = gold;
This line first targets the document, which means the document you write your HTML in, and then proceeds to find an elements which has the ID of "gold". Once it has found the correct element, it changes the HTML inside of this element to the value we have set, which in our case is the value of the variable gold.
If you so desire, you could style your HTML elements to make your game look a bit prettier. I will not teach you how to do this, but an example of this can be seen in the exmaple game i have included. Simply right-click and click "view page source" to see what i have done.
If you have followed the steps correctly, you should have something that resembles the game i have made below. Good job!
Not very much of a game though to be honest, but hey... it is a start!
0 gold