JavaScript incremental game interval looping

Question

I am making a very simple incremental game but I can't figure out a good way to implement upgrades.

I want to make a button which makes the cursor loop go faster. Basically, you get 1 coins for every cursor every second. And the upgrade should make it so it will take less millieseconds for every loop.

I'm trying to do this with window.setInterval but I can't figure out how to make it variable, my method does not work.

var coins = 0;

function coinClick(number){
 coins = coins + number;
 document.getElementById("coins").innerHTML = coins;
}

var cursors = 0;
var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
var cursorUpgrades = 0;
var cursorUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));

function buyCursor(){
 var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
 if(coins >= cursorCost){
  cursors = cursors + 1;
  coins = coins - cursorCost;
  document.getElementById('cursors').innerHTML = cursors;
  document.getElementById('coins').innerHTML = coins;
 };
 var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
 document.getElementById('cursorCost').innerHTML = nextCost;
};

function buyCursorUpgrade(){
 if(coins >= cursorUpgradeCost){
  cursorUpgrades = cursorUpgrades + 1;
  coins = coins - cursorUpgradeCost;
  document.getElementById('cursorUpgrades').innerHTML = cursorUpgrades;
  document.getElementById('coins').innerHTML = coins;
 };
 var nextUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));
 document.getElementById('cursorUpgradeCost').innerHTML = nextUpgradeCost;
};

window.setInterval(function(){
 coinClick(cursors);
}, Math.round(1000 - 100 * cursorUpgrades));

function save(){
 localStorage.setItem("coins",JSON.stringify(coins));
 localStorage.setItem("cursors",JSON.stringify(cursors));
 localStorage.setItem("cursorCost",JSON.stringify(cursorCost));
 console.log('Saved.');
};

function load(){
 console.log('Loaded.');
 coins = JSON.parse(localStorage.getItem('coins'));
 cursors = JSON.parse(localStorage.getItem('cursors'));
 cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
 document.getElementById('cursors').innerHTML = cursors;
 document.getElementById('coins').innerHTML = coins;
 document.getElementById('cursorCost').innerHTML = cursorCost;
};

function resetgame(){
 coins = 0;
 cursors = 0;
 cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
 document.getElementById('cursors').innerHTML = cursors;
 document.getElementById('coins').innerHTML = coins;
 document.getElementById('cursorCost').innerHTML = cursorCost;
};

var savegamecoins = JSON.parse(localStorage.getItem("coins"));
var savegamecursors = JSON.parse(localStorage.getItem("cursors"));

if (coins == 0 && cursors == 0) {
  coins = savegamecoins;
  cursors = savegamecursors;
  cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
  document.getElementById('cursors').innerHTML = cursors;
  document.getElementById('coins').innerHTML = coins;
  document.getElementById('cursorCost').innerHTML = cursorCost;
};

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="interface.css" />
 </head>
 <body>
  <button onClick="coinClick(1)">Click Me!</button>
  <br />
  Coins: <span id="coins">0</span>
  <br />
  <button onClick="buyCursor()">Buy cursor</button>
  <br />
  Cursors: <span id="cursors">0</span>
  <br />
  Cursor Cost: <span id="cursorCost">10</span>
  <br />
  <button onClick="buyCursorUpgrade()">Buy Cursor Upgrade</button>
  <br />
  Cursor Upgrades: <span id="cursorUpgrades">0</span>
  <br />
  Cursor Upgrade Cost: <span id="cursorUpgradeCost">100</span>
  <br />
  <button onClick="save()">Save Game</button>
  <br />
  <button onClick="load()">Load Game</button>
  <br />
  <button onClick="resetgame()">Reset Game</button>
  <br />
  <script type="text/javascript" src="main.js"></script>
 </body>
</html>

I don't know if I understand well... But if what you want to achieve is to make the timer of `setInterval` variable, you can consider [this answer](https://stackoverflow.com/questions/18963377/use-variable-as-time-in-setinterval-settimeout) — edkeveked, Nov 04 '17 at 18:55

edkeveked · Accepted Answer · 2017-11-04T19:35:49.467

There is a couple of errors in your js code.

You never change the value of coins: coins + number (at the beginning when calling coinClick(cursors) coins =0 and number=0 which explains why the coins you are displaying does not change.
If you want the timer of your setInterval to be variable, you can consider using setTimeout instead as it is was explained here.

Below are some changes I made in your js code

var coins = 0;

function coinClick(number){
    //I made a change here so as the variable "coins" could vary
    coins = coins + 1;
    document.getElementById("coins").innerHTML = coins;
}

var cursors = 0;
var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
var cursorUpgrades = 0;
var cursorUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));

function buyCursor(){
    var cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    if(coins >= cursorCost){
        cursors = cursors + 1;
        coins = coins - cursorCost;
        document.getElementById('cursors').innerHTML = cursors;
        document.getElementById('coins').innerHTML = coins;
    };
    var nextCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursorCost').innerHTML = nextCost;
};

function buyCursorUpgrade(){
    if(coins >= cursorUpgradeCost){
        cursorUpgrades = cursorUpgrades + 1;
        coins = coins - cursorUpgradeCost;
        document.getElementById('cursorUpgrades').innerHTML = cursorUpgrades;
        document.getElementById('coins').innerHTML = coins;
    };
    var nextUpgradeCost = Math.floor(100 * Math.pow(2,cursorUpgrades));
    document.getElementById('cursorUpgradeCost').innerHTML = nextUpgradeCost;
};
/*
setInterval(function(){
    coinClick(cursors);
    console.log("execution")
}, Math.round(1000 - 100 * cursorUpgrades));*/

function periodicall() {
    coinClick(cursors);
    //if you change cursorUpgrades, your timer will change
    timer = Math.round(1000 - 100 * cursorUpgrades)
    console.log(timer);
    setTimeout(periodicall, timer);
};
periodicall();

function save(){
    localStorage.setItem("coins",JSON.stringify(coins));
    localStorage.setItem("cursors",JSON.stringify(cursors));
    localStorage.setItem("cursorCost",JSON.stringify(cursorCost));
    console.log('Saved.');
};

function load(){
    console.log('Loaded.');
    coins = JSON.parse(localStorage.getItem('coins'));
    cursors = JSON.parse(localStorage.getItem('cursors'));
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

function resetgame(){
    coins = 0;
    cursors = 0;
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

var savegamecoins = JSON.parse(localStorage.getItem("coins"));
var savegamecursors = JSON.parse(localStorage.getItem("cursors"));

if (coins == 0 && cursors == 0) {
    coins = savegamecoins;
    cursors = savegamecursors;
    cursorCost = Math.floor(10 * Math.pow(1.1,cursors));
    document.getElementById('cursors').innerHTML = cursors;
    document.getElementById('coins').innerHTML = coins;
    document.getElementById('cursorCost').innerHTML = cursorCost;
};

JavaScript incremental game interval looping

1 Answers1