class Turntable {
    constructor(canvasId) {
      this.canvas = document.getElementById(canvasId);
      this.ctx = this.canvas.getContext('2d');
      this.refreshButton = document.getElementById('update');
      this.rotateButton = document.getElementById('rotate');
      this.isSpinning = false;
      this.spinSpeed = 0.2;
      this.decelerationRate = 0.01;
      this.numberOfSectors = 0; // 存储扇形数量
  
      this.refreshButton.addEventListener('click', () => {
        this.refreshTurntable();
      });
  
      this.rotateButton.addEventListener('click', () => {
        this.startSpinAnimation();
      });
    }
  
    refreshTurntable() {
      this.numberOfSectors = this.generateRandomNumberOfSectors(); // 更新扇形数量
      this.clearTurntable();
      this.drawSectors(this.numberOfSectors);
    }
  
    generateRandomNumberOfSectors() {
      return Math.floor(Math.random() * 8) + 3; // 生成3-10之间的随机整数
    }
  
    clearTurntable() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
  
    drawSectors(numberOfSectors) {
      const sectorAngle = this.calculateSectorAngle(numberOfSectors);
      const centerX = this.canvas.width / 2;
      const centerY = this.canvas.height / 2;
      const radius = Math.min(this.canvas.width, this.canvas.height) / 2 - 20;
  
      for (let i = 0; i < numberOfSectors; i++) {
        const startAngle = i * sectorAngle;
        const endAngle = (i + 1) * sectorAngle;
  
        this.ctx.beginPath();
        this.ctx.moveTo(centerX, centerY);
        this.ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        this.ctx.closePath();
  
        const hue = (i * 360) / numberOfSectors;
        const randomColor = this.getRandomColor();
        this.ctx.fillStyle = randomColor;
        this.ctx.fill();
      }
    }
  
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    
    spinAnimation() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 清除画布
      this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
      this.ctx.rotate(this.spinSpeed);
      this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
      
      const sectorAngle = this.calculateSectorAngle(this.numberOfSectors);
      const centerX = this.canvas.width / 2;
      const centerY = this.canvas.height / 2;
      const radius = Math.min(this.canvas.width, this.canvas.height) / 2 - 20;
      
      for (let i = 0; i < this.numberOfSectors; i++) {
        const startAngle = i * sectorAngle;
        const endAngle = (i + 1) * sectorAngle;
      
        this.ctx.beginPath();
        this.ctx.moveTo(centerX, centerY);
        this.ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        this.ctx.closePath();
      
        const hue = (i * 360) / this.numberOfSectors;
        const randomColor = this.getRandomColor();
        this.ctx.fillStyle = randomColor;
        this.ctx.fill();
      }
      
      this.spinSpeed -= this.decelerationRate;
      if (this.spinSpeed > 0) {
        requestAnimationFrame(() => this.spinAnimation());
      } else {
        this.isSpinning = false;
      }
    }

    calculateSectorAngle(numberOfSectors) {
      return (2 * Math.PI) / numberOfSectors;
    }
  
    startSpinAnimation() {
      if (this.isSpinning) return;
      this.isSpinning = true;
      this.spinSpeed = 0.2;
  
      this.spinAnimation();
    }

  }
  
  const turntable = new Turntable('gameCanvas');
  怎样使得旋转转盘颜色不发生改变，转盘旋转前后颜色一样，不改变