I created a spin wheel using javascript and html, all is perfectly work and now I want to add a value where the spin to stop at.
function randomColor(){
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
return {r,g,b}
}
function toRad(deg){
return deg * (Math.PI / 180.0);
}
function randomRange(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function easeOutSine(x) {
return Math.sin((x * Math.PI) / 2);
}
// get percent between 2 number
function getPercent(input,min,max){
return (((input - min) * 100) / (max - min))/100
}
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const width = document.getElementById("canvas").width
const height = document.getElementById("canvas").height
const centerX = width/2
const centerY = height/2
const radius = width/2
const items = [
{ minDegree: 0, maxDegree: 40, value: 1, name: "chicken" },
{ minDegree: 41, maxDegree: 80, value: 2, name: "neko" },
{ minDegree: 81, maxDegree: 120, value: 3, name: "bird" },
{ minDegree: 121, maxDegree: 160, value: 4, name: "goat" },
{ minDegree: 161, maxDegree: 200, value: 5, name: "sheep" },
{ minDegree: 201, maxDegree: 240, value: 6, name: "duck" },
{ minDegree: 241, maxDegree: 280, value: 7, name: "cow" },
{ minDegree: 281, maxDegree: 320, value: 8, name: "dog" },
{ minDegree: 321, maxDegree: 360, value: 9, name: "cat" },
];
console.log(items);
let currentDeg = 0
let step = 360/items.length
let colors = []
for(let i = 0 ; i < items.length + 1;i++){
colors.push(randomColor())
}
function createWheel(){
// items = document.getElementsByTagName("textarea")[0].value.split("n");
step = 360/items.length
colors = []
for(let i = 0 ; i < items.length + 1;i++){
colors.push(randomColor())
}
draw()
}
draw()
function draw(){
ctx.beginPath();
ctx.arc(centerX, centerY, radius, toRad(0), toRad(360))
ctx.fillStyle = `rgb(${33},${33},${33})`
ctx.lineTo(centerX, centerY);
ctx.fill()
let startDeg = currentDeg;
for(let i = 0 ; i < items.length; i++, startDeg += step){
let rewardName = items[i];
let endDeg = startDeg + step;
//console.log(rewardName + " startdegre" + startDeg + " endDeg" + endDeg);
color = colors[i]
let colorStyle = `rgb(${color.r},${color.g},${color.b})`;
ctx.beginPath();
rad = toRad(360/step);
ctx.arc(centerX, centerY, radius - 2, toRad(startDeg), toRad(endDeg));
let colorStyle2 = `rgb(${color.r - 30},${color.g - 30},${color.b - 30})`;
ctx.fillStyle = colorStyle2;
ctx.lineTo(centerX, centerY);
ctx.fill();
ctx.beginPath();
rad = toRad(360/step);
ctx.arc(centerX, centerY, radius - 30, toRad(startDeg), toRad(endDeg));
ctx.fillStyle = colorStyle;
ctx.lineTo(centerX, centerY);
ctx.fill();
// draw text
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(toRad((startDeg + endDeg)/2));
ctx.textAlign = "center";
if(color.r > 150 || color.g > 150 || color.b > 150){
ctx.fillStyle = "#000";
}
else{
ctx.fillStyle = "#fff";
}
ctx.font = 'bold 24px serif';
ctx.fillText(rewardName, 150, 10);
ctx.restore();
// check winner
if(startDeg%360 < 360 && startDeg%360 > 270 && endDeg % 360 > 0 && endDeg%360 < 90 ){
document.getElementById("winner").innerHTML = rewardName;
}
}
}
let speed = radiansUntilStop = 0;
let maxRotation = randomRange(360*3,360*6);
let pause = false;
function animate(){
if(pause){
return;
}
console.log(currentDeg);
speed = easeOutSine(getPercent(currentDeg ,maxRotation ,0)) * 20
// speed = getPercent(currentDeg ,maxRotation ,0)
if(speed < 0.01){
speed = 0;
pause = true;
}
if( currentDeg >= radiansUntilStop ) {
// stop spinning the wheel
currentDeg = radiansUntilStop;
speed = 0;
pause = true;
}
currentDeg += speed;
draw()
window.requestAnimationFrame(animate);
}
function spin(){
if(speed != 0){
return
}
currentDeg = 0
maxRotation = randomRange(360*3,360*6)
console.log(maxRotation);
radiansUntilStop = 41;
pause = false
window.requestAnimationFrame(animate);
}
I set a value radiansUntilStop to stop the spin at “neko” yes its stop at it, but the spin not animate (spin at random times then stop) only stop without animation
here is the demo https://jsfiddle.net/wsmcf8ub/
I try to remove the code
if( currentDeg >= radiansUntilStop ) {
// stop spinning the wheel
currentDeg = radiansUntilStop;
speed = 0;
pause = true;
}
then it animate the spin but will stop at random value
https://jsfiddle.net/7b61p4az/
What I want is to animate it then stop at value we set, any ways to fix this? thanks
