Meleeman/WheelOfFortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

found a solution for the cool spinny wheel, just change initial speed

Browse Source
This commit is contained in:
Meleeman01 2024-11-30 13:16:48 -06:00
parent 8b2bcc9af4
commit 2dbc436d6c
1 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@ -30,15 +30,37 @@
300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again', 300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again',
900, 'Bankrupt', 600, 400, 300 900, 'Bankrupt', 600, 400, 300
]; ];
const wheelRadiansData = [ const wheelSpinSpeedData = [
{'0':{'lose a turn':4.6}}, {'0':{'lose a turn':0.252}},
{'1':{'800':9.2}} {'1':{'800':.25}},
{'2':{'350':.247}},
{'3':{'450':.2445}},
{'4':{'450':.242}},
{'5':{'300':.239}},
{'6':{'300':.239}},
{'7':{'300':.239}},
{'8':{'300':.239}},
{'9':{'300':.239}},
{'10':{'300':.239}},
{'11':{'300':.239}},
{'12':{'300':.239}},
{'13':{'300':.239}},
{'14':{'300':.239}},
{'15':{'300':.239}},
{'16':{'300':.239}},
{'17':{'300':.239}},
{'18':{'300':.239}},
{'19':{'300':.239}},
{'20':{'300':.239}},
{'21':{'300':.239}},
{'22':{'300':.239}},
{'23':{'300':.239}}
]; ];
const canvas = document.getElementById('wheelCanvas'); const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const radius = canvas.width / 2; const radius = canvas.width / 2;
let rotation = 0; let rotation = 0 - (.283*6); //sets the zero index on top
let spinning = false; let spinning = false;
let spinSpeed = 0; let spinSpeed = 0;
let img = new Image(); let img = new Image();
@ -95,35 +117,30 @@
function startSpin(targetIndex) { function startSpin(targetIndex) {
console.log('targetIndex: ',targetIndex); console.log('targetIndex: ',targetIndex);
if (spinning) return; if (spinning) return;
rotation = 0 - (.283*6)
spinning = true; spinning = true;
const totalSpins = Math.floor(Math.random() * 3) + 3; // 3-6 full spins const totalSpins = Math.floor(Math.random() * 3) + 3; // 3-6 full spins
const anglePerSegment = (2 * Math.PI) / wheel.length; const anglePerSegment = (2 * Math.PI) / wheel.length;
const targetAngle = targetIndex * anglePerSegment; const targetAngle = targetIndex * anglePerSegment;
console.log(anglePerSegment); console.log(anglePerSegment);
// Align the target segment to 12 o'clock
const topAlignmentOffset = Math.PI / 2; // Adjust to position the result at the top
const finalTargetAngle = totalSpins * 2 * Math.PI + targetAngle - topAlignmentOffset;
let currentRotation = rotation; // Start from the current rotation let currentRotation = rotation; // Start from the current rotation
spinSpeed = 0.25; // Initial speed spinSpeed = 0.239; // Initial speed
function animate() { function animate() {
if (Math.abs(currentRotation - finalTargetAngle) < 0.01 && spinSpeed < 0.001) {
if ( spinSpeed < 0.001) {
spinning = false; spinning = false;
rotation = finalTargetAngle % (2 * Math.PI); // Final alignment
drawWheel();
console.log(`Landed on: ${wheel[targetIndex]}`); console.log(`Landed on: ${wheel[targetIndex]}`);
return; return;
} }
// console.log('currentRotation: ',currentRotation);
// console.log('spinSpeed: ', spinSpeed);
currentRotation += spinSpeed; currentRotation += spinSpeed;
spinSpeed *= 0.99; // Gradual slowdown spinSpeed *= 0.99; // Gradual slowdown
//console.log(spinSpeed);
// console.log(finalTargetAngle,rotation);
if (spinSpeed < .01){
spinSpeed = .01;
}
rotation = currentRotation ; rotation = currentRotation ;
drawWheel(); drawWheel();
requestAnimationFrame(animate); requestAnimationFrame(animate);