My Clicking Game: This Problem and Others to Come

dwarfdude77 · Apr 9, 2015

I started programming a new game, based on the all those new "clicking games", and I have some problems. My first one is that I need help programming a background updater that constantly updates a paragraph (<p>) with javascript. I want it to update every maybe half a second. I'm using html, css and javascript. How can I do this?

carnageX · Apr 9, 2015

javascript - Jquery - perform an action every couple of seconds - Stack Overflow

Replace 5000 with the value you want (time is in milliseconds).

dwarfdude77 · Apr 9, 2015

Yep. That worked. Thanks! Will ask if I have any other problems.

carnageX · Apr 9, 2015

No problem.

dwarfdude77 · Apr 10, 2015

New problem: I'm having a problem rounding the player's balance. I have tried using Math.round(counter) (where var counter is the player's balance) in a function that I know is triggering, and it still comes up with numbers such as 1.6 and 2.99999... So I don't know what's going on??

carnageX · Apr 10, 2015

Got an example of what you're doing/the code you're using?

http://www.w3schools.com/jsref/jsref_round.asp

Math.Round() should round to the nearest integer.

dwarfdude77 · Apr 10, 2015

carnageX said:
Got an example of what you're doing/the code you're using?

JavaScript round() Method

Math.Round() should round to the nearest integer.

I'll give you all my code, then the piece that I'm focusing in on:

HTML:

Code:

<html>
	<head>
	<!-- Housekeeping -->
		<title> Money Tree Clicker </title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="script.js"></script>
		
	</head>
	
	<body onload="getReady()">
	<!-- Sidebar - Bank & Improvements -->
	
		<div id="leftsidebar" class="leftsidebar">
			
			<div class="moneycounter">
				 <p id="moneycounter" class="moneycounter">$0</p>
			</div>
			
			<div class="banktitleunderline"> </div>
			
			<div class="banktitleimprovementsspacer"> </div>
			
			<div class="improvementstitle"> Improvements </div>
			
			
			<div class="improvements">
			
				<div class="firstimprovementslot" id="firstimprovementslot">
					<img onclick="buyAutoTree()" title="AutoTree, click to buy!" src="http://www.techist.com/forums/images/autotree.png" id="autotree1" class="autotree1" >
					<p class="firstimprovementlevel" id="firstimprovementlevel"> </p>
					<p class="firstimprovementname" id="firstimprovementname">AutoTree</p>
					<p class="firstimprovementcost" id="firstimprovementcost"></p>
					<div class="firstimprovementunderline"></div>
				</div>
				
			</div>
		
		</div>
		
		<!-- Topbar - NewsBar -->
		
		<div  class="newsbar" id="newsbar">
			News Here
		</div>
		
		
		<!-- TopLeftBar - DateBar -->
		
		<div class="date" id="date">
			Date Here
		</div>
		
		<!-- Clicking Tree -->
		
		<div class="tree">
			<img onmousedown="downcount()" onmouseup="upcount()" id="moneytreeimg" class="moneytreeimg" src="http://www.techist.com/forums/images/moneytree.png" align="center">
		</div>
		
		
	</body>




</html>

CSS:

Code:

div.leftsidebar{background-color:orange; width:15%; height:100%; float:left;}
div.newsbar{background-color:lightblue; margin-left:10%; width:50%; height:3%; padding-top:2px; text-align:center; float:left;}
div.date{background-color:purple; float:right; text-align:center; padding:5%; padding-left:5%; padding-right:5%;}

div.moneycounter{width:100%; font-weight:bold; font-size:300%; text-align:center; height:10%;}
div.banktitleunderline{width:100%; background-color:black; height:0.5%;}
div.banktitleimprovementsspacer{width:100%; height:5%;}

div.improvementstitle{width:100%; font-weight:bold; text-decoration:underline;}

div.tree{width:100%; padding-top:5%; padding-left:5%; text-align:center;}
img.moneytreeimg{width:40%;}


div.improvements{width:100%; height:77%; overflow-y:scroll;}
img.autotree1{width:55%;}
p.firstimprovementlevel{float:right; padding-right:6%;}
div.improvementspacerone{width:100%; height:1%;}
div.firstimprovementslot{padding-top:2%;}
p.firstimprovementname{margin-top:3%;margin-bottom:0%;}
div.firstimprovementunderline{width:100%; height:0.5%; background-color:black; margin-top:1%;}
p.firstimprovementcost{margin-top:1%; margin-bottom:0%;}

JavaScript:

Code:

var counter = 0; //The amount of money the player has
var autoTreeincome= 0; //How much money an Autotree makes per second
var autoTreeLevel = 0; //How many Autotrees a player has
var autoTreeCost = 1; //The cost of an Autotree
var updateTimer = 250; //The interval in milliseconds of when the function updateTimer() will run


//Onload function

function getReady(){
	setInterval(balanceUpdater, updateTimer);
	setInterval(secondlyIncome, 1000);
	
	document.getElementById("firstimprovementlevel").innerHTML = "Lvl:" + autoTreeLevel;
	document.getElementById("firstimprovementcost").innerHTML = ("Cost:$") + autoTreeCost;
	return;
}

//Background Balance/Levels Updater, Set var updateTimer to change the time in which this function will run
function balanceUpdater(){
	Math.round(counter);
	document.getElementById("moneycounter").innerHTML = ("$") + counter;
	document.getElementById("firstimprovementcost").innerHTML = ("Cost:$") + autoTreeCost;
}
	




//Tree Clicking Sizing Animation

function downcount() {
	
	var increment = 1;
	var balance = document.getElementById("moneycounter");
	var tree = document.getElementById("moneytreeimg");
	
	counter = counter + increment;
	balance.innerHTML = ("$") + counter;
	
	tree.style.width="39%";
	return;

}

function upcount(){
	var tree = document.getElementById("moneytreeimg");

	tree.style.width="40%";
	return;
}



//Improvement Codes Start Here

	//Buying AutoTree Improvement
	
function buyAutoTree(){
	if(counter < autoTreeCost){
		alert("You do not have enough money($) to buy this!");
		return;
	}else{
	
	counter = counter - autoTreeCost;
	autoTreeincome = autoTreeincome + 0.6;
	autoTreeLevel = autoTreeLevel + 1;
	autoTreeCost = autoTreeCost * .10 + autoTreeCost;
	document.getElementById("firstimprovementlevel").innerHTML = "Lvl:" + autoTreeLevel;
	
	
	if(autoTreeLevel >= 10 && autoTreeLevel < 100){
		document.getElementById("autotree1").style.width="50%";
		return;
		}
	if(autoTreeLevel >= 100){
		document.getElementById("autotree1").style.width="45%";
		return;
		}
	return;
	}
}

//Improvement Codes End Here

//The amount of money a player gets every second
function secondlyIncome(){
	counter = counter + autoTreeincome;
	Math.round(counter);
	
}

Math.round code:

Code:

function balanceUpdater(){
	Math.round(counter);
	document.getElementById("moneycounter").innerHTML = ("$") + counter;
	document.getElementById("firstimprovementcost").innerHTML = ("Cost:$") + autoTreeCost;
}

That last line of that function you can disregard

carnageX · Apr 10, 2015

Your problem is in balanceUpdater.

Math.Round doesn't modify the input parameter - it returns an integer. So you need to do something like:

Code:

var x = Math.round(counter);
document.getElementByID("moneycounter").innerHTML = ("$") + x;

x will be the rounded integer.

Or just do it on 1 line:

Code:

document.getElementByID("moneycounter").innerHTML = ("$") + Math.round(counter);

Also, you might want to look into using jQuery to simplify some of your functionality - that way you don't have to keep doing "document.getElementByID()", but you can just reference the controls by doing "$("controlID")".

dwarfdude77 · Apr 11, 2015

Ah, yes, that would do it xD. Thanks again. I have another thing, it's not a problem, but something i'd like to do. Can I make it so that, when the tree in the middle is clicked, there is money falling behind it?

Thanks as always!

Also, I have the game up here if you want to look at it in a web browser:
Money Tree Clicker

carnageX · Apr 11, 2015

Look into some of the jQuery/JavaScript "Falling Snow" scripts widely available. Modify one to suit your needs that way - that's how I'd start, anyway. Why create something from scratch when you can reuse other code

.

My Clicking Game: This Problem and Others to Come

dwarfdude77

In Runtime

carnageX

Private Joker,

dwarfdude77

In Runtime

carnageX

Private Joker,

dwarfdude77

In Runtime

carnageX

Private Joker,

dwarfdude77

In Runtime

carnageX

Private Joker,

dwarfdude77

In Runtime

carnageX

Private Joker,

Similar threads