2014-10-06 32 views
-1

感谢Adrian与我分享一些代码。不幸的是,我无法将其整合到我的项目中(新手!),但它确实使我走上了正确的道路。经过一番反思之后,我添加了一个函数来打乱字母,效果不错。唯一的问题是我的代码无法在CodePen之外工作。我认为从我的弗兰肯斯坦方法到编码,一些错误已经悄然而至!无论如何,我如此亲密,任何人都可以帮忙,还是它太混乱而无法打扰?Word Wheel游戏 - 用Javascript随机化字母

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

回答

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),挑选出这封信,并从删除它原始单词,然后重复,直到原始单词为空。

+0

感谢您对我的项目感兴趣。我严重超出了我的深度,但我经常发现它是学习新语言的最佳方式。我将尝试将其整合到我的脚本中。 – Matt 2014-10-06 16:27:32

+0

再次感谢Adrian的建议。不幸的是我无法将它整合到游戏中,我仍然有很多要学习!重新思考后,我设法根据需要对这些字母进行洗牌,但是我的代码如此科学怪人,它不能在CodePen之外工作。如果您对我的进步感兴趣,我已经更新了我的问题。 – Matt 2014-10-07 14:51:05

+0

您可以将'var name = wordlist [randomNumber];'改成'var name = randomise(wordlist [randomNumber]);'。 – 2014-10-07 21:51:29