Using one JavaScript function to call another

[someone2088]

Hi,

I'm writing a web page using HTML5 and JavaScript that will allow users to learn some basic Welsh by playing a very simple game.

I'm currently trying to write the game using JavaScript, but I don't have much experience of using JavaScript at all, having only used it briefly once before, and that being a few years ago.

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 */
			function drawGameElements(){
				
				var context = canvas.getContext("2d");
				
				/* Draw a line for the 'score bar'. */
				context.moveTo(0, 25);
				context.lineTo(700, 25);
				context.stroke();
				
				/* 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.

Effectively, I want to use the JavaScript equivalent of a Java switch statement or case statement.

If anyone could point me in the right direction, I'd be very grateful.

[Declan1991]

Keep a variable somewhere with the level, and then decide what you want to do from there. I like short names so:

var level = 0; // Habit of starting from 0
var levelTitles = ["Level 1","Level 2","Level 3"]; // so that you can use arrays easily
function draw() {
  // all that stuff you have up there
  switch (level) { // don't like this personally
     case 0: // do stuff
                break;
     case 1: // more stuff
                break;
  }
  if (level == 1) { // I prefer this
    // do stuff
  } else if (level == 2) {
    // more stuff
  }
}

However, as I indicated with the titles array, you mightn't need that at all depending on what precisely you have to do for each level.

[blak422]

Run a loop until a condition is met on the last level. Like:

GameOver = false;

function DoLevel1()
{
//do stuff until done
if(done)
{
DoLevel2()
}
}
function LastLevel()
{
//do stuff until done
if(done)
{
GameOver = true;
}
}
while(!GameOver)
{
DoLevel1();
}

I hope this give you an idea.

[someone2088]

Hey,

Thanks for your suggestions.

I had thought about using a loop, but I just thought a switch statement might help to keep the code a bit tidier and more organised. I'll give it a try anyway and see how I get on.

Thanks again.

[someone2088]

Hey, I've had a go at what you've suggested, but for some reason, my code isn't performing all of the functions it should. At the moment, when the page loads, a function called 'startGame() is automatically called.

startGame() has method calls to two other methods: drawGameElements() and drawLevelOneElements(), but for some reason, when I view the page in the browser, only the call to drawGameElements() appears to have been executed- i.e. the game elements (title bar, level and score are all displayed at the top of the canvas), but none of the code from the function drawLevelOneElements() appears to have been executed.

The code for startGame() is:

function startGame(){
				drawGameElements();
				drawStartButton(); /* 12/04/2012 for some reason, this isn't calling
									the drawStartButton function, or the
									drawStartButton function is not drawing the start
									button. */
				drawLevelOneElements();
				//game_id=setInterval(game_loop, 50);
			}

The code for drawGameElements() is:

function drawGameElements(){
				
				/* Draw a line for the 'score bar'. */
				context.moveTo(0, 25);
				context.lineTo(700, 25);
				context.stroke();
				
				/* 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);
			}

and the code for drawLevelOneElements is:

function drawLevelOneElements(){
				var context = canvas.getContext("2d");
				
				/* Draw the images for numbers 1-10.*/
				var image1 = new Image();
				image1.onLoad = function(){
					context.drawImage(image1, 50, 50);
					};
				image1.src="1.png";
			}

Basically, level one should just display 10 .gif image files for the numbers 1-10 (at the moment, I've only linked to one file, just to try and get it working before adding the rest in), but for some reason, the image is not being displayed on the canvas...

Any ideas what I'm doing wrong here?

Thanks