2016-11-07 4 views
0

Я начал свой собственный собственный проект JS. В конце концов, я хотел бы иметь свою собственную slotmachine. К настоящему моменту у меня проблема: я не знаю, как перезапустить мою программу или просто функцию для генерации снова и снова новых случайных значений. Это мой код до сих пор:Как сбросить генератор случайных чисел JavaScript

var randomX1 = Math.ceil(Math.random() * 10); 
 
var randomX2 = Math.ceil(Math.random() * 10); 
 
var randomX3 = Math.ceil(Math.random() * 10); 
 

 
function randomClickX() { 
 
    document.getElementById("randomX1").innerHTML = randomX1; 
 
    document.getElementById("randomX2").innerHTML = randomX2; 
 
    document.getElementById("randomX3").innerHTML = randomX3; 
 

 
    var ausgabe = "Play again"; 
 
    if (randomX1 === randomX2) { 
 
    if(randomX2 === randomX3) { 
 
     var ausgabe = "Jackpot"; 
 
     } 
 
    } 
 

 

 
    var chance = ausgabe; 
 
    function clickChance() { 
 
     document.getElementById("chance").innerHTML = chance; 
 
    } 
 
    document.getElementById('spanId').innerHTML = chance; 
 
};
.slot-container { 
 
    border: 5px solid red; 
 
    vertical-align: middle; 
 
    font-size: 50px; 
 
    font-family: Leelawadee UI Semilight, Calibri, Arial; 
 
    width: 90%; 
 
    margin: auto; 
 
    height: 0;    
 
    padding-bottom: 30%; 
 
} 
 

 

 
.slot { 
 
    border: 3px solid green; 
 
    height: 0; 
 
    padding-bottom: 30%; 
 
    width: 32%; 
 
    margin-right: 1%; 
 
    margin-top: 1%; 
 
    margin-bottom: 1%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#slot1 { 
 
    margin-left: 1%; 
 
} 
 

 

 
h1 { 
 
    color: #FC3FD3; 
 
    text-align: center; 
 
    font-family: Century Gothic; 
 
    font-size: 5em; 
 
    height: 50px; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    justify-content: center; 
 
} 
 

 

 
button { 
 
    position: relative; 
 
    font-size:20px; 
 
    display: block; 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid green; 
 
    width: 90%; 
 
    position: middle; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 

 

 
} 
 

 
button:hover { 
 
    background-color: green; 
 
} 
 

 
button.spin-button { 
 
    color: blue; 
 
    position: absolute; 
 
    height: 20%; 
 
} 
 

 

 

 
.answer { 
 
    font-family: Century Gothic; 
 
    font-size: 20px; 
 
    color: red; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 

 
ul.menubar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #008000; 
 
} 
 

 
ul.menubar li { 
 
    float: left; 
 
} 
 

 
ul.menubar li a { 
 
    color: black; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding:15px 20px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-family: Century Gothic; 
 
} 
 

 
ul.menubar li a:hover { 
 
    background-color: #00A300; 
 
}
<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Slotmachine</title> 
 
    <script type="text/javascript" src="#.js"></script> 
 
    <link type="text/css" rel="stylesheet" href="#.css" /> 
 
</head> 
 

 
<body> 
 
    <ul class="menubar" id=topmenubar> 
 
     <li><a href="#linkHome">Home</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?--> 
 
     <li><a href="#linkContact">Contact</a></a></li> 
 
     <li><a href="#linkAbout">About</a></li> 
 
    </ul> 
 

 

 
    <h1>1-10</h1> 
 

 

 
    <button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button> 
 
    <div class="slot-container"> 
 
     <div id="slot1" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX1">0</a></p> 
 
     </div> 
 
     <div id="slot2" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX2">0</a></p> 
 
     </div> 
 
     <div id="slot3" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX3">0</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="answer" id="spanId">Test #1<a id="spanId"> </div> 
 

 

 
</body> 
 

 
</html>

Как вы видите, я перезагрузить файл HTML нажать кнопку SPIN еще раз, чтобы новые Randoms. Я думаю, что дело в том, чтобы создать большую комплексную функцию и вызвать ее, когда заканчивается функция SPIN. Но я не знаю, как это сделать ... Что такое недостающий шаг, чтобы иметь столько же значений, сколько пожелает пользователь?

Спасибо, Jonas

+1

Просто включите переменные внутри вашего 'функции randomClickX' (вырезать и вставить) – Hackerman

+0

Это не совсем ясно для меня, что вы имеете в виду под«перезагрузки»в данном случае. Как правило, если вы хотите выполнить операцию несколько раз, вы должны поместить эту операцию внутри цикла. Это то, что вы хотите здесь? – David

