2 Questions (Javascript reset/var delete, and logic for physic items location)


(Steve) #1

Hello,
Attached is a relatively simple paddle game. I’ve created the physics and actions as well as a Counter/timer to use for scoring.

But, the Timer seems to retain it’s prior variable value even when delete.timestamp; is used at the start of each timer execution. We will see two values popping up rather than just the current one.

function timer(hypeDocument, element, event (
delete timestamp;

var input = {
	hours:0,
    minutes: 0,
    seconds: 0
};

var timestamp = new Date(input.hours, input.minutes, input.seconds);
var interval = 1;

setInterval(function () {
    timestamp = new Date(timestamp.getTime() + interval * 1000);
    document.getElementById('timeDisplay').innerHTML =  (timestamp.getHours()>0? timestamp.getHours()+ ' Hours':'') + (timestamp.getMinutes()>0? timestamp.getMinutes()+' Minutes <br>' :'') + timestamp.getSeconds() + ' Seconds ';
}, Math.abs(interval) * 1000);

console.log(timestamp);	
}

If you play the Hype file and click the reset button two separate times you can see the issue.

  1. What logic is commonly used to track a success event? In this case, it’s flipping the Beachball into the bucket. Is there a hidden element in the bucket and IF they both the Beachball and Hidden Element share the same space we know we have success? Or it there an easier logic?

timerReset.hype.zip (45.0 KB)


(Jonathan Deutsch) #2

Here’s a few notes that hopefully will send you in the right direction:

  • using var in a function defines that variable to be local to that function, not global. Thus your var timestamp = .... line makes this a new variable to the function each time.
  • JavaScript has a feature called hoisting where if you us the var keyword anywhere within a function, it basically moves a declaration that looks like var timestamp = undefined; to the very top of the function. While it is undefined it still exists and so it will still use the local version, not a global version.
  • Thus setInterval captures the local version that was created each time reset is pressed
  • setInterval produces a new repeating timer. You have nothing that stops this timer when a subsequent reset is pressed, so each time you hit reset you’re gonna have a new repeating function using a different timestamp.

So the easiest fix is to not use var to declare the timestamp; this will make it global so only one variable will keep track of the time. Secondarily to that, you’ll also need code that either does not call setInterval a second time, or that uses clearInterval on the old one before calling again.

As for the collision detection, you could do it that way. I think there might be some other similar examples on the forums for this, and there’s definitely code on the greater internet for determining if two rectangles intersect.


(Steve) #3

Thanks Jonathan,
I tried removing the var from both "timestamp: and “interval”.
I added a clearInterval() function prior to the setInterval() function on the startTimer function.
I then named the setInterval function so as to be able to clear it by name.
I then created a separate clearTimer function and called it on the Mouse Up that fires timer() function as well as swapping out clearing on Mouse Click.

I’ll have to do more research as the setInterval is increasing (still) with every Reset button click.

timerReset_r3.hype.zip (83.7 KB)


#4

Here are the (2) adjustments I made to your most recent version (r3) along the lines of your request to prevent each “Reset” button click from accelerating the time readout rate.


1st adjustment
“var” was removed from “myTimer”.
In the “timer” function You treat “myTimer” as a local var but call it as a global in “clearTimer()”.

var


2nd Adjustment
Commented out “delete.myTimer”.

deleteTimer


(Steve) #5

Thanks Jim… I was so close. Removing the var from the newly named function did the trick.

Still trying to get the Javascript “var” understood clearly as it differs from the variables in PHP I am more used to.

Thanks again