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 回答