【问题标题】:How to 'mask' a string or array?如何“屏蔽”字符串或数组?
【发布时间】:2014-12-11 04:11:50
【问题描述】:

有人要求我为 Tafe 作业创建一个简单的“刽子手”,但我遇到了两个问题。

其中一个是指令要求我“屏蔽”数组中的单词,以便在玩家猜测字母时更容易更新,但我不确定如何执行此操作。 我目前拥有它,以便将单词拆分并将其每个字母保存到一个名为 letterArray 的数组中,并将完整的单词保存到 toBeGuessed 中。我已经到了每次猜到一个字母时都必须更新 ****** 以使其看起来更像单词的地步。

我在查看类似问题时发现了以下建议:

保留字符串、单词和混淆后的 2 个副本(那个 包含'-')(最好作为字符数组或字符串生成器)。当一个 用户猜测一个字母,搜索所有的非混淆版本 那封信的实例。每次找到匹配项时,更改“-” 在混淆字符串中的那个索引处到正确的字母。

但我不确定如何执行此操作。有人能指出我正确的方向吗?

我遇到的另一个问题是每次按“播放”时,所有“字母”都无法点击,但我可以在点击“播放”之前点击它们? 我尝试将“播放”按钮全部移除,但字母完全没有反应。

My current code(由于某种原因它不能在 JSFiddle 上工作)

JS

var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';

$(document).ready(function() {
    $('#input').hide();
    $('#guessIt').hide();
    $('#play').click(function() {
        $('#theWord').html(toBeGuessed);
        for (var i = 1; i < toBeGuessed.length + 1; i++) {
            $('#masked').append('* ');
        }
        $('#play').hide();
    });
    $('.letter').click(function() {
        value = this.value;
        guesses += 1;
        found = $.inArray(value, lettersArray) > -1;
        if (found === true) {
            this.style.color = 'green';
        } else {
            this.style.color = 'red';
        }
        if (guesses === 5) {
            alert('Your five guesses are up! What do you think the word is?');
            $('#input').show();
            $('#guessIt').show();
        }
    });
    $('#guessIt').click(function() {        
            playerguess = document.getElementById("input").value.toLowerCase();
            if (playerguess === toBeGuessed) {
                alert('Congrats! You win!');
            } else {
                alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
                $('#hangman').html('<p>___________<br>&nbsp;&nbsp;&nbsp;&nbsp;|/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(_)<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /|\\ <br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ \\<br>&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;_|___</p>');
            }
    });
});

任何帮助将不胜感激!

【问题讨论】:

  • 字符串掩码是覆盖字符串以指示是否在某些位置显示字符的值序列。对于字符串“BAD”,要显示“-A-”,掩码是“010”。如果将其视为二进制数,则可以在其他基数中有效地表示,例如基数为 10 的“2”。因此步骤 1 是生成掩码,步骤 2 是将其应用于保存的字符串。顺便说一句,您不必将“原始”字符串转换为数组,您可以使用charAt 来获取特定索引处的字符。
  • 所以在您的“坏”示例中,0 表示隐藏它,1 表示显示字符?
  • @RobG:我建议使用与字符串长度相同的布尔数组代替(为了简单起见,对于超过 31 个字符的单词)
  • 当然,我应该说“……掩码可能是……”,掩码值可以是任何合理的类型。在古代,位掩码很流行,例如在 UNIX 权限 7 -> 111 -> rwx 或读、写、执行权限和 0 -> 000 -> --- 或无权限。 :-)
  • @Asteria 见帖子。谢谢

标签: javascript arrays


【解决方案1】:

试试

