Timer

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Timer

Post by Epiales »

Okay, working on my game again. Got a lot of new ideas and a lot of changes I need to make to my existing one.

First, I need to know how to go about making a countdown timer start and show the time decreasing, once you click on an object, or click on an upgrade/collect button. Then once the time ends, the button shows back up. I think I can do the button showing up, as my game currently has something similar. It's the actual countdown timer that I will have the problem with. I have one currently, but you have to refresh the page to see the changed time... I need it to countdown without page refresh.

Thanks!

:oops: :oops:
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Timer

Post by Jackolantern »

Here is a simple client-side script that will run a countdown, and then show an alert when the timer goes off:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var startTime = 12;
        var timer;
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = startTime;

            //start the timer
            timer = setInterval(function() {
                //remove a second
                startTime--;
                //a little bit of trickery to make sure the 0th second is counted, but only 0 appears on the clock
                if (startTime < 0) {
                    clock.innerHTML = 0;
                    alert("The timer went off!");
                    clearInterval(timer);
                } else {
                    clock.innerHTML = startTime;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>
The indelible lord of tl;dr
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Jackolantern wrote:Here is a simple client-side script that will run a countdown, and then show an alert when the timer goes off:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var startTime = 12;
        var timer;
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = startTime;

            //start the timer
            timer = setInterval(function() {
                //remove a second
                startTime--;
                //a little bit of trickery to make sure the 0th second is counted, but only 0 appears on the clock
                if (startTime < 0) {
                    clock.innerHTML = 0;
                    alert("The timer went off!");
                    clearInterval(timer);
                } else {
                    clock.innerHTML = startTime;
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>

Okay thanks.. Will check this out some... By chance does someone know what video the urban realms has the timer on? I saw somewhere that the series had a javascript timer explained in the video. So wanted to check that out as well. Thank you!
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Okay, what I have done so far is to be able to click on a build button, and have it enter the time you clicked on it in one field in the database, and the time it takes for it to build in another field in the database. So it's set for testing, to 45 minutes. When you click the build, it puts the current time in there and then for the finish time, it takes the current time and adds 45 minutes to it. What I need now is for it to show the timer with the code you gave above. I know nothing about ajax or jquery or anything, so any help would be great. Thank you.

Code:

Code: Select all

<?php
$db_conx = mysqli_connect("localhost", "root", "", "time");
// Evaluate the connection
if (mysqli_connect_errno()) {
    echo mysqli_connect_error();
    exit();
}
$time = time();
$sql = "UPDATE time SET start='$time'";
$query = mysqli_query($db_conx, $sql);
?>

<?php
if(isset($_POST['bus'])) {

$sql = "SELECT * from time WHERE userid = 1 LIMIT 1";
$user_query = mysqli_query($db_conx, $sql);
$row = mysqli_num_rows($user_query);
 
$time = time();
$finish = time() + strtotime($row['start']) + (90 * 30);
$currenttime = $time;
$sql2 = "INSERT INTO time (start, finish) VALUES ($time, $finish)";
        $query = mysqli_query($db_conx, $sql2);

}
?>

<?php
$bus="<img src='bus.png'>";
echo " $bus";
?>

<div id="bus">
<table>
<form method='post' action='timerexample.php'>
<td class="tooltip"><input type='submit' value='Build'></td>
<input type='hidden' name='bus' value='1'></form>
</table>
So as an example, in the database it looks like:

Start time: 1395097384
Finish time: 1395100084

Subtract the two, it's 2700 seconds, which is 45 mintues

I could easily just echo the difference to show the remainder, but then it wouldn't countdown; you would need to refresh page in order to see the progress. I need a timer to countdown that 45 minutes and for the build button to be removed while it's counting down, AND where the timer doesn't start over when the page is refreshed.
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Timer

Post by hallsofvallhalla »

var sec_num = EndTime - StartTime;
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);

if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;

but I would not add time in the database, instead put start time and amount of time it takes then let the code do the rest, this way you always have the basic data in case you need it
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Okay, I still must not be getting it... If I put this:

Code: Select all

<script>
var sec_num = 1395100084 - 1395097384;
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = sec_num - (hours * 3600) - (minutes * 60);

if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
return time;
</script>
It does nothing. Blank page. I don't know much about Var and js stuff, but looks like it's defining the seconds, then those seconds are broken down into the hours, mins, seconds, and then the time is returned. So to me, looks like it should do something?

And I"m assuming I would put like 30 mins for the sec_num for 30 mins, or at least put the seconds there.....since I shouldn't put time in database? So I would need it put the time in the code and have a button to click and then the button go away when they click on it...
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Okay, so I have it showing the timer now. Just need to figure out how to start it and countdown to zero. YAY me lol. Been using both the codes listed above to try and sort this out. I know I'll need help on a click button event that when you click build or collect, or whatever, it starts the timer, and then the timer goes poof when you start the time..... something like that anyway to get me started. Thanks!

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
		var sec_num = 2700-10;
		var hours = Math.floor(sec_num / 3600);
		var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
		var seconds = sec_num - (hours * 3600) - (minutes * 60);
		
		if (hours < 10) {hours = "0"+hours;}
		if (minutes < 10) {minutes = "0"+minutes;}
		if (seconds < 10) {seconds = "0"+seconds;}
        var time = hours+':'+minutes+':'+seconds;
		
        window.onload = function() {
            //set the initial time
            var clock = document.getElementById("clock");
            clock.innerHTML = time;

        };
    </script>
</head>
<body>
    <div id="clock"></div>
</body>
</html>
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Timer

Post by hallsofvallhalla »

yes mine was not a complete solution but a resolution. You had to make it show.
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Still workin' on it... grrrr.
Nothing fancy, but a work in progress!

http://gameplaytoday.net
User avatar
Epiales
Posts: 1119
Joined: Thu Aug 15, 2013 1:38 am

Re: Timer

Post by Epiales »

Okay, here's my code for a working timer. My problem is how to make X search for the current timestamp in the database so that it gets it from the database? And how to make it not start over after refresh? Any ideas? Thanks! I'll be doing more google searching as well. Thank you for the help you've given.

Code: Select all

<html>
<head>
<script type="text/javascript">
var x=2700;
var m=x/60;
var	h=m/60;
var	m=(h-Math.floor(h))*60;
var s= Math.round((m-Math.floor(m))*60);
var m = Math.floor(m);
var h = Math.floor(h);
if(h<10){
	h = '0'+h;
}
if(m<10){
	m = '0'+m;
}
if(s<10){
	s = '0'+s;
}
var c = h+':'+m+':'+s;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
if(x>0){
	x=x-1;
	m=x/60;
	h=m/60;
	m=(h-Math.floor(h))*60;
	s= Math.round((m-Math.floor(m))*60);
	m = Math.floor(m);
	h = Math.floor(h);
	if(h<10){
	h = '0'+h;
	}
	if(m<10){
		m = '0'+m;
	}
	if(s<10){
		s = '0'+s;
	}
	c = h+':'+m+':'+s;
}else{
	c='Ready';
}
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script> 
</head>

<body>
<form>
<input type="button" value="Build" onclick="doTimer()">
<input type="text" id="txt">
</form>
<p>My Example</p>
</body>
</html>

EDITED******************

Okay, if I don't store time in the database, then I won't have to call it from the database. What I would think I needed to do then, is to remove the build button and display a picture after the timer runs down...Then in the database have a YES to the building they have just built. If there is a yes, then the BUILD button won't show....if there is a NO in the database, then the build shows? Something like that anyway. I couuld do this in php, but don't know how to mix it with JavaScript unfortunately, and not sure how to keep time from messing up on page refresh. Any Ideas? Or maybe just show an upgrade button afterwards, then repeat the timer process...
Nothing fancy, but a work in progress!

http://gameplaytoday.net
Post Reply

Return to “Advanced Help and Support”