+0

Вы можете использовать 'location.reload();' – Tinsten

ответ

0

Просто вызвать функцию снова, а затем вернуться, как это:

function myFunction() { 
    //stuff... 
    if(condition) { 
    myFunction(); 
    return; 
    } 
} 

КРП часть является необязательной, конечно, я не уверен в вашем точном применении здесь , Если вам нужно возвращаемое значение, это одна строка, например: return myFunction();

+1

, и если вы выиграете джек-пот, ваш приз будет броузером, который не рушится из бесконечной рекурсии! –

1

Просто переместите случайные числа, сгенерированные в метод щелчка.

function randomClickX() { 
 
    var randomX1 = Math.ceil(Math.random() * 10); 
 
    var randomX2 = Math.ceil(Math.random() * 10); 
 
    var randomX3 = Math.ceil(Math.random() * 10); 
 

 
    document.getElementById("randomX1").innerHTML = randomX1; 
 
    document.getElementById("randomX2").innerHTML = randomX2; 
 
    document.getElementById("randomX3").innerHTML = randomX3; 
 

 
    var ausgabe = "Play again"; 
 
    if (randomX1 === randomX2) { 
 
    if(randomX2 === randomX3) { 
 
     var ausgabe = "Jackpot"; 
 
     } 
 
    } 
 

 

 
    var chance = ausgabe; 
 
    function clickChance() { 
 
     document.getElementById("chance").innerHTML = chance; 
 
    } 
 
    document.getElementById('spanId').innerHTML = chance; 
 
};
.slot-container { 
 
    border: 5px solid red; 
 
    vertical-align: middle; 
 
    font-size: 50px; 
 
    font-family: Leelawadee UI Semilight, Calibri, Arial; 
 
    width: 90%; 
 
    margin: auto; 
 
    height: 0;    
 
    padding-bottom: 30%; 
 
} 
 

 

 
.slot { 
 
    border: 3px solid green; 
 
    height: 0; 
 
    padding-bottom: 30%; 
 
    width: 32%; 
 
    margin-right: 1%; 
 
    margin-top: 1%; 
 
    margin-bottom: 1%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
#slot1 { 
 
    margin-left: 1%; 
 
} 
 

 

 
h1 { 
 
    color: #FC3FD3; 
 
    text-align: center; 
 
    font-family: Century Gothic; 
 
    font-size: 5em; 
 
    height: 50px; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    justify-content: center; 
 
} 
 

 

 
button { 
 
    position: relative; 
 
    font-size:20px; 
 
    display: block; 
 
    background-color: white; 
 
    color: black; 
 
    border: 2px solid green; 
 
    width: 90%; 
 
    position: middle; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 

 

 
} 
 

 
button:hover { 
 
    background-color: green; 
 
} 
 

 
button.spin-button { 
 
    color: blue; 
 
    position: absolute; 
 
    height: 20%; 
 
} 
 

 

 

 
.answer { 
 
    font-family: Century Gothic; 
 
    font-size: 20px; 
 
    color: red; 
 
    text-align: center; 
 
    margin-top: 10px; 
 
} 
 

 
ul.menubar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #008000; 
 
} 
 

 
ul.menubar li { 
 
    float: left; 
 
} 
 

 
ul.menubar li a { 
 
    color: black; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding:15px 20px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-family: Century Gothic; 
 
} 
 

 
ul.menubar li a:hover { 
 
    background-color: #00A300; 
 
}
<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Slotmachine</title> 
 
    <script type="text/javascript" src="#.js"></script> 
 
    <link type="text/css" rel="stylesheet" href="#.css" /> 
 
</head> 
 

 
<body> 
 
    <ul class="menubar" id=topmenubar> 
 
     <li><a href="#linkHome">Home</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?--> 
 
     <li><a href="#linkContact">Contact</a></a></li> 
 
     <li><a href="#linkAbout">About</a></li> 
 
    </ul> 
 

 

 
    <h1>1-10</h1> 
 

 

 
    <button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button> 
 
    <div class="slot-container"> 
 
     <div id="slot1" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX1">0</a></p> 
 
     </div> 
 
     <div id="slot2" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX2">0</a></p> 
 
     </div> 
 
     <div id="slot3" class="slot"> 
 
      <p> <!-- Your random number: --> <a id="randomX3">0</a></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="answer" id="spanId">Test #1<a id="spanId"> </div> 
 

 

 
</body> 
 

 
</html>

 Смежные вопросы

  • Нет связанных вопросов^_^