更改crafty.js中的文本

Question

我有兩個變量（敵人和玩家helath），當某個事件發生時會發生變化，問題是我不知道如何更改文本或刪除文本，所以我不能更改顯示屏幕上的健康狀況（目前我只是把舊的健康放在了最前面）。這是相關的組件。

//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

請務必查看the documentation for text。

要直接設置文本，您只需調用該實體的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}); 

（雖然你當然想也需要調整文本顯示上綁定的功能，因爲它會通過一個對象而不是一個數字。）