DrawGameScreen function not executing

Hello,
I made my first javascript game and I'm hopping to get some help here to fix some problems in the program please.

This is my code: https://codepen.io/mandyq/project/editor/XYndRv

When I load the page, the DrawGameScreen funtion is not executing and I have to refresh the page once so the DrawGameScreen funtion to execute. Much appreciated for some help to fix this. Thank you.

 

What are we supposed to see? I saw a countdown and then the number 1000 on the first load. Same on the second load.

 

Thank you for getting back to me!
The number 1000 is supposed to go down as the monkey overlaps with the rocks. But the number 1000 goes down only on second load. My question is that how I could have the number 1000 to go down on first load.
Thank you so much!

 

I put the game on the school server : http://mylinux.langara.bc.ca/~qlai02/js-project/survival/spaceMonkey.html

 

1000 doesn't go down on the 2d, 3d, etc. loads. I am viewing it on Chrome. What browser are you using?

 

I'm using Chrome as well. Were you opening the program through this URL? http://mylinux.langara.bc.ca/~qlai02/js-project/survival/spaceMonkey.html
Mine does down after 2nd load. So strange.

 

So strange. Don't know how to fix this... =(

 

It's working on the second load. Sorry, I didn't wait long enough. So, yes, it does start the countdown on the second load.

 

You've got a lot of silly/pointless code in there... like the id="body" and getElementById of it when you could just say "document.body" and skip that extra junk. Or the "variables for nothing" that waste memory allocations when you could just return the values. The use of "if" where if a case is true you should exit via return or use SWITCH/CASE.

Much less all the process wasting "let"

The real problem though is I quite literally see no entry vector in the scripting for this to actually do... anything other than the keyboard handler. Where does this actually hook any of these functions to actually do... whatever it is you're trying to do?!?

Oh, well there's your problem. You're doing the onload in the markup where the canvas and other things might not even exist yet. Big tip, 99.99% of the time you see "onEvent" style attributes in the markup, it's wrong. Utter and total junk.

Put window.addEventListener('load') in the JS instead of the markup. Hell, you probably don't even need the setTimeout that's in your onLoad function.

That said, seriously:

// not a class, don't start with UC letter!
function getRandomInteger(a, b) {
	return Math.floor((Math.abs(a - b) + Math.min(a, b)) * Math.random());
}  // getRandomInteger

Code (markup):

var mKeys = {
	'ArrowUp' : false,
	'ArrowDown' : false,
	'ArrowLeft' : false,
	'ArrowRight' : false
};

document.body.addEventListener("keydown", function (event) {
	if (event.key in mKeys) mKeys[event.key] = true;
});

document.body.addEventListener("keyup", function (event) {
	if (event.key in mKeys) mKeys[event.key] = false;
});

Code (markup):

And seriously, do NOT use innerHTML. It will drag performance into the ninth ring of hell... and stop making "variables for nothing".

function OutputCounter() {
  document.getElementById("counter").textContent = counter;
}

Code (markup):

that could probably be even more performant if you stopped doing "getElementBy" each and every blasted time and just grabbed said element from the start.

That said, and as much as I dislike the derpy pointless let/const garbage and people putting "let" on every joe-blasted line instead of comma delimiting, it's really nice and refrhesing to see some code that's well formatted and not riddled to death with cryptic hard to decipher variables names. Those are some good formatting and naming conventions above/beyond the schlock most people vomit up.

You just need to tune out some redundancies and pointless and/or outdated bits of code. Kind of funny to see such a mix of bleeding edge nothingness with outdated techniques.