Making functions with Crafty.js

Question

I am working on a top down video game with the crafty.js game library and I keep having to repeat a piece of code to make borders and the background sprite, So i want to put it into its own seperate function and call it, the problem is whenever I do this with traditional javascript syntax it causes an error, and i cant work out how else to do it: heres my scenes code:

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

I want to move the Draw floor and Draw boders bits into there own subroutine, and I also need to know how to pass variables to and from functions with crafty.js

Answer 1

Crafty is a framework that uses the component design pattern. (http://gameprogrammingpatterns.com/component.html)

A component is exactly what you are asking for, a reusable piece of code. So you should create a component which draws the floor and another for the border.

But first you should think again about the way you are drawing. Entities should not be used like that, except if you explicitely need that many entities. An entity is basically an ID with a list of components. The components should do the hard work, not the entities.

Take a look at the TextShadow component below, maybe it helps you to understand the idea:

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