Изменение текста в crafty.js

Question

У меня есть две переменные (враги и хелат игроков), которые меняются, когда происходит определенное событие, проблема в том, что я не знаю, как изменить текст или удалить текст, поэтому я не могу изменить отображаемое здоровье на экране (в настоящее время я просто размещение нового здоровья поверх старого). Вот соответствующий компонент.

//player character during combat
//This also controls player input during combat and resolves most of the combat
//Will display and take inputs for quesions eventually
Crafty.c('BattlePlayer', {
init:function() {
var OpPos = 1;
var HealthPas = 100 + ',' + 100;
var FightOver = false;
//Displays options for the first time with attack selected
this.requires('Actor, spr_BattlePlayer, SpriteAnimation, Keyboard')
.bind('KeyDown', function () { if (this.isDown('SPACE')) Crafty.scene('World');})
.bind('KeyDown', function () { if (this.isDown('ENTER')) HealthPas =    this.BattleSelect(OpPos, HealthPas, FightOver);})
.bind('KeyDown', function () { if (this.isDown('S')) if (OpPos < 3){OpPos = OpPos +  1}; this.MenuMove(OpPos); })
.bind('KeyDown', function () { if (this.isDown('W')) if (OpPos > 1) {OpPos = OpPos - 1}; this.MenuMove(OpPos); });


Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 150 })
.text(100);

Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 100 })
.text(100);

Crafty.e('AttackSel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);

var MenuPos = 1;    

},
//function for displaying what option is currently selected
MenuMove: function(OpPos) {
switch (OpPos)
{
case 1:
//Attack case
Crafty.e('AttackSel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
break;

case 2:
//Defend case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendSel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
break;

case 3:
//Run case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunSel').at(3,18);
break;

default:
//Incorrect input case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
}
},

//function for carrying out battle options
//Within this function Num[0] represents players health and Nums[1] represents the Enemy Health.
BattleSelect: function(OpPos, HealthPas, FightOver) {
var Nums = HealthPas.split(',');
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 150 })
.text(Nums[0]);

switch (OpPos)
{
case 1:
//Attack case
if (FightOver == false)
{
Nums[1] = Nums[1] - 20;
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 100 })
.text(Nums[1]);
Crafty.audio.play('attack');
this.EndCheck(Nums[0], Nums[1], FightOver);
Nums[0] = Nums[0] - 10;
}
break;

case 2:
//Heal case
//as this was originaly a string, minus 1 to change it to an integer
Nums[0] = Nums[0] - 1 + 21;
this.EndCheck(Nums[0], Nums[1], FightOver);
break;

case 3:
//Run case
//switch checks what room the player is in the transport them back there
switch (Location)
{
case 1:
Crafty.scene('World');
break;

case 2:
Crafty.scene('HubWorld');
break;

case 3:
Crafty.scene('Yr10Tp1');
break;

case 3.1:
Crafty.scene('Yr10Tp1_1');
break;

case 3.11:
Crafty.scene('Yr10Tp1_1.1');
break;

case 3.12:
Crafty.scene('Yr10Tp1_1.2');
break;

case 3.2:
Crafty.scene('Yr10Tp1_2');
break;

case 3.3:
Crafty.scene('Yr10Tp1_1.3');
break;

case 4:
Crafty.scene('Yr10Tp2');
break;

case 5:
Crafty.scene('Yr10Tp3');
break;

case 6:
Crafty.scene('Yr11Tp1');
break;

case 7:
Crafty.scene('Yr11Tp2');
break;

case 8:
Crafty.scene('Yr11Tp3');
break;

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

default:
this.EndCheck(Nums[0], Nums[1]);
Nums[0] = Nums[0] - 10;
}
HealthPas = Nums[0] + ',' + Nums[1];
return HealthPas;
},

//function to check for winning conditions
EndCheck : function(PlayerHealth, EnemyHealth, FightOver)
{

if (EnemyHealth < 1)
    {
    FightOver = true;
    monsterBeat = true;
    }
else if (PlayerHealth < 1)
    {
    FightOver = true;
    }

if (FightOver == true)
{
Crafty.e('2D, DOM, Text')
.attr({ x: 500, y: 150 })
.text('Victory!');
}
return FightOver;   
},
});

Answer 1

Обязательно посмотрите документацию на текст.

Чтобы установить текст напрямую, просто позвоните text метод организации. Поэтому, когда базовое свойство изменяется, вы можете сделать это - либо напрямую вызвав метод, либо настроив событие "UpdateHealth".

Итак, текстовый компонент может выглядеть так:

Crafty.e('2D, DOM, Text')
  .attr({ x: 200, y: 150 })
  .text(Nums[0]);
  .bind("UpdatePlayerHealth", function(health){this.text(health)});

И тогда, когда игрок получил урон, он вызвал бы это событие кодом, который выглядит примерно так:

Crafty.trigger("UpdatePlayerHealth", this.health);

Преимущество использования таких событий заключается в том, что вам не нужно носить с собой ссылку на текстовый объект, и вы можете изменять другие аспекты игры, когда здоровье игрока меняется.

Если вы хотите, вы можете передать дополнительную информацию о событии, используя объект, такой как:

Crafty.trigger("UpdatePlayerHealth", {health: this.health, damage: damageValue});

(Хотя, конечно, вам также необходимо настроить привязанную функцию на текстовом дисплее, поскольку передается объект, а не просто число.)