Я создаю страницу с простой игрой в стиле «бросок костей».Игра настроена таким образом, что пользователь может установить диапазон чисел с помощью ползунка с двумя маркерами диапазона (выполненного с помощью jquery-ui), и если случайное число, которое генерируется при нажатии кнопки "roll", находится в пределах установленного диапазонана слайдере отображаемое большое число становится синим.Если сгенерированное число выходит за пределы установленного диапазона, оно становится красным.
Я также добавил функцию «бонуса», которая включает второе случайное число (обозначенное как «счастливое число»), которое генерируется одновременно, иесли случайное число совпадает с номером броска, оно считается «джекпотом», а большое число становится желтым.Это не большая часть моей проблемы, но она объясняет, почему в моем javascript есть второй генератор случайных чисел.
Я установил все возвращаемые значения для регистрации в консоли для целей отладки - когдаручки ползунка перемещаются, консоль записывает высокие и низкие значения (а также процент выигрыша, но это не имеет значения для этих целей).Кроме того, когда нажата кнопка «бросить», генерируемое случайное число, обозначенное как «свернутое число», заносится в консоль, как и второе случайное число, обозначаемое как «счастливое число».
Большая часть того, что я описал, уже работает на странице, за одним большим исключением: я не могу использовать значения, заданные с помощью ползунка диапазона, в качестве значений диапазона в моей функции roller () (я должен был установить их вручную - представлен в моемкод 9 и 95, соответственно).
Я пытался взять значения из функции ползунка и объявить их без ключевого слова var с целью сделать их глобально доступными, но функция roller () все еще некажется, не узнает их.Я подозреваю, что это может быть вызвано тем, что значения ползунка не «устанавливаются / инициализируются» при первой загрузке страницы, но мои знания javascript (особенно jQuery) кажутся недостаточными для решения этой проблемы.
Моя проблема простозаявил: мне нужно, во-первых, убедиться, что два значения, предоставляемые ползунком диапазона, не равны нулю при загрузке страницы, а во-вторых, мне нужен способ использовать эти значения для представления «диапазона выигрышей» в моей функции roller ().
Любая помощь будет принята с благодарностью.
Мой код ниже
//HTML/Javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>ROLLER</title>
</head>
<body>
<div class="wrapper">
<div class="whitespace"></div>
<div class="bignumber" id="number">50</div>
<div class="whitespace"></div>
<div class="whitespace"></div>
<div class="rangetext" id="slidervalue">
<label for="slidenumbers">NUMBER RANGE</label></div>
<input type="text" id="slidenumbers" name="slidenumbers">
<div class="rangeslider">
<div id="slider"></div>
</div>
<button class="rollonce" onclick="luckynumber(); roller()">ROLL</button>
<script>
//I NEED THIS FUNCTION TO LOAD ON PAGE LOAD SO THE SLIDER ALREADY HAS REGISTERED VALUES (as of now they are blank on page load with null value - I think)
$('#slider').slider({
slide: function(event, ui) {
$('#slidenumbers').val(ui.values[0] + " - " + ui.values[1]);
var top = ui.values[1]; ///AN ATTEMPT TO SET THE VALUES AS VARIABLES - DID NOT WORK
var bottom = ui.values[0];
// highNumber = top; ////// AN ATTEMPT TO MAKE THE VALUE VARIABLES GLOBAL - ALSO DID NOT WORK WHEN I ATTEMPTED TO USE THEM IN ROLLER() FUNCTION
//lowNumber = bottom;
console.log("BOTTOM VALUE - ", bottom);
console.log("TOP VALUE - ", top);
console.log(" --- WIN PERCENT CHANCE --- ", (top - bottom),"%");
},
min: 5,
max: 95,
values: [15, 85],
step: 1,
range: true,
orientation: "horizontal"
});
var lucky
function roller() {
random = Math.floor((Math.random() * 99) + 1);
document.getElementById('number').innerText = random;
console.log("Your rolled number:", random);
//THESE ARE THE VALUES (5 and 95) I NEED REPLACED WITH THE (LAST UPDATED) VALUES FROM THE TOP AND BOTTOM RANGE OF THE SLIDER SET BY THE USER
if (random > 5 || random < 95 && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber2');
} if (lucky == random && random > 5 && random < 95) {
document.getElementById('number').setAttribute('class', 'bignumber');
console.log("MATCH! - LUCKY NUMBER:", lucky, "RANDOM NUMBER:", random);
} else if (random <= 5 || random >= 95 && random != lucky) {
document.getElementById('number').setAttribute('class', 'bignumber1');
}
};
function luckynumber(){
random1 = Math.floor((Math.random() * 99) + 1);
console.log("-------------------------");
console.log("Lucky number: ", random1)
lucky = random1
};
</script>
</div>
</body>
</html>
//CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
text-align: center;
}
body, html{
background: #222;
font-family: sans-serif;
height: 100%;
overflow: hidden;
}
.wrapper{
background: #000;
background-size: cover;
height: 55.9vw;
text-align: center;
width: 30%;
margin-left: 35vw;
}
.bignumber{
color: #FFFF00;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber1{
color: #FF0000;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.bignumber2{
color: #0000FF;
font-size: 23vw;
font-weight: 500;
font-family: sans-serif;
margin-left: 1vw;
}
.rangetext{
color: #FFFFFF;
font-size: 2.5vw;
font-weight: 300;
margin-top: 1vw;
}
.rangeslider{
height: 3vw;
margin-left: 3.5vw;
margin-top: 1vw;
position: relative;
width: 22vw;
}
#slider .ui-slider-range{
background: #0CF;
border: 1px solid #AAF;
outline: none;
}
#slider .ui-slider-handle{
background: #000;
border: 3px double #FA0;
outline: none;
}
#slidenumbers{
background: none;
border: none;
color: #AADDFF;
font-family: sans-serif;
font-size: 2vw;
height: 2.5vw;
outline: none;
width: 10vw;
}
.rollonce{
background: transparent;
border: .1vw solid rgba(255,215,0,0.8);
border-radius: 5px;
color: #AADDFF;
cursor: pointer;
font-family: sans-serif;
font-size: 3vw;
font-weight: 700;
height: 5vw;
margin-top: 3vw;
outline: none;
padding-top: 0vw;
text-align: center;
width: 22vw;
}
.rollonce:hover{
box-shadow: 0px 0px 20px 10px #FF7500
}
.whitespace{
height: 1.5vw;
width: 100%;
}
Я прошу прощения за изобилие кода - я попытался сделать скрипку, но это не помоглоотображать правильно.Это моя следующая проблема ...