What I'd like to know is whether it is possible to call a function from within another function?
So, for example, since the game I'm making will have several levels, what I'd ideally like to be able to do is have one function that will continually update the elements displayed on the HTML5 canvas.
At the moment, I have a method called drawGameElements() which draws a score bar along with the user's score, the current level they are playing, and the total number of levels.
/* This function draws the game elements */
var context = canvas.getContext("2d");
/* Draw a line for the 'score bar'. */
/* Draw current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri"; /* Text font & size */
context.strokeStyle = "black"; /* Font colour */
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 650, 15);
What I then want to be able to do, is have a set of methods, i.e. drawLevelOneElements(), drawLevelTwoElements(), etc, which will each draw only the elements used for that particular level.
So then, when the user views the page, the level one elements will be displayed automatically, and, once the user has completed level one, the drawGameElements() function will call a clearLevelElements() method that will clear all of the elements that were drawn by the drawLevelOneElements() method, and then call the drawLevelTwoElements() method, and so on, until the user has completed all of the levels.
If anyone could point me in the right direction, I'd be very grateful.