www.webdeveloper.com
Results 1 to 3 of 3

Thread: Math problems...

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    Math problems...

    Hi all,
    I'm just learning to code. I'm trying to code my first game. I want to have resources gather over time. I have the math part figured out, and have a simple 'count up' timer, but I'm lost as to how they can be combined. I've looked on other forums and haven't found anyone with a similar issue. Any help would be highly appreciated.

    Here's the code I'm working with:
    <HTML>
    <HEAD>
    <label id="minutes">00</label>:<label id="seconds">00</label>
    <script type="text/javascript">
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = 0;
    setInterval(setTime, 1000);

    function setTime()
    {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
    }

    function pad(val)
    {
    var valString = val + "";
    if(valString.length < 2)
    {
    return "0" + valString;
    }
    else
    {
    return valString;
    }
    }
    </script>
    <br />
    <SCRIPT>
    c=2 * 500 ;
    document.write('Coal = ');
    document.write(c);
    </SCRIPT>
    <br />
    <script>
    w=3 ;
    document.write('Wood = ');
    document.write(w);
    </script>
    <br />
    <SCRIPT>
    e=2 * 500 ;
    document.write('Electricity = ');
    document.write(e);
    </SCRIPT>
    <br />
    <script>
    g=0 * 100
    document.write('Gold = ');
    document.write(g);
    var tim = window.setTimeout("countToTen()", 1000); // increase count by 1 per second
    </script>
    <br />

    </HEAD>
    <body>
    </body>
    </body>
    </HTML>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    So let's begin with me asking you to please use some form of a code tag when posting your code. It makes things easier to read, troubleshoot or even copy and paste elsewhere to work with your code.

    Now there were a few issues that weren't necessarily related to what you are trying to do, such as having your page html inside of the <head> tags, having 2 closing </body> tags, a missing semi-colon (after the g variable) and there doesn't seem to be a countToTen() function at all. But if we clean all of that up you obviously still aren't where you want to be.

    The biggest problem I had with this was, I have no clue what you are trying to end up with. So from what I can tell, you have a function running every second to count your clock, which works fine. You seem to want your resources to also count and based on the function name I'd assume the resources accumulate on a 'per 10 second' basis. Based on the way you declared your resource variables I had to take a guess for the rate at which you wanted the resources to accumulate. And in the end we end up with something like this:
    HTML Code:
    <!DOCTYPE html>
    <head>
    	<title>Resource Game Test</title>
    </head>
    <body>
    
    <label id="minutes">00</label>:<label id="seconds">00</label> <br />
    Coal = <label id="coal">0</label> <br />
    Wood = <label id="wood">0</label> <br />
    Electricity = <label id="electricity">0</label> <br />
    Gold = <label id="gold">0</label> <br />
    
    <script type="text/javascript">
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var $cLabel = document.getElementById('coal');
    var $wLabel = document.getElementById('wood');
    var $eLabel = document.getElementById('electricity');
    var $gLabel = document.getElementById('gold');
    var totalSeconds = 0;
    var $count = 0;
    var c = 2 * 500;
    var w = 3;
    var e = 2 * 500;
    var g = 0 * 100;
    
    
    function setTime() {
      ++totalSeconds;
      secondsLabel.innerHTML = pad(totalSeconds%60);
      minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
    
      if(++$count == 10) {
        c = c + 500;
        w = w + 3;
        e = e + 500;
        g = g + 100;
    
        _UpdateResources();
        $count = 0;
      }
    }
    
    function pad(val) {
      var valString = val + "";
      if(valString.length < 2) {
        return "0" + valString;
      } else {
        return valString;
      }
    }
    
    function _UpdateResources() {
      $cLabel.innerHTML = c;
      $wLabel.innerHTML = w;
      $eLabel.innerHTML = e;
      $gLabel.innerHTML = g;
    }
    
    setInterval(setTime, 1000);
    _UpdateResources();
    </script>
    
    </body>
    </html>
    To explain what I've done, first I moved your resource html to the top below the timer and set them up with their own labels and ids. This allowed me to set a function that could be called to simply set each label to the current value of its resource. This function is of course called initially upon loading the page/script so that there is an initial value displayed. Next I added a $count variable and then used this in your setTime() function. It counts up each second when the function runs and when it reaches 10 all of your resources are increased, the labels are updated and the $count variable is reset.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Thank you so much! Your script does exactly what I was looking for.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles