单词轮游戏 - 随机字母与Javascript

时间:2014-10-06 14:34:26

标签: javascript random split words letters

感谢Adrian与我分享一些代码。不幸的是我无法将它集成到我的项目中(新手!)但它确实让我走上了正确的道路。经过一些重新思考后,我添加了一个函数来将字母改组为一个很好的效果。唯一的问题是我的代码在CodePen的范围之外不起作用。我认为从我的弗兰肯斯坦编码方法中出现了一些错误!无论如何,我是如此接近,任何人都可以提供帮助,还是因为太麻烦而无法打扰?

//GET RANDOM 9 LETTER WORD

var wordlist = ["aardvarks", "aasvogels", "abamperes", "abandoned"
];

var randomNumber = parseInt(Math.random() * wordlist.length);
var name = wordlist[randomNumber];          

if(document.getElementById("resultRandomWord")){
document.getElementById("placeholderRandomWord").removeChild(document.getElementById("resultRandomWord"));
}
var element = document.createElement("div");
element.setAttribute("id", "resultRandomWord");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholderRandomWord").appendChild(element);

//START This function shuffles list items
(function($){
$.fn.shuffle = function() {
    return this.each(function(){
        var items = $(this).children().clone(true);
        return (items.length) ? $(this).html($.shuffle(items)) : this;
    });
}

$.shuffle = function(arr) {
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
}
})(jQuery);
//END This function shuffles list items

//SPLIT 9 LETTER WORD 
var str = $('#resultRandomWord').html();
var spl = str.split('');
var len = spl.length;
var i = 0;
setInterval(function(){

if(i < len)
{
    if(spl[i] != " "){
    $('.letters').append('<li>'+spl[i]+'</li>')//DISPLAY WORD AS SEPARATE LETTER AND AS LIST ITEMS
    $('.letters').shuffle();//Call shuffle function
    }
}
i++;
},200)


//REVEAL ANSWER (JQUERY)
$(document).ready(function(){
$(".reveal").click(function(){
$("#placeholderRandomWord").slideToggle();
   });
});

和HTML:

<div id="outer_circle">
<ul class="lines">
<li></li><!--nth(1)-->
<li></li><!--nth(2)-->
<li></li><!--nth(3)-->
<li></li><!--nth(4)-->
</ul>
<ul class="letters">
<!--This is where the letters go, they are wrapped in <li> tags-->
</ul>
<div id="inner_circle">
</div><!--letters-->
</div><!--outer_circle-->


<div id="answer-wrapper">
<button type="button" class="reveal" onclick>Reveal/Hide Answer</button>
<div id="placeholderRandomWord">

</div><!--answer-->
</div><!--answer-wrapper-->

1 个答案:

答案 0 :(得分:0)

通常我会要求你看看自己的尝试,但是你在其他方面取得了很大的进步,看起来这只是一个小小的绊脚石。因此,它没有经过破坏测试,但以下功能应该满足您的需求:

function randomise(word) {
    var result = "";
    while (word != "") {
        var pos =  Math.floor(Math.random () * word.length);
        result += word[pos];
        word = word.substring(0, pos) + word.substring(pos+1);
    }
    return result;
}

它只是选择一个介于0和(字长-1之间)的随机数,挑出该字母并将其从原始单词中删除,然后重复直到原始单词为空。