JS function isn't executing

Question

I have been trying for hours to find what is my mistake, but I can't find it. No error comes up, which upsets me more.

<div id="Game">
    <div class="Helper">
        <div id="Stats">
            Current Position
            <div id="PlayerPosition">0</div>
            <div id="Right">
                <div id="TargetsLeft">0</div> Targets Left
                <div id="MovesCount">0</div> Moves
            </div>
        </div>
        <div id="Map"></div>
    </div>
</div>

#Game
{
    width: 882px;
    height: 509px;
    border: 2px solid black;
}

#Game div#Stats
{
    padding: 15px;
}

#Game div#Stats div
{
    font-weight: bold;
    display: inline;
}

#Game div#Stats #Right
{
    float: right;
    font-weight: normal;
}


#Game div#Stats #Right div
{
    margin-left: 10px;
}

#Game #Map
{
    width: 882px;
    height: 462px;
}

#Game #Map div
{
    width: 20px;
    height: 20px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    display: inline-block;
}

/* Constants */

// Colors
var EMPTY_COLOR = "000000";
var GROUND_COLOR = "663300";
var STONE_COLOR = "33FF33";
var PLAYER_COLOR = "66CCFF";
var TARGET_COLOR = "FFFFFF";

// Size in pixels
var BLOCK_HEIGHT = "20";
var BLOCK_WIDTH = "20";

// Map's grid size in Blocks
var MAP_WIDTH = 42;
var MAP_HEIGHT = 22;

// Element the map will be drawed on
var MAP_ID = "Map";

/* END Contants */

/* Helpers */

String.prototype.repeat = function (times) {
    return (new Array(times + 1)).join(this);
}

function Point2D(r, c) {
    this.Row = r;
    this.Col = c;
}

function Color(hex) {
    this.Color = '#' + hex;
}

var CreateType = {
    Ground: function () { return new Ground(); },
    Target: function () { return new Target(); },
    Stone: function () { return new Stone(); },
    Player: function () { return new Player(); }
};

// [0] = GROUND, [1] = TARGET, [2] = STONE, [3] = PLAYER
var CreateTypeByDigit = [
    CreateType.Ground,
    CreateType.Target,
    CreateType.Stone,
    CreateType.Player,
];

var Direction = {
    Left: new Point2D(-1, 0),
    Right: new Point2D(1, 0),
    Up: new Point2D(0, 1),
    Down: new Point2D(0, -1)
};

/* END Helpers */

/* Main Objects */

function Map() {
    this.Blocks = null;
    this.HTML_Element = null;

    this.map_string = "0".repeat(MAP_HEIGHT * MAP_WIDTH);

    this.createAt = function (r, c, elem) {
        var cell = document.createElement('div');

        this.Blocks[r][c] = CreateTypeByDigit[parseInt(this.map_string[r * MAP_HEIGHT + c])];
        this.Blocks[r][c].HTML_Element = b;
        this.Blocks[r][c].Position = new Point2D(r, c);

        elem.appendChild(cell);
    };

    this.Create = function () {
        alert('WE DID IT');

        this.Blocks = new Array(MAP_HEIGHT);
        for (var r = 0; r < MAP_HEIGHT; r++) {
            this.Blocks[r] = new Array(MAP_WIDTH);
        }

        alert('WE DID IT');

        this.HTML_Element = document.getElementById(MAP_ID);
        if (this.HTML_Element == null)
            alert('Was unable to find the map element');

        for (var r = 0; r < MAP_HEIGHT; r++) {
            for (var c = 0; c < MAP_WIDTH; c++) {
                this.createAt(r, c, this.HTML_Element);
            }
        }
    };
}

function AbstractBlock() {
    // Instance variables
    var Position;
    var Color;
    var HTML_Element;

    // Static variables
    AbstractBlock.Width = BLOCK_WIDTH;
    AbstractBlock.Height = BLOCK_HEIGHT;
}

function Ground() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(GROUND_COLOR);
}

function Target() {
    // Inherit Ground
    Ground.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(TARGET_COLOR);
}

function Stone() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(STONE_COLOR);
}

function Player() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(PLAYER_COLOR);

    // Move player, while switching it's last position
    this.MovePlayer = function (x2, y2) {
        var r = this.Position.Row;
        var c = this.Position.Col;

        Blocks[r, c] = Blocks[r + y2, c + x2];
        Blocks[r, c].ApplyStyle();

        r += x2;
        c += y2;

        Blocks[r, c] = this;
        Blocks[r, c].ApplyStyle();
    };

    // Check if a move is valid. If so, execute it.
    this.Move = function (dir) {
        var r = this.Position.Row;
        var c = this.Position.Col;

        if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Ground)
        {
            this.Move(dir.Col, 0);
        }
        else if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Stone && Map.Blocks[r + dir.Row * 2][c + dir.Col * 2] instanceof Ground)
        {
            this.MovePlayer(dir.Row, dir.Col);
            Blocks[r + dir.Row][c + dir.Col].Move(dir.Row, dir.Col);
        }
    };

    this.MoveLeft = function () { Move(Direction.Left); };
    this.MoveRight = function () { Move(Direction.Right); };
    this.MoveUp = function () { Move(Direction.Up); };
    this.MoveDown = function () { Move(Direction.MoveDown); };

    function ApplyStyle(mapInstance) {
        mapInstance.ApplyStyle(this.Position.X, this.Position.Y, PLAYER_COLOR);
    }
}

function Map() {
    this.Blocks = null;
    this.HTML_Element = null;

    this.map_string = "0".repeat(MAP_HEIGHT * MAP_WIDTH);

    this.createAt = function (r, c, elem) {
        var cell = document.createElement('div');

        this.Blocks[r][c] = CreateTypeByDigit[parseInt(this.map_string[r * MAP_HEIGHT + c])];
        this.Blocks[r][c].HTML_Element = b;
        this.Blocks[r][c].Position = new Point2D(r, c);

        elem.appendChild(cell);
    };

    this.Create = function () {
        this.Blocks = new Array(MAP_HEIGHT);
        for (var i = 0; i < MAP_HEIGHT; i++) {
            this.Blocks[i] = new Array(MAP_WIDTH);
        }

        this.HTML_Element = document.getElementById(MAP_ID);
        if (this.HTML_Element == null)
            alert('Was unable to find the map element');

        for (var r = 0; i < MAP_HEIGHT; i++) {
            for (var c = 0; j < MAP_WIDTH; j++) {
                this.createAt(r, c, this.HTML_Element);
            }
        }
    };
}

function AbstractBlock() {
    // Instance variables
    var Position;
    var Color;
    var HTML_Element;

    // Static variables
    AbstractBlock.Width = BLOCK_WIDTH;
    AbstractBlock.Height = BLOCK_HEIGHT;
}

function Ground() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(GROUND_COLOR);
}

function Target() {
    // Inherit Ground
    Ground.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(TARGET_COLOR);
}

function Stone() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(STONE_COLOR);
}

function Player() {
    // Inherit AbstractBlock
    AbstractBlock.apply(this, arguments);

    // Define the color of this block
    this.Color = new Color(PLAYER_COLOR);

    // Move player, while switching it's last position
    this.MovePlayer = function (x2, y2) {
        var r = this.Position.Row;
        var c = this.Position.Col;

        Blocks[r, c] = Blocks[r + y2, c + x2];
        Blocks[r, c].ApplyStyle();

        r += x2;
        c += y2;

        Blocks[r, c] = this;
        Blocks[r, c].ApplyStyle();
    };

    // Check if a move is valid. If so, execute it.
    this.Move = function (dir) {
        var r = this.Position.Row;
        var c = this.Position.Col;

        if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Ground) {
            this.Move(dir.Col, 0);
        }
        else if (Map.Blocks[r + dir.Row][c + dir.Col] instanceof Stone && Map.Blocks[r + dir.Row * 2][c + dir.Col * 2] instanceof Ground) {
            this.MovePlayer(dir.Row, dir.Col);
            Blocks[r + dir.Row][c + dir.Col].Move(dir.Row, dir.Col);
        }
    };

    this.MoveLeft = function () { Move(Direction.Left); };
    this.MoveRight = function () { Move(Direction.Right); };
    this.MoveUp = function () { Move(Direction.Up); };
    this.MoveDown = function () { Move(Direction.MoveDown); };

    function ApplyStyle(mapInstance) {
        mapInstance.ApplyStyle(this.Position.X, this.Position.Y, PLAYER_COLOR);
    }
}

