#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Posts
    13
    Rep Power
    0

    Calling one JavaScript function from another


    Hi,

    I'm trying to write a simple web page that will allow users to learn some very basic Welsh by playing a game.

    I'm writing the game using the HTML5 canvas and JavaScript, but I've not used JavaScript much at all in the past, and the last time I used it was a few years ago, so I'm a bit unsure of what I'm doing.

    Currently, I have the canvas is loading in the browser, and it is displaying the 'menu bar', which shows the current level that the user is playing, and their current score.

    What I'm trying to do is write an individual function for each of the levels of the game, so that all of the elements of each individual level will be written by the same function, and then have another function that will call the functions for each of the levels in turn, as the user completes each level.

    Effectively, the steps I want the game to follow are:

    1. Page loads, canvas loads with a 'start game' button
    2. User clicks the 'start game' button, all of the elements for level one are loaded on the canvas.
    3. User plays level one until completed, then the level one elements are cleared, and the level two elements are loaded.
    4. User plays level two until completed... etc, etc.

    Currently, I have a 'drawGameElements' function, which draws the score bar, the current level being played, and the current score.

    I also have a 'drawLevelOneElements' function, 'drawLevelTwoElements', etc.

    I then have a function called 'startGame', which is called automatically when the page loads. This is the function which I am using to call all of the other functions that will be required to play the game, so it currently calls drawGameElements() and drawLevelOneElements().

    When I view the page in the browser, the page loads, and the canvas is displayed. The score bar is drawn along with all of the game elements it displays, so that means that the drawGameElements() function is definately being called and performing what it's meant to. However, none of the game elements for level one are displayed, so that means that either the call to function drawLevelOneElements() isn't registering for some reason, or the function drawLevelOneElements() itself currently doesn't actually draw anything.

    My code for these functions is below, I was just wondering if someone could point out to me what I'm doing wrong?

    Many thanks.

    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);
    			}


    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";
  2. #2
  3. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Aug 2005
    Location
    Bucharest ROMANIA
    Posts
    2,557
    Rep Power
    605
    Code:
    image1.onLoad= function(){
    //...
    javascript is case sensitive. The events should be written always in lowercase:
    Code:
    image1.onload=function(){
    //...

IMN logo majestic logo threadwatch logo seochat tools logo