Add to gameB.js the following general function for loading images.
function loadImage (filePath)
{ var im = new Image ();
im.loaded = false;
im.onerror = function ()
{ alert ('Failed to load ' + filePath); };
im.onload = function () { im.loaded = true; };
im.src = filePath;
return im;
}
Call that from run() but also split run() into 2 parts so we wait for the image to be loaded. The game cannot proceed unless we have the sheet of card images. Notice that I have put the image in directory im which is parallel to js. The current directory for the program is the one in which the HTML file lives. Once the big image has loaded we can slice it into individual cards but that is the subject of the next page.
function run()
{ GAME.cnv = document.getElementById ("canvas");
GAME.cnv.width = screen.availWidth;
GAME.cnv.height = screen.availHeight;
GAME.g2 = GAME.cnv.getContext ("2d");
GAME.N_COLUMNS = 0; // To be set by particular game
GAME.COLUMNS = [];
GAME.HISTORY = []; // of States
GAME.IMSHEET = loadImage ("im/cards.png")
awaitLoad ();
}
function awaitLoad ()
{ if (GAME.IMSHEET.loaded)
{ // A specific game to use this framework:
GAME.game = new Spider ();// Sets card width & height
sliceImage ();
GAME.game.deal ();
GAME.game.draw ();
}
else setTimeout (awaitLoad, 20);
}
For beginners: after calling setTimeout() the program ends. There is nothing further for it to do but it stays in memory with all of its data. It runs again 20 milliseconds later when the browser calls awaitLoad().