diff --git a/index.html b/index.html index f006e60..8e41a52 100644 --- a/index.html +++ b/index.html @@ -30,15 +30,37 @@ 300, 600, 300, 500, 800, 550, 400, 300, 900, 500, 'spin again', 900, 'Bankrupt', 600, 400, 300 ]; - const wheelRadiansData = [ - {'0':{'lose a turn':4.6}}, - {'1':{'800':9.2}} + const wheelSpinSpeedData = [ + {'0':{'lose a turn':0.252}}, + {'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 ctx = canvas.getContext('2d'); const radius = canvas.width / 2; - let rotation = 0; + let rotation = 0 - (.283*6); //sets the zero index on top let spinning = false; let spinSpeed = 0; let img = new Image(); @@ -95,35 +117,30 @@ function startSpin(targetIndex) { console.log('targetIndex: ',targetIndex); if (spinning) return; + rotation = 0 - (.283*6) spinning = true; const totalSpins = Math.floor(Math.random() * 3) + 3; // 3-6 full spins const anglePerSegment = (2 * Math.PI) / wheel.length; const targetAngle = targetIndex * 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 - spinSpeed = 0.25; // Initial speed + spinSpeed = 0.239; // Initial speed function animate() { - if (Math.abs(currentRotation - finalTargetAngle) < 0.01 && spinSpeed < 0.001) { + + if ( spinSpeed < 0.001) { spinning = false; - rotation = finalTargetAngle % (2 * Math.PI); // Final alignment - drawWheel(); console.log(`Landed on: ${wheel[targetIndex]}`); return; } - + // console.log('currentRotation: ',currentRotation); + // console.log('spinSpeed: ', spinSpeed); currentRotation += spinSpeed; spinSpeed *= 0.99; // Gradual slowdown - //console.log(spinSpeed); - // console.log(finalTargetAngle,rotation); - if (spinSpeed < .01){ - spinSpeed = .01; - } + + rotation = currentRotation ; drawWheel(); requestAnimationFrame(animate);