0

In this code window.onload is used to delay the execution of the script to prevent references to the canvas occurring before the canvas is loaded. Withing start() the code map.fillStyle="CCFFEE runs as expected. I did not use var when declaring the map variable so as to make global to be referenced by other functions such as draw() and start(). However, for some reason start() accepts the variable as is, and uses it as expected, drawing the rectangle (in this case the background) to the screen while draw() throws an error when trying to use the variable. Error: Uncaught ReferenceError: map is not defined. This also occurs in the update() function as well as in the global scope outside of any functions. This has been tested with console.log("Map: " + map);. I hope that was concise enough for you to help.

window.onload=function() {
    init();
}

var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;

function Player(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

function Collider(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

function init() {
    canvas = document.getElementById('map');
    map = canvas.getContext('2d');
    start();
}

function start() {
    //Player Object
    player1 = new Player(gameMap.w / 3, (gameMap.h / 7) * 5, 30, 30);

    //Player Collider Object
    p1Collider = new Collider(player1.x - 15, player1.y - 5, player1.w + 30, player1.h + 130);

    //fillStyle and fillRect work here
    map.fillStyle="#CCFFEE";
    map.fillRect(0, 0, 1280,800);
}

function update(){
    //Error happens here too
}

function draw() {
    requestAnimationFrame(draw);
    now = Date.now();
    delta = now - then

    if (delta > interval) {
        then = now - (delta % interval);
    }

    //Character Collider
    //fillStyle and fillRect do not work here
    //Throws error:  Uncaught ReferenceError: map is not defined
    map.fillStyle="#CCFFEE";
    map.fillRect(p1Collider.x, p1Collider.y, p1Collider.w, p1Collider.h);
}

update();
draw;
NamesJ
  • 13
  • 3
  • "Global object declared in function"??? You can't _declare_ globals in a function. – Teemu Nov 26 '14 at 19:25
  • If a variable is declared within a function using `var myVar;` it is local to the function. If it is declared using `myVar;` the lack of the `var` keyword makes it's scope global instead of local to the function. http://stackoverflow.com/questions/2485423/javascript-is-using-var-to-declare-variables-optional – NamesJ Nov 26 '14 at 19:47
  • The lack of `var` makes it an assignment instead of declaration. You can declare only with `var` or `function`, anything else is assignment. It's all about terminology. – Teemu Nov 27 '14 at 10:21

1 Answers1

1

I assume the list line is draw();.

You are seeing this error because you are calling update(); and draw() before init() is called and set map.

Solution: Ensure that update and draw are called after init has been called. For example, by placing the calls inside the load event handler.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • I just smacked myself in the face. I can't believe I didn't realize this. Thank you so much. – NamesJ Nov 26 '14 at 19:39