class Turntable {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext(‘2d’);

this.radius = 200; // 转盘半径
this.centerX = this.canvas.width / 2; // 转盘中心点的 x 坐标
this.centerY = this.canvas.height / 2; // 转盘中心点的 y 坐标

this.sectorColors = [‘#FF5733’, ‘#FFC300’, ‘#4CAF50’, ‘#3498db’, ‘#9B59B6’, ‘#E74C3C’, ‘#F39C12’, ‘#2C3E50’]; // 扇形的颜色
this.sectorPrizes = [‘手机’, ‘电脑’, ‘谢谢惠顾’, ‘拍立得’, ‘谢谢惠顾’, ‘空调’, ‘购物卡’, ‘视频VIP’, ‘护肤品’, ‘蓝牙耳机’, ‘谢谢惠顾’, ‘空气炸锅’]; // 奖项
this.sectorImages = [
‘手机.png’,
‘云端电脑.png’,
‘谢谢参与.png’,
‘相机.png’,
‘谢谢参与.png’,
‘空调.png’,
‘购物好礼场景.png’,
‘暂无会员卡.png’,
‘美妆护肤.png’,
‘耳机.png’,
‘谢谢参与.png’,
‘空气炸锅.png’];
this.spinButton = document.getElementById(‘spinButton’);
this.spinButton.addEventListener(‘click’, () => {
this.startSpin();
const ring1 = document.querySelector(“.ring1”);
const ring2 = document.querySelector(“.ring2”);
ring1.classList.add(“scale-animation”);
ring2.classList.add(“scale-animation”);
});
this.oppositespinButton = document.getElementById(‘oppositespinButton’);
this.oppositespinButton.addEventListener(‘click’, () => {
this.startOppositeSpin();
});

}

drawWheel() {
const numberOfSectors = this.sectorColors.length;
const sectorAngle = (2 * Math.PI) / numberOfSectors;
const usedNumbers = []; // 用于跟踪已经生成的随机数

for (let i = 0; i < numberOfSectors; i++) {
const startAngle = i * sectorAngle;
const endAngle = (i + 1) * sectorAngle;

this.ctx.beginPath();
this.ctx.moveTo(this.centerX, this.centerY);
this.ctx.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
this.ctx.closePath();

this.ctx.fillStyle = this.sectorColors[i % this.sectorColors.length];
this.ctx.fill();

// const prizenum = Math.floor(Math.random() * 12);
// const text = this.sectorPrizes[prizenum];
let prizenum;
let text;
do {
prizenum = Math.floor(Math.random() * 12);
} while (usedNumbers.includes(prizenum)); // 检查随机数是否已经出现过
usedNumbers.push(prizenum); // 将随机数添加到已使用的数组中
text = this.sectorPrizes[prizenum];


const textAngle = startAngle + sectorAngle / 2;
const textX = this.centerX + Math.cos(textAngle) * this.radius * 0.8;
const textY = this.centerY + Math.sin(textAngle) * this.radius * 0.8;

this.ctx.save();
this.ctx.translate(textX, textY);
this.ctx.rotate(textAngle + Math.PI / 2);
this.ctx.textAlign = ‘center’;
this.ctx.textBaseline = ‘middle’;
this.ctx.font = ‘20px fantasy’;
this.ctx.fillStyle = ‘#fff’;
this.ctx.fillText(text, 0, 0);
this.ctx.restore();

// const image = new Image();
// image.src = this.sectorImages[prizenum];
// const imageWidth = 60;
// const imageHeight = 60;
// const imageX = this.centerX + Math.cos(textAngle) * this.radius * 0.55;
// const imageY = this.centerY + Math.sin(textAngle) * this.radius * 0.55;

// image.onload = () => {
// this.ctx.save();
// this.ctx.translate(imageX, imageY);
// this.ctx.rotate(textAngle + Math.PI / 2);
// this.ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
// this.ctx.restore();
// };
}
}


startSpin() {
const numberOfSpins = 2; // 旋转圈数
const targetSector = Math.floor(Math.random() * this.sectorPrizes.length); // 随机选择一个奖项作为目标扇形
const totalAngle = targetSector * (2 * Math.PI / this.sectorPrizes.length) + (2 * Math.PI) * numberOfSpins;
let currentAngle = 0;
let spinSpeed = 0.08; // 旋转速度
let isPaused = false;

const spinAnimation = () => {

if (isPaused) {
return; // 如果暂停标志为true，则停止旋转动画
}

currentAngle += spinSpeed;
if (currentAngle >= totalAngle) {
// 到达目标角度，停止旋转
return;
}

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.save();
this.ctx.translate(this.centerX, this.centerY);
this.ctx.rotate(currentAngle);
this.ctx.translate(-this.centerX, -this.centerY);

this.drawWheel();

this.ctx.restore();

requestAnimationFrame(spinAnimation);

};

requestAnimationFrame(spinAnimation);

spinAnimation();

const stopButton = document.getElementById(“stopButton”);
stopButton.addEventListener(“click”, () => {
isPaused = !isPaused;
});

const speedButton = document.getElementById(“speedButton”);
speedButton.addEventListener(“click”, () => {
spinSpeed = 0.15;
});

}

startOppositeSpin() {
const numberOfSpins = 2; // 旋转圈数
const targetSector = Math.floor(Math.random() * this.sectorPrizes.length); // 随机选择一个奖项作为目标扇形
const totalAngle = targetSector * (2 * Math.PI / this.sectorPrizes.length) + (2 * Math.PI) * numberOfSpins;
let currentAngle = 0;
let spinSpeed = 0.08; // 初始旋转速度
let isPaused = false;

const oppositespinAnimation = () => {
if (isPaused) {
return; // 如果暂停标志为 true，则停止旋转动画
}

currentAngle -= spinSpeed; // 逆时针旋转，将旋转角度减小
if (currentAngle <= -totalAngle) {
// 到达目标角度，停止旋转
return;
}

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.save();
this.ctx.translate(this.centerX, this.centerY);
this.ctx.rotate(currentAngle);
this.ctx.translate(-this.centerX, -this.centerY);

this.drawWheel();

this.ctx.restore();

requestAnimationFrame(oppositespinAnimation);
};

oppositespinAnimation();

const stopButton = document.getElementById(“stopButton”);
stopButton.addEventListener(“click”, () => {
isPaused = !isPaused;
});

const speedButton = document.getElementById(“oppositespeedButton”);
speedButton.addEventListener(“click”, () => {
spinSpeed = 0.15; // 每次点击加速按钮，增加旋转速度
});
}


}


const turntable = new Turntable(‘gameCanvas’);
turntable.drawWheel(); // 初始绘制转盘 如何获得转盘每次停止后的扇形分布，并且在扇形上添加显示扇形文字对应的图片