/* Main Script */


function Game() {
    this.oMap = null;
    this.oSettings = null;
    this.oPlayer = null;

    this.ToString = "Game";

    this.Init = function () {
        this.oMap = new Map();
        this.oMap.Create();
        this.Log('Map Initialized');

        this.oSettings = new Settings();
        this.oPlayer = new Player();
    };

    this.Start = function () {
        this.SetSettings();
        this.Log('Controls are binded');       
    };

    this.SetSettings = function () {
        this.oSettings.Add(37, this.oPlayer.MoveLeft);
        this.oSettings.Add(39, this.oPlayer.MoveRight);
        this.oSettings.Add(38, this.oPlayer.MoveUp);
        this.oSettings.Add(40, this.oPlayer.MoveDown);

        document.onkeypress = function (e) {
            this.oSettings.Binds[e.keyCode] && this.oSettings.Binds[e.keyCode]();
        }
    };

    this.UpdateStats = function () {

    };

    this.Log = function (msg) {
        console.log(this.ToString + ': ' + msg);
    };
}

function Settings() {
    this.Binds = {};

    this.Add = function (keycode, callback) {
        this.Binds[keycode] = callback;
    };
}

window.log = console.log.bind(console);

window.onload = function () {
    var g = new Game();
    g.Init();
    g.Start();
};

The above is a link to what I have tried. The script starts (At the bottom) with declaring a Game object, followed by calling it's Init and Start functions.

For some reason, when I call this.oMap.Create() it does nothing. No error comes up. I used alerts and console.log all around the code, but with no help.

Why doesn't this.oMap.Create() executes?

Is there a better method for searching for bugs, instead of planting alerts on the whole script (like a profiler)?

Change your jsfiddle to run onDomReady instead of onLoad and it will run! jsfiddle.net/hNd6X/2 — Michael Berkowski
– Michael Berkowski, Commented Dec 3, 2012 at 15:12
@MichaelBerkowski: or to noWrap (head) or noWrap (body) or pretty much anything else. — Andrew Whitaker
– Andrew Whitaker, Commented Dec 3, 2012 at 15:13
I just tried to do so, still doesn't work. If it works, it should create a grid of cells. — Novak
– Novak, Commented Dec 3, 2012 at 15:14
BTW, you have two different function Map() { ... } declarations in there. — Chris Nielsen
– Chris Nielsen, Commented Dec 3, 2012 at 15:14
Yes I see, the Init() function does run, but Create() does not do anythign — Michael Berkowski
– Michael Berkowski, Commented Dec 3, 2012 at 15:15

Pointy · Accepted Answer · 2012-12-03 15:15:49Z

1

You've got two problems:

You have two functions called "Map".
Your code is running in jsfiddle as a "load" handler for the window. Thus, making it work by setting up a "load" handler will cause a problem.

So change one of the "Map" function's names (currently only the second one will matter) and change the fiddle settings to be "no wrap (head)" or "no wrap (body)".

answered Dec 3, 2012 at 15:15

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Novak Over a year ago

Fixing the two declarations work (I haven't noticed that). Shouldn't it throw an error?

Pointy Over a year ago

@GuyDavid no, JavaScript doesn't consider that to be erroneous. It's something that jsLint should find, but it apparently doesn't.

Collectives™ on Stack Overflow

JS function isn't executing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related