[英]Object comparison for Hangman game in React.js
目标:输出与单词中字母相同数量的空白div。 将两个对象数组相互比较,并在适当的位置显示常见的字母。 当另一个字母被添加到对象数组时,保持单词中所有先前的字母显示。
问题:将两个对象相互比较并仅显示常见字母。
word: [
{id: 0, val: "w"}
{id: 1, val: "o"}
{id: 2, val: "r"}
{id: 3, val: "d"}
{id: 4, val: "d"}
]
goodAttempts: [
{id: 3, val: "d"}
{id: 4, val: "d"}
]
下面是用于捕获按键并将其分配给状态的代码。 goodAttempts 和 word(在别处捕获并分配)的状态作为道具传递给组件。
handleKeyDown = (event) => {
let match = [];
let repeat = false;
let letterIndex= [];
let correct = false;
// Validate if the key pressed is recurring in allAttempts
this.state.allAttempts.map((value, index) => {
if( this.state.allAttempts[index] === event.key ) {
return repeat = true;
}
})
// Validate if key pressed matches the word
this.state.word.map((value, index) => {
if( this.state.word[index].val === event.key ) {
letterIndex.push(index);
match.push(this.state.word[index]);
correct = true;
return
}
})
// if repeat is false set allAttempts and repeat. else set repeat to true
if( !repeat ) {
this.setState({
allAttempts: this.state.allAttempts.concat(event.key),
goodAttempts: this.state.goodAttempts.concat(match),
repeat: false,
letterIndex: this.state.letterIndex.concat(letterIndex),
});
} else {
this.setState({
repeat: true,
})
}
}
下面是我想要完成的 sudo 代码
const mapAll = props.word.map((value, index) =>
<div
className="card bg-primary letter-card"
key={value.id}
>
<div className="card-body">
<h5
id={index}
className="card-title letter-card"
>
{where props.goodAttempts === props.word (
{props.goodAttempts} // (the correct letter will display in order)
) : (
BLANK // (no text will display)
)}
</h5>
</div>
</div>
);
我想将这封信从页面上移开,直到它被猜到为止,并希望避免直接从脚本中操作 HTML。
回购
希望这可以帮助。 大警告,未经测试,只是在此处输入作为示例。
constructor(props) {
super(props);
this.state = {
word: this.buildWordModel("word"),
attempts : []
}
buildWordModel(word) {
return word.map((char, idx) => {
return { idx: idx, character: char, found:false};
});
}
handleKeyDown = (event) => {
const foundLetter = this.state.word.find(letter=> letter.character == event.key);
// you can change condition and return found letter index if you want
// player to guess all occurances of each letter
// for example, you could use findIndex above where found==false
// the use the index to mod the array
this.setState({
word: this.state.word.map(letter=> (letter.character=== foundLetter.character? Object.assign({}, letter, { found:true }) : letter)),
attempts: this.state.attempts.concat( { character: event.key, successful: !!foundLetter})
});
}
// then it's easy...
renderWord() {
return this.state.word.map(letter=> <div id={letter.idx} className={letter.found?"found":""}>{letter.character}</div>);
}
感谢 sambomartin 在他的评论中为修复提供灵感以简化它!
关键是将所有内容保持在一种状态并将其全部传递给组件。 通过将found: bool
添加到对象中,组件很容易在条件语句中使用。 最终的对象看起来像:
this.state.word: [
0: {found: false, val: "w", id: 0}
1: {found: false, val: "o", id: 1}
2: {found: false, val: "r", id: 2}
3: {found: true, val: "d", id: 3}
4: {found: true, val: "d", id: 4
]
在按键时,我验证键是否与对象的val
匹配并分配found: true
。 完成后,它会推送到状态并更新所有内容。 然后将该状态推送到组件以呈现新信息。
handleKeyDown = (event) => {
let match = [...this.state.word];
let repeat = false;
let letterIndex= [];
let correct = false;
// Validate if the key pressed is recurring in allAttempts
this.state.allAttempts.map((value, index) => {
if( this.state.allAttempts[index] === event.key ) {
return repeat = true;
}
})
// Validate if key pressed matches the word
this.state.word.map((value, index) => {
console.log(value)
// console.log(this.state.word[0].val)
if( this.state.word[index].val === event.key ) {
match[index] = {...match[index], found: true}
letterIndex.push(index);
correct = true;
}
})
// if repeat is false set allAttempts and repeat. else set repeat to true
if( !repeat ) {
this.setState({
allAttempts: this.state.allAttempts.concat(event.key),
word: match,
repeat: false,
letterIndex: this.state.letterIndex.concat(letterIndex),
});
} else {
this.setState({
repeat: true,
})
}
}
const mapAll = props.word.map((value, index) =>
<div
className="card bg-primary letter-card"
key={value.id}
>
<div className="card-body">
<h5
id={index}
className="card-title letter-card"
>
{ props.word[index].found ? (
<h6>{props.word[index].val}</h6>
): (<></>)}
</h5>
</div>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.