Question

我正在使用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将函数传递给函数和从函数传递变量

Answer 1

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

使用Crafty.js创建函数

1 个答案: