2

私はcrafty.jsゲームライブラリを使用してトップダウンビデオゲームに取り組んでおり、境界線と背景スプライトを作成するためにコードを繰り返し実行する必要があるため、それを独自の別の関数に入れて呼び出したいと思います.問題は、従来の JavaScript 構文でこれを行うたびにエラーが発生することです。他の方法でそれを行う方法がわかりません。私のシーン コードは次のとおりです。

Crafty.scene('World', function() {
//Draw Floor
for (var i = 0; i < 32; i++)
{
for (var y = 0; y < 24; y++)
{
Crafty.e('GrateFloor').at(i, y);
}
}
//Draw borders, gotta find a more code efficient way
for (var i = 0; i < 32; i++)
{
Crafty.e('Border').at(i, 0);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(0, y);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(31, y);
}

for (var y = 0; y < 32; y++)
{
Crafty.e('Border').at(y, 23);
}
//draw in game entities such as the player and obstacles
//drawing walls here
//horizontal walls


    for (var y = 10; y <29; y++)
    {
        Crafty.e('WallHor').at(y, 20);
    }



    for (var y = 10; y <29; y++)
    {
        Crafty.e('WallHor').at(y, 5);
    }

//vertical walls
for (var i = 6; i <20; i++)
{

        Crafty.e('WallVert').at(29, i);

}

for (var i = 6; i <12; i++)
{
    Crafty.e('WallVert').at(9, i);
}

for (var i = 14; i <20; i++)
{
    Crafty.e('WallVert').at(9, i);
}
//single wall points
Crafty.e('WallTpRht').at(29,5);
Crafty.e('WallBtmRht').at(29,20);
Crafty.e('WallTpLft').at(9,5);
Crafty.e('WallBtmLft').at(9,20);
//everything else
Crafty.e('Enemy').at(20, 10);
Crafty.e('Teleporter1').at(1, 11);
Crafty.e('Player').at(15,15);
});

Crafty.scene('Loading', function() {
//Load in Visual Assets
Crafty.e('2D, DOM, Text')
.attr({ x: 15, y: 15 })
.text('Loading...');
Crafty.load(['assets/White_Male_Student_Animation_Bitmap.gif',      'assets/Walls_Bitmap.gif'], function(){
//Define terrain
Crafty.sprite(24, 24, 'assets/Walls_Bitmap.gif' , {
spr_WallWireHor: [0,0],
spr_Border: [0,1],
spr_WallWireVert: [1,1],
spr_WallWireTopRight: [1,0],
spr_WallWireBottomRight: [1,2],
spr_RobotSkull: [0,2],
spr_WallWireTopLeft: [2,0],
spr_WallWireBottomLeft: [2,1],
spr_Teleporter: [3,0],
spr_GrateFloor: [3,1],
})
//Define player
Crafty.sprite(25, 36.75, 'assets/White_Male_Student_Animation_Bitmap.gif' , {
spr_player: [0,0],
spr_BattlePlayer: [0,1],
},0, 0)

Crafty.scene('World')
})
});

//Screen for all combat to happen upon
Crafty.scene('BattleScreen', function() {

Crafty.e('2D, DOM, Text')
.attr({ x: 24, y: 22 })
.text('Monster destroyed!');

//Draw borders, gotta find a more code efficient way
for (var i = 0; i < 32; i++)
{
Crafty.e('Border').at(i, 0);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(0, y);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(31, y);
}

for (var y = 0; y < 32; y++)
{
Crafty.e('Border').at(y, 23);
}

//draws Player sprite for the combat screen
Crafty.e('BattlePlayer').at(16,20);
});

Crafty.scene('HubWorld', function() {
//Draw Floor
for (var i = 0; i < 32; i++)
{
for (var y = 0; y < 24; y++)
{
Crafty.e('GrateFloor').at(i, y);
}
}
//Draw borders, gotta find a more code efficient way
for (var i = 0; i < 32; i++)
{
Crafty.e('Border').at(i, 0);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(0, y);
}

for (var y = 0; y < 24; y++)
{
Crafty.e('Border').at(31, y);
}

for (var y = 0; y < 32; y++)
{
Crafty.e('Border').at(y, 23);
}
//draw other stuff
Crafty.e('Player').at(28,11);
Crafty.e('Teleporter2').at(30,11);
});

Draw floor と Draw boders ビットを独自のサブルーチンに移動したいと考えています。また、crafty.js を使用して関数との間で変数を渡す方法を知る必要もあります

4

1 に答える 1

2

Crafty は、コンポーネント デザイン パターンを使用するフレームワークです。( http://gameprogrammingpatterns.com/component.html )

コンポーネントはまさにあなたが求めているものであり、再利用可能なコードです。したがって、床を描画するコンポーネントと境界線用の別のコンポーネントを作成する必要があります。

しかし、最初に、自分の描き方についてもう一度考えるべきです。多くのエンティティが明示的に必要な場合を除き、エンティティをそのように使用しないでください。エンティティは基本的に、コンポーネントのリストを持つ ID です。エンティティではなく、コンポーネントが難しい作業を行う必要があります。

以下の TextShadow コンポーネントを見てください。アイデアを理解するのに役立つかもしれません:

var TextShadow = {
    init: function init () {
        this.requires('DOM');
        this._textShadowColor = '#FFFFFF';
        this._apply();
    },
    _apply: function _apply () {
        this.css('text-shadow', '1px 1px 2px ' + this._textShadowColor);
    },
    textShadowColor: function textShadowColor (color) {
        this._textShadowColor = color;
        this._apply();
        return this;
    }
};

Crafty.c('TextShadow', TextShadow);
于 2013-12-30T18:03:29.103 に答える