$(document).ready(function() {
    var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';

    $('#input').hide();
    $('#guessIt').hide();
    $('#play').click(function() {
        // "mask" `toBeGuessed`
        var val = toBeGuessed.replace(/[a-z]/gi, "*")
        $('#theWord').html(val);        
        //for (var i = 1; i < toBeGuessed.length + 1; i++) {
        //    $('#masked').append('* ');
        // }
        $('#play').hide();
    });
    $('.letter').click(function() {
        value = this.value;
        guesses += 1;
        found = $.inArray(value, lettersArray) > -1;
        if (found === true) {
            this.style.color = 'green';
            // if `value` in `toBeGuessed` , 
            // "unmask" single `value` (letter) in "masked" `toBeGuessed`
            if (toBeGuessed.indexOf(value) != -1) {
                $('#theWord').text(function(i, letter) {                    
                    var _letter = letter.split("")
                    // if selected letter previously selected , 
                    // apply `firstLetter`
                    , test = new RegExp(value, "i").test(letter)
                    // "unmask" first letter in `toBeGuessed` ,
                    // when letter selected 
                    , firstLetter = toBeGuessed.indexOf(value)
                    // "unmask" 1n+2 letters ,
                    // in `toBeGuessed` 
                    // when _same_ letter selected more than once
                    , nextLetters = $.inArray(value,toBeGuessed,letter.lastIndexOf(value) +1);
                    _letter.splice(test ? nextLetters : firstLetter, 1, toBeGuessed.charAt(test ? nextLetters : firstLetter));
                    // return "mask" , with selected letters "unmasked"
                    return _letter.join("")
                });   
            }
        } else {
            this.style.color = 'red';
        }
        if (guesses === 5) {
            alert('Your five guesses are up! What do you think the word is?');
            $('#input').show();
            $('#guessIt').show();
        }
    });
    $('#guessIt').click(function() {        
            playerguess = document.getElementById("input").value.toLowerCase();
            if (playerguess === toBeGuessed) {
                alert('Congrats! You win!');
            } else {
                alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
                $('#hangman').html('<p>___________<br>&nbsp;&nbsp;&nbsp;&nbsp;|/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(_)<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /|\\ <br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ \\<br>&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;_|___</p>');
            }
    });
});

jsfiddle http://jsfiddle.net/guest271314/g5z5b4qy/

$(document).ready(function() {
    var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';
    
    $('#input').hide();
    $('#guessIt').hide();
    $('#play').click(function() {
        // "mask" `toBeGuessed`
        var val = toBeGuessed.replace(/[a-z]/gi, "*")
        $('#theWord').html(val);        
        //for (var i = 1; i < toBeGuessed.length + 1; i++) {
        //    $('#masked').append('* ');
        // }
        $('#play').hide();
    });
    $('.letter').click(function() {
        value = this.value;
        guesses += 1;
        found = $.inArray(value, lettersArray) > -1;
        if (found === true) {
            this.style.color = 'green';
            if (toBeGuessed.indexOf(value) != -1) {
                $('#theWord').text(function(i, letter) {                    
                    var _letter = letter.split("")
                    // if selected letter previously selected , 
                    // apply `first`
                    , test = new RegExp(value, "i").test(letter)
                    // "unmask" first letter in `toBeGuessed` ,
                    // when letter selected 
                    , firstLetter = toBeGuessed.indexOf(value)
                    // "unmask" 1n+2 letters ,
                    // in `toBeGuessed` 
                    // when _same_ letter selected more than once
                    , nextLetters = $.inArray(value,toBeGuessed,letter.lastIndexOf(value) +1);
                    _letter.splice(test ? nextLetters : firstLetter, 1,  toBeGuessed.charAt(test ? nextLetters : firstLetter));
                    // return "mask" , with selected letters "unmasked"
                    return _letter.join("")
                });   
            }
        } else {
            this.style.color = 'red';
        }
        if (guesses === 5) {
            alert('Your five guesses are up! What do you think the word is?');
            $('#input').show();
            $('#guessIt').show();
        }
    });
    $('#guessIt').click(function() {        
            playerguess = document.getElementById("input").value.toLowerCase();
            if (playerguess === toBeGuessed) {
                alert('Congrats! You win!');
            } else {
                alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
                $('#hangman').html('<p>___________<br>&nbsp;&nbsp;&nbsp;&nbsp;|/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(_)<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /|\\ <br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |<br>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ \\<br>&nbsp;&nbsp;&nbsp;&nbsp;|<br>&nbsp;&nbsp;_|___</p>');
            }
    });
});
body {
    background-color: #081208;
    color: white;
}

