워드 휠 게임 - 자바 스크립트로 랜덤 화

Question

나와 함께 몇 가지 코드를 공유해 주셔서 감사합니다. 불행히도 나는 내 프로젝트 (초보자!)에 그것을 통합 할 수 없었지만 올바른 과정에 나를 넣었 어. 약간의 재고 후에는 편지를 뒤섞어서 좋은 효과를 얻는 기능이 포함되었습니다. 문제는 내 코드가 CodePen 영역 밖에서 작동하지 않는다는 것입니다. 필자의 Frankenstein 방식으로 코딩 할 때 약간의 오류가 발생했다고 생각합니다! 어쨌든, 나는 너무 가깝다. 누구든지 도울 수 있느냐, 아니면 너무 혼란 스럽다.

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

Answer 1

나는 자신의 시도를 보여달라고하려고하지만 나머지에 많은 진전을 만들었어요이 그냥 사소한 장애물처럼 보이는 블록. 그래서, 그것은 파괴 테스트하지,하지만 다음과 같은 기능을 사용하면 무엇을해야한다 :

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), 그 편지를 집어 들고에서 제거 원래 단어는 비어있을 때까지 반복됩니다.