0

私は自分の間違いを見つけるために何時間も努力してきましたが、見つけることができません。エラーは発生しません。これは私をさらに動揺させます。

http://jsfiddle.net/qhpDb/

<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を呼び出します。InitStart

何らかの理由で、私が呼び出しthis.oMap.Create()ても何もしません。エラーは出ません。コード全体でアラートと console.log を使用しましたが、何の助けもありませんでした。

なぜthis.oMap.Create()実行しないのですか？

スクリプト全体に (プロファイラーのように) アラートを設定する代わりに、バグを検索するためのより良い方法はありますか?

4

1 に答える 1

1

2つの問題があります。

  1. 「マップ」と呼ばれる2つの関数があります。
  2. コードは、ウィンドウの「ロード」ハンドラーとしてjsfiddleで実行されています。したがって、「ロード」ハンドラーを設定して機能させると、問題が発生します。

したがって、「マップ」関数の名前の1つを変更し（現在は2番目の名前のみが重要です）、フィドルの設定を「ラップなし（ヘッド）」または「ラップなし（ボディ）」に変更します。

于 2012-12-03T15:15:49.133 に答える