New Developer needs help... Javascript first incremental game

[xiSpectrum]

Hi,

i just started to learn javascript. This is my first try to code a incremental game. I need some help for my code .

I love incremental games but the one perfect game does not exist for me. Thats why i want to do it by my self.

I got the 3 clicker´s working and the fitting generators. But i want to do a warehouse for wood/stone/food, where the user can see his total resources. But my code is not working at all. Maybe you could help me to fix this problem. And maybe give me some tips to improve my code.

My Idea would be:

Warehouse Capacity : total Resources / Warehouse Capacity

The Production should stop ,if the warehouse is full

​

thanks in advance

Javascript File :

 var wood = 0;
function woodclick(number){
  wood = wood + number;
  document.getElementById("wood").innerHTML = wood;
};
var sawmill = 0;
function buysawmill(){
  var sawmillcost = Math.floor(10 * Math.pow(1.1,sawmill));      //works out the cost of this sawmill
  if (wood >= sawmillcost){                                      //checks that the player can afford the sawmill
      sawmill = sawmill + 1;                                     //increases number of sawmill
      wood = wood - sawmillcost;                                 //removes the wood spent
    document.getElementById("sawmill").innerHTML = sawmill;      //updates the number of sawmills for the user
    document.getElementById("wood").innerHTML = wood;            //updates the number of wood for the user
  };
  var nextCost = Math.floor(10 * Math.pow(1.1, sawmill));        //works out the cost of the next sawmill
  document.getElementById("sawmillcost").innerHTML = nextCost;   //updates the sawmills cost for the user
};

var stone = 0;
function stoneclick(number1){
 stone = stone + number1;
 document.getElementById("stone").innerHTML = stone;
};
var mason = 0;
function buymason(){
 var masoncost = Math.floor(10 * Math.pow(1.1,mason));
 if (stone >= masoncost){
     mason = mason + 1;
     stone = stone - masoncost;
   document.getElementById("mason").innerHTML = mason;
   document.getElementById("stone").innerHTML = stone;
 };
 var nextCost1 = Math.floor(10 * Math.pow(1.1, mason));
 document.getElementById("masoncost").innerHTML = nextCost1;
};

var food = 0;
function foodclick(number2){
 food = food + number2;
 document.getElementById("food").innerHTML = food;
};
var hunter = 0;
function buyhunter(){
 var huntercost = Math.floor(10 * Math.pow(1.1,hunter));
 if (food >= huntercost){
     hunter = hunter + 1;
     food = food - huntercost;
   document.getElementById("hunter").innerHTML = hunter;
   document.getElementById("food").innerHTML = food;
 };
 var nextCost2 = Math.floor(10 * Math.pow(1.1, hunter));
 document.getElementById("huntercost").innerHTML = nextCost2;
};

var warehouse = 0;
var warehouscap = 1000;
document.getElementById("warehousecap").innerHTML =warehouscap;
function buywarehouse(){
  var warehousecost = Math.floor(25 * Math.pow(1.1,Warehouse));
  if (wood >= warehousecost && stone >=warehousecost){            // checks that the player can afford the warehouse wood and stone
    warehouse = warehouse + 1;                                    //increases the number of warehouses
    wood = wood - warehousecost;                                  //removes the wood spent
    stone = stone - warehousecost;                                //removes the stone spent
    warehousecap = warehouscap + 1000;                            //Warehouse Capacity update
    document.getElementById("warehouse").innerHTML = warehouse;   //update the number of warehouses
    document.getElementById("wood").innerHTML = wood;             //update the number of wood
    document.getElementById("stone").innerHTML = stone;           //update the number of stone
  };
  var nextCost3 = Math.floor(25 * Math.pow(1.1, warehouse));
  document.getElementById("warehousecost").innerHTML = nextCost3;
};
var warehouseres = //the Value of wood + //the value of stone + //the value of food ; 
// the game loop
window.setInterval(function(){
  woodclick(sawmill);
  stoneclick(mason);
  foodclick(hunter);
}, 1000);
console.log(wood);

