Question

我一直在努力寻找我的错误，但我找不到它。没有出现错误，这让我更加不安。

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

以上是我试过的链接。该脚本开始（在底部），声明一个Game对象，然后调用它的Init和Start函数。

出于某种原因，当我致电this.oMap.Create()时，它什么也没做。没有错误出现。我在代码周围使用了alert和console.log，但没有任何帮助。

为什么this.oMap.Create()没有执行？

是否有更好的方法来搜索错误，而不是在整个脚本上植入警报（如分析器）？

Answer 1

你有两个问题：

您有两个函数，名为“Map”。
您的代码在jsfiddle中作为窗口的“加载”处理程序运行。因此，通过设置“加载”处理程序使其工作将导致问题。

因此，更改其中一个“地图”功能的名称（目前只有第二个重要）并将小提琴设置更改为“无包裹（头部）”或“无包裹（主体）”。

JS函数没有执行

1 个答案: