I am creating a roulette game that displays random items from different arrays when the wheel lands on a specific category. So far everything works except when the wheel lands on a category, it selects the same random item from the correct array over and over again. I am trying to use math.random and the splice method to randomly select an item from an array, and remove that item so only new, random items from the array can be displayed after, but it hasn't worked.
I don't know how the rest of the code is, but if you always get the same value over and over again it could be that you're not re-running the code that gets the values.
Try wrapping the logic for retrieving the symbolZones in a function:
function getSymbolZones() {
const symbolZones = [];
symbolZones[1] = a[Math.floor(Math.random()*a.length)];
symbolZones[2] = b[Math.floor(Math.random()*b.length)];
symbolZones[3] = c[Math.floor(Math.random()*c.length)];
symbolZones[4] = d[Math.floor(Math.random()*d.length)];
symbolZones[5] = e[Math.floor(Math.random()*e.length)];
symbolZones[6] = f[Math.floor(Math.random()*f.length)];
symbolZones[7] = g[Math.floor(Math.random()*g.length)];
symbolZones[8] = h[Math.floor(Math.random()*h.length)];
return symbolZones;
}
and then use it in the handleWin function.
const handleWin = (actualDeg) => {
const symbolZones = getSymbolZones();
const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
display.innerHTML = symbolZones[winningSymbolNr];
}
P.S.
I understand that you start the array at index 1 because that's the smallest zone you can get from the operation 45 / 45.
But if I were you I'd start the index from 0 and just subtract 1 when accessing the array: symbolZones[winningSymbolNr - 1].
This way you don't get weird bugs when trying to loop through an array that has an empty first index.
Other than using array, I would suggest you use object and a for loop to make the code easier to execute. This code should work:
let deg = 0;
// The 360 degree wheel has 8 zones, so each zone is 45 degrees
let zoneSize = 45;
let symbol = {
a: ["a", "b", "c", "d", "e"],
b: ["f", "g", "h", "i", "j"],
c: ["a", "b", "c", "d", "e"],
d: ["f", "g", "h", "i", "j"],
e: ["a", "b", "c", "d", "e"],
f: ["f", "g", "h", "i", "j"],
g: ["a", "b", "c", "d", "e"],
h: ["f", "g", "h", "i", "j"],
}
// zones for each 8 categories
let ran = Math.floor(Math.random() * Object.keys(symbol).length)
console.log(Object.values(symbol)[ran])
//Random select a zone from above 8
let selectedzone = Object.values(symbol)[ran]
//Random select an item from selected zone
let index = Math.floor(Math.random() * selectedzone.length)
let symbolZones = selectedzone[index]
console.log(symbolZones)
const handleWin = (actualDeg) => {
const winningSymbolNr = Math.ceil(actualDeg / zoneSize);
display.innerHTML = symbolZones[winningSymbolNr];
}I rearranged the input arrays into an array of arrays (5 arrays of 9 elements = 45). I'm guessing that you want the whole thing shuffled.
const log = data => console.log(JSON.stringify(data));
let zones = [
["๐", "๐", "๐ฏ", "๐", "๐", "๐ฉ", "๐ฐ", "๐", "๐ด"],
["๐", "๐", "๐", "๐", "๐ฃ", "๐ฒ", "๐ฐ", "๐", "๐ฟ"],
["๐", "๐", "๐ฏ", "๐", "๐", "๐ฉ", "๐ฐ", "๐", "๐ด"],
["๐", "๐", "๐", "๐", "๐ฃ", "๐ฒ", "๐ฐ", "๐", "๐ฟ"],
["๐", "๐", "๐ฏ", "๐", "๐", "๐ฉ", "๐ฐ", "๐", "๐ด"]
];
let zoneSize = zones.length * zones[0].length;
let symbolZones = [];
for (let i = zoneSize; i > 0; i--) {
let deg = zones.flatMap(z => z.splice(Math.floor(Math.random() * z.length), 1));
if(deg.length > 0) {
symbolZones.push(deg);
}
}
log(`Original Array zones`);
log(zones);
log(`New Array symbolZones`);
log(symbolZones);.as-console-row-code {
display: block;
width: 100%;
overflow-wrap: anywhere;
}
.as-console-row::after {
content: ''!important
}