#hangman {
    background: url('#');
    width: 29%;
    height: 80%;
    font-size: 40px;
    float: left;
}
#masked { 
    position: relative;
    color: white;
    font-family: Walter Turncoat;
    font-size: 64px;
}
#play {
    border: none;
    background: none;
    color: white;
    font-family: Walter Turncoat;
    font-size: 50px;
}

#play:hover {
    color: gray;
}
#guessIt {
    border: none;
    background: none;
    color: white;
    font-family: Walter Turncoat;
    font-size: 20px;
}

#guessIt:hover {
    color: gray;
}
#letters {
    float: right;  
    width: 70%;
    height: 80%;
    font-size: 60px;
}
.letter {
    border: none;
    background: none;
    text-decoration: none;
    font-family: Walter Turncoat;
    color: white;
    font-size: 60px;
    outline:none
}
.letter:hover {
    color: gray;
}
input {
width:230px;
font-family:Walter Turncoat;
background: none;
border: none;
color: white;
height: 35px;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hangman"><p>___________
<br>&nbsp;&nbsp;&nbsp;&nbsp;|/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
<br>&nbsp;&nbsp;&nbsp;&nbsp;| <!-- head -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;| <!-- arms -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;| <!-- body -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;| <!-- feet -->
<br>&nbsp;&nbsp;&nbsp;&nbsp;|
<br>&nbsp;&nbsp;_|___</p></div>
<div id="letters">
<button class="letter" id="a" value="a">A</button> 
<button class="letter" id="b" value="b">B</button>
<button class="letter" id="c" value="c">C</button> 
<button class="letter" id="d" value="d">D</button>
<button class="letter" id="e" value="e">E</button> 
<button class="letter" id="f" value="f">F</button>
<button class="letter" id="g" value="g">G</button> 
<button class="letter" id="h" value="h">H</button>
<br>
<button class="letter" id="i" value="i">I</button> 
<button class="letter" id="j" value="j">J</button>
<button class="letter" id="k" value="k">K</button> 
<button class="letter" id="l" value="l">L</button>
<button class="letter" id="m" value="m">M</button> 
<button class="letter" id="n" value="n">N</button>
<button class="letter" id="o" value="o">O</button> 
<button class="letter" id="p" value="p">P</button>
<br>
<button class="letter" id="q" value="q">Q</button> 
<button class="letter" id="r" value="r">R</button>
<button class="letter" id="s" value="s">S</button> 
<button class="letter" id="t" value="t">T</button>
<button class="letter" id="u" value="u">U</button> 
<button class="letter" id="v" value="v">V</button>
<button class="letter" id="w" value="w">W</button> 
<button class="letter" id="x" value="x">X</button>
<br>
<button class="letter" id="y" value="y">Y</button> 
<button class="letter" id="z" value="z">Z</button>
</div>
<center>
<div id="masked"></div>
<button id="play">Play!</button>
<div id="theWord"></div>
    <input type="text" name="input" id="input" placeholder="What's the word?" />

<button id="guessIt">Guess the Word!</button>
</center>

【讨论】:

  • 谢谢,效果很好!谢谢你的评论,所以我能够理解这个过程:)
猜你喜欢
  • 1970-01-01
  • 2017-12-15
  • 1970-01-01
  • 1970-01-01
  • 2013-06-27
  • 1970-01-01
  • 2017-10-27
  • 1970-01-01
  • 2019-11-20
相关资源
最近更新 更多