等待狡猾的文本输入

时间:2014-02-10 16:12:05

标签: javascript html time craftyjs

我正在以旧的最终幻想游戏的方式制作一款带有数学测试扭曲的游戏,因此每当用户尝试在战斗中采取行动时,他都必须回答一个问题。问题是我不能让程序停止,直到他们完成输入(所以目前他们可以得到一个问题,然后继续对该答案采取行动,或者甚至在回答之前)。我尝试使用无限循环,直到使用文本输入,但这不起作用,因为它停止了文本输入,这里是控制战斗和定义文本框(这是一个html表单文本框)的组件:

//component to take text input for questions and mabye other stuff
Crafty.c('InputText', {
init:function() {
this.requires('Actor')
Crafty.e("HTML")
.attr({x:550, y:200, w:100, h:100})
.append("<form name='Textinput'><div id='Text'>Answer: </div><input type='text'   name='GuessAnswer' id='GuessAnswer'><input type='button' value='Go' onclick='SaveText()'></form>");
},
});

//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;
FightOver = false;
monsterBeat = 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);})
.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('InputText');
Crafty.e('2D, DOM, Text')
.attr({ x: 100, y: 80 })
.text('Enemy:')
.textColor('#C8C8C8');
Crafty.e('2D, DOM, Text')
.attr({ x: 100, y: 130 })
.text('Player:')
.textColor('#C8C8C8');
Crafty.audio.stop('Footstep');
Crafty.e('HealthBar').at(1,4);
Crafty.e('HealthBar').at(1,6);
this.HealthDisplay(HealthPas);

Crafty.e('AttackSel').at(3,8);
Crafty.e('HealUnsel').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('HealUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
break;

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

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

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

HealthDisplay: function(HealthPas) {
var Nums = HealthPas.split(',');
for (var i = 1; i<(Nums[1]/10)+1; i++)
{
    Crafty.e('HealthBlock').at(i,4);
}
for (var i = 1; i<(Nums[0]/10)+1; i++)
{
    Crafty.e('HealthBlock').at(i,6);
}
},

//function to pause game untill answer has been made
AnswerPause: function() {
MadeGuess = false;
while (MadeGuess == false)
{

}
},

//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) {
var Nums = HealthPas.split(',');
//this.AnswerPause();
switch (OpPos)
{
case 1:
//Attack case
//if the fight has been resolved, no further combat actions can be taken
if (FightOver == false)
{
if (AnsCorrect == true)
{
//takes away enemy health
Nums[1] = Nums[1] - 20;
Crafty.audio.play('attack');
}
this.EndCheck(Nums[0], Nums[1]);
//takes away player health
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;
if (Nums[0] > 100)
{
Nums[0] = 100;
}
this.EndCheck(Nums[0], Nums[1]);
break;

case 3:
//Run case
//switch checks what room the player is in the transport them back there
this.LocationFind();
break;

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

this.EndCheck(Nums[0], Nums[1]);
//put player and monster health values back to allow both to be passed back to componenet.
HealthPas = Nums[0] + ',' + Nums[1];
//Displays Player and Enemy Health via a 10 part health bar
if (OpPos != 3)
{   
Crafty.e('HealthBar').at(1,4);
Crafty.e('HealthBar').at(1,6);
this.HealthDisplay(HealthPas);
}
return HealthPas;
},

//
//function to check for winning conditions
EndCheck : function(PlayerHealth, EnemyHealth)
{
if (EnemyHealth < 1)
    {
    FightOver = true;
    monsterBeat = true;
    }
else if (PlayerHealth < 1)
    {
    FightOver = true;
    }

if (monsterBeat == true)
{   
this.bind('KeyDown', function () { if (this.isDown('ENTER')) this.LocationFind();})
Crafty.e('2D, DOM, Text')
.attr({ x: 500, y: 150 })
.text('Victory!');
}   
else if (FightOver == true)
{
this.bind('KeyDown', function () { if (this.isDown('ENTER')) this.LocationFind();})
Crafty.e('2D, DOM, Text')
.attr({ x: 500, y: 150 })
.text('Defeat!');
}
},

});

2 个答案:

答案 0 :(得分:1)

我不确定这是最好的方法,但你可以简单地暂停狡猾的游戏循环直到他们完成:

Crafty.pause(true)

然后在收到输入后取消暂停:

Crafty.pause(false)

但这会阻止像背景动画这样的东西。此外,我不确定它是否会禁用键盘/鼠标事件的发送,这可能很重要。

更灵活的方法可能是让您关心的组件听取暂停事件;它允许您选择组件的行为方式,但您必须自己实现。

答案 1 :(得分:-1)

每当点击“Go”按钮时,它就会调用一个名为“SaveText()”的函数。可以实现SaveText来做你需要的事情,或者它可以很容易地调用像'ContinueBattle()'这样的不同函数。

相关问题