I have an wheel of fortune from chart and javascript code. I copy [https://www.codewithrandom.com/2023/11/24/spin-wheel-app-using-javascript/](this site) and everything is working fine.
What I want to do is reduce or increase the prize, in that example the prize are 12 items, here is the code
/* --------------- Minimum And Maximum Angle For A value --------------------- */
const spinValues = [
{ minDegree: 61, maxDegree: 90, value: 100 },
{ minDegree: 31, maxDegree: 60, value: 200 },
{ minDegree: 0, maxDegree: 30, value: 300 },
{ minDegree: 331, maxDegree: 360, value: 400 },
{ minDegree: 301, maxDegree: 330, value: 500 },
{ minDegree: 271, maxDegree: 300, value: 600 },
{ minDegree: 241, maxDegree: 270, value: 700 },
{ minDegree: 211, maxDegree: 240, value: 800 },
{ minDegree: 181, maxDegree: 210, value: 900 },
{ minDegree: 151, maxDegree: 180, value: 1000 },
{ minDegree: 121, maxDegree: 150, value: 1100 },
{ minDegree: 91, maxDegree: 120, value: 1200 },
];
/* --------------- Size Of Each Piece --------------------- */
const size = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
/* --------------- Background Colors --------------------- */
var spinColors = [
"#E74C3C",
"#7D3C98",
"#2E86C1",
"#138D75",
"#F1C40F",
"#D35400",
"#138D75",
"#F1C40F",
"#b163da",
"#E74C3C",
"#7D3C98",
"#138D75",
];
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
I try to reduce the items become 10 items, with this code (I modified my self) and also find my own formula with minDegree and MaxDegree for spinValues
/* --------------- Minimum And Maximum Angle For A value --------------------- */
const spinValues = [
{ minDegree: 73, maxDegree: 108, value: 100 },
{ minDegree: 37, maxDegree: 72, value: 200 },
{ minDegree: 0, maxDegree: 36, value: 300 },
{ minDegree: 325, maxDegree: 360, value: 400 },
{ minDegree: 289, maxDegree: 324, value: 500 },
{ minDegree: 253, maxDegree: 288, value: 600 },
{ minDegree: 217, maxDegree: 252, value: 700 },
{ minDegree: 181, maxDegree: 216, value: 800 },
{ minDegree: 145, maxDegree: 180, value: 900 },
{ minDegree: 109, maxDegree: 144, value: 1000 },
];
/* --------------- Size Of Each Piece --------------------- */
const size = [12, 12, 12, 12, 12, 12, 12, 12, 12, 12];
/* --------------- Background Colors --------------------- */
var spinColors = [
"#E74C3C",
"#7D3C98",
"#2E86C1",
"#138D75",
"#F1C40F",
"#D35400",
"#138D75",
"#F1C40F",
"#b163da",
"#E74C3C",
];
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
But it goes wrong somehow, See the picture I attach
The arrow show to labels 6 but the prize value is 700
The arrow show to labels 2 but the prize value is 300
Its work when its in default 12 items, when arrow show to label 6, the prize value would be 600.
I think there’s some mistake in determine Minimum And Maximum Angle For A value in script.
The formula I use to get 10 Items
360/10
formula in excel
What I ask, how to determine the minimum and maximum angle (degree) for the items show?
I want to use foreach function in PHP to show the item with minimum and maximum angle (minDegree and MaxDegree for spinValues) so that I can increase or reduce the total of items easily.
thanks