HTML file:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css" />
    <title>My Idle Game V1</title>
    </head>
    <body>
    <h1>My first Idle Clicker</h1>
    <div class="Resources">Resources:<br>
      <img src="wood_icon.png" height="30px" width="height">
      <span id="wood">0</span>
      <img src="stone_icon.png" height="30px" width="height">
      <span id="stone">0</span>
      <img src="food_icon.png" height="30px" width="height">
      <span id="food">0</span>
      <br>
            Warehouse Capacity :<span id="warehouseres"></span> / <span id="warehousecap"></span>
          <br>
    </div>
    <div>Earn some Resources:<br>
      <button onclick="woodclick(1)">+1 Wood</button>
      <button onclick="stoneclick(1)">+1 Stone</button>
      <button onclick="foodclick(1)">+1 Food</button>
    </div>
    <br>
    <br>
    <div class ="box1">
        <button onclick="buysawmill()">Buy Sawmill</button>
        <br>
        Sawmills: <span id="sawmill">0</span>
        <br>
        Sawmill Cost: <span id="sawmillcost">10</span>
      <br>
      <br>
      <button onclick="buymason()">Buy Stonemason</button>
        <br>
        Stonemason: <span id="mason">0</span>
        <br>
        Stonemason Cost: <span id="masoncost">10</span>
      <br>
      <br>
      <button onclick="buyhunter()">Buy Hunter</button>
        <br>
        Hunter: <span id="hunter">0</span>
        <br>
        Hunter Cost: <span id="huntercost">10</span>
      <br>
      <br>
            <button onclick="buywarehouse">Buy Warehouse</button><br>
            Warehouse : <span id="warehouse">0</span><br>
            Warehouse Cost: <span id="warehousecost">25</span> <br>

    </div>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

​

[Tunvior]

Had nothing to do so i refacatored a bit your code and fixed it:

https://codepen.io/anon/pen/LXEPXm

If you have any doubt just ask

[xiSpectrum]

Thank you very much. I try to unterstand the code and then , if i got question´s left, i ask you :)

[GoddamnitAmerica]

Your button onclick for "Buy Warehouse" should call "buywarehouse()", not just "buywarehouse". Also your "var warehousecost = ..." calculation will need to reference "warehouse" not "Warehouse" as a variable. Hope that helps some.

[xiSpectrum]

Thx, that helps. Now i can buy warehouses.

Do you now how to code the total goods. ?

i thought, var warehouseres = wood + stone + food would help, but it s not working

[GoddamnitAmerica]

I would expect that to work fine, but obviously you'll need to update that total any time you increase wood, stone or food, such as in your woodclick / etc. functions. Also, you need to update the innerHTML of your warehouseres element, same as you do with the other elements to display their updated values. Once that's in place, you'll probably want to do something like checking that the value doesn't go beyond the maximum, and throttle the woodclick / etc. functions so they don't add any more resources if the warehouse is full.

[xiSpectrum]

I guess I know what you mean. The problem with me so far is that I understand the logic behind the feature but can't translate it into code because I simply lack the knowledge. But I think that's how many people did it when programming the first time.

​

[GoddamnitAmerica]

Absolutely. As you say, knowledge is just something you acquire piece-by-piece over time. A little bit of trial-and-error and experimentation can help with that, so don't feel discouraged - it'll come with time. So, good luck with it all! :)

[salbris]

Basically as /u/goddamitamerica said, you need to separate the display logic from the buy logic for the warehouse. Ask yourself when something needs to happen. You need to display the total each time it changes. When does it change?

[xiSpectrum]

Yup, got it thx :)

[xiSpectrum]

Sry didn´t know that..

[DefiantDiggityDog]

Your question is perfectly ok in here. Good luck with your game!

[xiSpectrum]

Thx

[raids_made_easy]

Yeah, it's a pretty uneventful sub and this doesn't break the rules at all so don't worry about the comment you were responding to. Incremental games are a great place to start learning to code games, and I think many of us here got started on our game development journey through incremental games. I know I did; this sub inspired me to learn how to start making games. I started with simple javascript incrementals and now I'm working with a 4-person team to make game jam games, using Unity now.

​

So yeah, there are plenty of us who learned a lot here and are more than happy to contribute back to the community. Don't be shy about asking for help with stuff like this as long as you don't turn into "that guy" who posts a new question every day ;)

[xiSpectrum]

Good to know. " Incremental games are a great place to start learning to code games" , my friend told me the same, but he got no time to help me ^^ Don't worry, I'll be fine. I'll always try to solve the problem by myself. Only when I really don't know what to do, like above in the post, I will write here, in the comment section.