I am following along in an Eloquent Javascript chapter that has me make my own browser game from scratch. All this code isn't mine, it is a compilation of the code snippets provided in the book. The code thus far should only display the background without and problems. This is not a complete game yet
Here is the snippet of code we are concerned with:
/*
Constructor
@param parent: DOM object, probably a <div> that you want the game to go in
@param level: a new Level object
*/
function DOMDisplay(parent, level) {
this.wrap = parent.appendChild(elt("div", "game")); //appendChild returns the appended element
this.level = level; //the level object created w/ constructor
this.wrap.appendChild(this.drawBackground()); //draws the background (only once)
this.actorLayer = null; // hold the actors and is used by drawFrame() so they can be replaced/removed
this.drawFrame();
}
var scale = 20; // number of pixels per unit
DOMDisplay.prototype.drawBackground = function() {
var table = elt("table", "background"); // makes table element with className "background"
table.style.width = this.level.width * scale + "px";
this.level.grid.forEach(function(row) { // remember that grid = [[gridLine],[gridLine],[gridLine]]
var rowElt = table.appendChild(elt("tr")) // appends and creates a table row for each [gridLine]
rowElt.style.height = scale + "px"; // each row is 1 unit tall (which is 20 px)
row.forEach(function(type) { // for each row.. remember a row consists of all the item types
rowElt.appendChild(elt("td", type)); //for the current rowElt, append each item type as td
});
});
return table;
};
// start it up
simplelevel =new Level(simpleLevelPlan)
DOMDisplay(document.body, simplelevel)
After running this code in the browser, I recieve the following error and don't know why:
TypeError: undefined is not a function (evaluating 'this.drawBackground()')
Here is a JS Fiddle for you to play with all the code.