Php mysql javascript game with count down timer - javascript

I am making a game with php mysql and jquery which involves finding out 5 differences in two images within 30 seconds. Everything works fine but some users are able to submit scores(time taken to find all 5 differences) like 0.008 seconds which is next to impossible even if you play the same image multiple times and touch the screen with all 5 fingers.
Any idea how this could be possible? Just theory wise. Below is the count down timer code.
var end = new Date();
var temp = new Date();
end.setSeconds(temp.getSeconds()+30);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var milliseconds = Math.floor(distance % _second);
var countdownElement = document.getElementById('elapsed_time');
//countdownElement.innerHTML = seconds + ':' + milliseconds;
seconds=seconds+1;
//countdownElement.innerHTML = '00:' + seconds.toString();
var strmil = milliseconds.toString();
if(strmil.length==3){
strmil=strmil.substring(0, strmil.length - 1);
}
countdownElement.innerHTML = seconds + ':' + strmil;
if( seconds==0){
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
countdownElement.innerHTML = '00:00';
setTimeout(function(){
window.location='go to a page which shows the you timed out';
}, 1000);
}
}
if( $('#elapsed_time').length ){
timer = setInterval(showRemaining, 10);
}

Gathered from information the comments you gave me I think the problem is located where you perform your checks. The following probably happens in the application when this error occurs.
When the game starts it starts the timer.
The application then constantly checks if the differences have been found yet
An error occurs here and the application instantly receives that all the differences have been found.
The game stops the timer and shows the victory popup with around 0.001-0.008 seconds.
This entire process takes around 0.001-0.008 seconds which explains the score.
So you should probably check for the bug in the part where it checks the differences. The code you posted works fine and the bug is not found there.
Keep browser compatibility issues in mind, maybe the bug only occurs on certain browsers.

Related

How to create minutes count down using javascript

I have a program which I wrote with html just like a website but runs offline so I want to add 35 minutes countdown after the user have logged in then when the 35 minutes is exusted the user will be logged out
But I can't get the code right because I am new to javascript but I was able to get it to count for 60seconds and after that it will alert the user with "logout" but I want it to log the user out not to alert the user to logout
This is the html code
<div id="counter">1:00</div>
And this is the javascript code
function countdown() {
var seconds = 60;
function tick() {
var counter = document.getElementById("counter");
seconds--;
counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds);
if( seconds > 0 ) {
setTimeout(tick, 1000);
} else {
alert("Game over");
}
}
tick();
}
countdown();
<script>
// Set the date we're counting down to
var countDownDate = new Date("July 12, 2017 09:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="counter"
document.getElementById("counter").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "EXPIRED";
}
}, 1000); // time changes in every 1 second
</script>
<p2>to go</p2>
try this out, change date and time according to your need
Handling sessions in the frontend is not the best way to approach this, but since you asked...
Your method seems correct, I mean you just have to change 60 seconds with 2100 (for 35 minutes) seconds. To logout you'd need a function or a page to log them out.
The problem with this method is that if they refresh the page the counter also refreshes, also they can directly change the javascript if they want, rewrite the function and so many other things...
Luckily for you Javascript now supports something called session storage and local storage, so you can store your timer in one of these variables and even if they refresh the page you don't lose their latest value. Session variables last for as long as the browser is open, local variables last until forever, or if until you unset them.
You can set storage values like this:
var latestTime = localStorage.getItem('secondsPassed');
localStorage.setItem('secondsPassed', lastTime+1);
This will at least get around them refreshing the page and closing-reopening the browser to refresh the timer!
If you want to learn how to handle sessions properly read into PHP since the backend is the best way to handle these kind of things.
function countdown() {
var timeoutMinutes = 35;
var startTime = new Date();
var elapsedSecond = 0;
function tick() {
var counter = document.getElementById("counter");
var currentTime = new Date();
elapsedSecond = (currentTime - startTime) / 1000;
counter.innerHTML = formatPlaces("0") + ":"
+ formatPlaces(elapsedSecond / 60) + ":"
+ formatPlaces(elapsedSecond % 60);
if (elapsedSecond <= timeoutMinutes * 60) {
setTimeout(tick, 1000);
} else {
alert("Game over");
}
}
tick();
}
function formatPlaces(value) {
var intValue = parseInt(value);
return intValue.toString().length == 1 ? "0" + intValue.toString() : intValue.toString();
}
countdown();
<div id="counter">00:00</div>

Countdown timer javascript

How do i make countdown timer that will be the same for everyone regardless their time on pc.
The script doesn't work as i wanted it to, basically anyone can change the timer with just changing date and time on their pc.
var end = new Date('07/31/2015 4:10 pm');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('giveaway1').innerHTML = 'The Winner Has Been Chosen!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('giveaway1').innerHTML = days + 'days ';
document.getElementById('giveaway1').innerHTML += hours + 'hrs ';
document.getElementById('giveaway1').innerHTML += minutes + 'mins ';
document.getElementById('giveaway1').innerHTML += seconds + 'secs';
}
timer = setInterval(showRemaining, 1000);
Since local PC time is outside your control, you will have to get the reliable time from your server (or a third-party server) at least once.
Once you know what the (correct) server time is, you can subtract server time from local PC time to get the 'offset' (i.e. the difference between server time and local PC time).
Once you have that offset you can then at any time get the local PC time - via new Date() - and factor in the offset to get the 'correct' server time, without having to call the server each time.

Javascript timer not stopping

