www.webdeveloper.com
Results 1 to 5 of 5

Thread: Using one JavaScript function to call another

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Posts
    16

    Using one JavaScript function to call another

    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.

    Code:
    /* 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.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Keep a variable somewhere with the level, and then decide what you want to do from there. I like short names so:
    Code:
    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.
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Mar 2012
    Posts
    41
    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.

  4. #4
    Join Date
    Apr 2012
    Posts
    16
    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.

  5. #5
    Join Date
    Apr 2012
    Posts
    16
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles