My Clicking Game: This Problem and Others to Come

[dwarfdude77]

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 .

Haha. I'll look into that, thanks!

 

[carnageX]

Some of them just use an image and make them fall on the screen - so you could just replace the image that it uses at a minimum.

 

[dwarfdude77]

New problem: I'm making a function that runs every 5 seconds with setInterval(). The function sets the date, and every time it runs, another day passes. My problem is, it runs the first time, then refuses to run again. There are no errors in the console. Here the function's code:

function date(){
	var day = 1;
	var month = "January";
	var year = 2015
	
	day++;
	
	switch(month){
		
		case "January":
			if(day == 32){
				day = 1;
				month = "February";
				break;
			}
			
		case "February":
			if(day == 29){
				day = 1;
				month = "March";
				break;
			}
			
		case "March":
			if(day == 32){
				day = 1;
				month = "April";
				break;
			}
			
		case "April":
			if(day == 31){
				day = 1;
				month = "May";
				break;
			}
			
		case "May":
			if(day == 32){
				day = 1;
				month = "June";
				break;
			}
			
		case "June":
			if(day == 31){
				day = 1;
				month = "July";
				break;
			}
			
		case "July":
			if(day == 32){
				day = 1;
				month = "August";
				break;
			}
			
		case "August":
			if(day == 32){
				day = 1;
				month = "September";
				break;
			}
			
		case "September":
			if(day == 31){
				day = 1;
				month = "October";
				break;
			}
			
		case "October":
			if(day == 32){
				day = 1;
				month = "November";
				break;
			}
			
		case "November":
			if(day == 31){
				day = 1;
				month = "December";
				break;
			}
			
		case "December":
			if(day == 32){
				day = 1;
				month = "January";
				year++;
				break;
			}
	}	
	document.getElementById("dateday").innerHTML = day;
	document.getElementById("datemonth").innerHTML = month;
	return;
}

 

[carnageX]

Related? javascript - setInterval() not repeating. Works only 1 time - Stack Overflow

BTW, I believe JS has a lot of built-in date functions, such as adding days/months/years/etc. to a date variable. May want to look into those.

 

[dwarfdude77]

Nevermind, I thought about it some more and realized that, since I was declaring the "day" variable EVERYTIME the function ran, it always defaulted to 1, so it appeared that the function wasn't running every time, when in fact it was, just nothing was changing. I fixed it by declaring the variables outside of the function xD.

 

[dwarfdude77]

Okay, new problem, this time it's a styling problem.

Instead of explaining it, here's a screenshot and the code that goes with it


Here's the html and css:
HTML:

<div class="tradingpost">
				<div class="tradingposttitle" id="tradingposttitle">The Trading Post </div>
				
				<div class="tradingpostleaf" id="tradingpostleaf">
					1
					<img src="http://www.techist.com/forums/images/leaf.png" class="tradingpostleaf">
					<button class="tradingpostleafbtn"> -> </button>
					<img src="http://www.techist.com/forums/images/money.png" class="tradingpostleafmoney">
					<div class="tradingpostleafmoneyamount">10</div>
				</div>
				
			</div>

CSS:

div.tradingpost{
background-color:orange;
height:100%;
width:25%;
}

div.tradingposttitle{
font-size:20px;
text-align:center;
border-bottom: 1px solid black;
}

img.tradingpostleaf{
width:15%;
}

div.tradingpostleaf{
font-size:30px;
padding-top:3%;
padding-left:3%;
}

img.tradingpostleafmoney{
width:15%;

}

Now, my problem is that I need the number 10 (this number I use as a placeholder, it will be dynamic w/ javascript later) on the level of the money img, that is, not below it. In theory, this code (in my mind) SHOULD put the money img and the 10 right next to each other, but that doesn't seem to be the case?

Thanks in advance!

EDIT:
I've also tried putting the 10 before the money, and the money is still pushed down to the next level.

 

[carnageX]

Most likely because the total width of all the contents of your "tradingpost" div's width, so it's overflowing to the next line.

Using your browser's Dev Tools (usually F12) helps a lot in figuring out styling issues/tweaks.

 

[dwarfdude77]

Nevermind now, i've decided to move the trading post from the bottom to the left side bar. But I'm going to wait on that for now, because I want to add a player leveling system. Now, i'd like to do an experience tracker that has the player's level in a circle, and on the outside of the circle, bordering it (so it is circular as well) there's a bar, and this bar slowly fills up as the player gains XP. My problem is the bar. I could see me doing this by taking 100 different images, each one for 1 percent, but that seems tedious and difficult. Are there any other ways to do this?

The bar would be something like this, with the level where the 58 is:


P.S.: Sorry it took so long to get back to you, i've been on vacation

 

[carnageX]

Modify this to suit your needs:
CSS radial progress bar - Animate All the Things! - JSFiddle

Or lookup another CSS / JavaScript circular progress bar.

 

[dwarfdude77]

Modify this to suit your needs:
CSS radial progress bar - Animate All the Things! - JSFiddle

Or lookup another CSS / JavaScript circular progress bar.

Okay, you couldn't explain the spans could you? Just curious, thanks.