The following script counts down but it won't stop counting when it reaches the end time.
When it reaches zero, it start again from 60:00 to 0 (another hour).
When i skip the part
$time = str_replace(' ', 'T', $db[time]);
and do it like this:
var end = new Date('<?=$db[time]?>');
The counter is stopping correctly, but then the counter wont work at IE or Firefox only in Chrome.
Anyone know how to stop this counter:S Thanx!
$db[time] = Timestamp field in the database (2013-10-03 11:32:39)
The Script:
$time = str_replace(' ', 'T', $db[time]);
Java script
<script>
var end = new Date('<?=$time?>');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById('countdown').innerHTML = 'ITS NOW TIME!</font><BR><BR>';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById('countdown').innerHTML = '<font color="orange">' + minutes + ':';
document.getElementById('countdown').innerHTML += '<font color="orange">' + seconds + ' minutes</font>';
}
timer = setInterval(showRemaining, 1000);
</script>
I suggest you use
var countInterval = setInterval(function() { countdown(secondsRemaining); },1000) instead.
This way you won't have to play around with Date or Time objects. Just keep a count inside countdown() and clearInterval(countInterval) once you reach 60.
I'm a little suspicious of your innerHTML usage. Where is this script located in the HTML? I have a feeling it's getting re-evaluated after setting innerHTML. You could test the theory by putting a console.log("Started!") statement next to setInterval.
Also, look here:
document.getElementById('countdown').innerHTML = 'ITS NOW TIME!</font><BR><BR>';
You're "setting" (replacing) the innerHTML of an element so it will contain: text, and then a close-font tag. That might mess up your DOM. Finally, you shouldn't be setting innerHTML twice in two lines - set it once in a function, perhaps based on a variable.
(To clarify: Using innerHTML on its own isn't the worst thing - but with malformed HTML, or by adjusting an element too high in the heirarchy, it can have unintended effects)

create countdown timer in milliseconds

I'm trying to create a timer that counts down in years, months, days, hours, minutes, seconds and milliseconds. I've found a few guides online, but they are sort of not easy to understand, or do not do the milliseconds. Can anyone help me do something like this, say, for this friday at 13:30.
so it could read 0y 0m 2d 2h 11m 50ms
and counts down the milliseconds. I would show code to demonstrate that I have actually tried to do this myself, but it all failed so dismally that i'd be embarrassed to.
I also read this article, which makes me mistrust javascript timers a bit. Is this true, that they become so out of sync?
Thanks for any help!
Depends how you implement it.
If you read the time once and depend on the setInterval or/and setTimeout for the accuracy then yes .. they can get out of sync.
If you always get the current time for using in your calculations, then it can go out of sync like the rest of your system goes out of sync... meaning that it follows the clock of the computer.
Altering my answer at JavaScript / jQuery Countdown to add milliseconds you get
var end = new Date('13 Apr 2012 13:30:00');
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24;
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
// handle expiry here..
clearInterval( timer ); // stop the timer from continuing ..
//alert('Expired'); // alert a message that the timer has expired..
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var milliseconds = distance % _second;
var countdownElement = document.getElementById('timer');
countdownElement.innerHTML = days + 'd ' +
hours + 'h ' +
minutes + 'm ' +
seconds + 's ' +
milliseconds + 'ms';
}
timer = setInterval(showRemaining, 10);
But it does not handle month and year as that needs more complex calculations to factor 28-31 day months and leap years..
Demo at http://jsfiddle.net/TaHtz/2/
Try this js fiddle: http://jsfiddle.net/QH6X8/185/
Set the end date with the end variable defined on the first line of the JavaScript.
If you don't want to update every 1 millisecond, then here is a jsfiddle updating every 60: http://jsfiddle.net/QH6X8/187/

how to make a unique function for multiple codes of javascript

I have the following code and I am wondering how to put it all on one function and give the id's of the span a unique id. So that way I dont have to have multiple instances off the same code each time. Right now if I want to have 3 countdowns I have to add his code three times and change the span id to a unique ID if i don't it will only work onces. So basically I want to be able to turn the JavaScript into one function so that I can call it without having to copy and paste it multiple times and also be able to have more than one countdown on a page by giving the span its own unique(random) id.
<script>
function showRemaining() {
<?php echo "var end = new Date('". $row['expires'] ."');"; ?>
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
clearInterval( timer );
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
document.getElementById('countdown').innerHTML = 'Days: ' + days + ' ';
document.getElementById('countdown').innerHTML += 'Hours: ' + hours + ' ';
document.getElementById('countdown').innerHTML += 'Minutes: ' + minutes + ' ';
document.getElementById('countdown').innerHTML += 'Seconds: ' + seconds;
}
timer = setInterval(showRemaining, 1000);
</script>
<span id="countdown"></span>
Here's a few approaches I would recommend to make this function more reusable.
Pass the time of expiry as an argument, instead of hard-coding it to some database value that's printed by PHP code.
Break the implicit timer and UI (span) connection. Pass the element where this timer would be updated explicitly.
Manage the timer interval within the function itself. Right now it's spread between the function and global code (setInterval), which will make it difficult to reuse.
Here's the updated interface I propose for this function.
/*
#param expiryTime timestamp when this countdown will expire
#param elementToUpdate a reference to a DOM element that shows the timer
*/
function showRemainingTime(expiryTime, elementToUpdate)
Say if you have two spans with id's a and b which need to show this timer, then you would use this function as,
showRemainingTime(1325544453556, document.getElementById('a'));
showRemainingTime(1218290387102, document.getElementById('b'));

Categories

Resources