从命运之轮中删除价值

Question

我使用了 Roko C. Buljan 的命运之轮代码：如何绘制命运之轮？

我是使用画布的新手，但我已经弄清楚了代码的大部分功能 - 数学绝对不是我的强项！

我正在努力添加这样的功能：当轮子停止旋转并落在切片上时，如何才能将其完全删除或更改切片的颜色并停止轮子再次落在其上？ 这可能吗？

感谢您提前的答复/建议！

const fruits = [{
    color: '#cf6f',
    label: 'Apple',
    value: 1
  },
  {
    color: '#0051',
    label: 'Lemon',
    value: 2
  },
  {
    color: '#efd',
    label: 'Raspberry',
    value: 3
  },
  {
    color: '#6b9',
    label: 'Blueberry',
    value: 4
  },
  {
    color: '#afb',
    label: 'Mango',
    value: 5
  },
];

const rand = (min, max) => Math.random() * (max - min) + min;
const numOfFruits = fruits.length;
const spin = document.querySelector('#spin');
const ctx = document.querySelector('#wheel').getContext('2d');
const diameter = ctx.canvas.width;
const radius = diameter / 2;
const PI = Math.PI; // 3.141592653589793
const TAU = 2 * PI; // 6.283185307179586
const arc = TAU / fruits.length; // 0.8975979010256552

const friction = 0.97; // 0.995=soft, 0.99=mid, 0.98=hard
let angVel = 0; // Angular velocity
let angle = 0; // angle in radians

const getIndex = () =>
  Math.floor(numOfFruits - (angle / TAU) * numOfFruits) % numOfFruits;

function drawSector(sector, index) {
  const angle = arc * index;
  console.log('angle', angle)
  console.log(index)
  console.log(sector)
  ctx.save();
  // COLOR
  ctx.beginPath();
  ctx.fillStyle = sector.color;
  ctx.moveTo(radius, radius);
  ctx.arc(radius, radius, radius, angle, angle + arc);
  ctx.lineTo(radius, radius);
  ctx.fill();
  // positioning of the text
  ctx.translate(radius, radius);
  ctx.rotate(angle + arc / 2);
  ctx.textAlign = 'right';
  ctx.fillStyle = '#243447';
  ctx.font = 'bold 1.3em Courier New';
  ctx.fillText(sector.label, radius - 10, 10);
  //
  ctx.restore();
}

function rotate() {
  const slice = fruits[getIndex()];
  ctx.canvas.style.transform = `rotate(${angle - PI / 2}rad)`;
  spin.textContent = !angVel ? 'SPIN' : slice.label;
  spin.style.background = slice.color;
}

// Called when the wheel stops
function stopSpinning() {
  const slice = fruits[getIndex()];
  console.log('Landed on', slice.label);
}

function frame() {
  if (!angVel) return;
  const isSpinning = angVel > 0;
  angVel *= friction; // Decrement velocity by friction
  if (angVel < 0.002) angVel = 0; // Bring to stop
  angle += angVel; // Update angle
  angle %= TAU; // Normalize angle
  rotate();

  if (isSpinning && angVel === 0) {
    // If the wheel has stopped spinning
    stopSpinning();
  }
}

const engine = () => {
  frame();
  requestAnimationFrame(engine);
};

// INIT
fruits.forEach(drawSector);
rotate(); // Initial rotation
engine(); // Start engine
spin.addEventListener('click', () => {
  if (!angVel) {
    angVel = rand(2, 1);
  }
});

<div id="wheelOfFortune">
  <canvas id="wheel" width="400" height="400"></canvas>
  <div id="spin">SPIN</div>
</div>

Answer 1

在您的

stopSpinning

中，我们可以删除它落在的项目，我们这样做：

.splice(getIndex(),1)

如果您以前从未使用过它，请在此处阅读更多信息：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

我还必须做一些更多的更改来适应现在数组发生变化的事实，例如

const numOfFruits = fruits.length

而不是使用我们只在需要时直接使用长度

尝试下面的代码：

let fruits = [
  {color: 'red', value: 1 },
  {color: 'blue', value: 2 },
  {color: 'pink', value: 3 },
  {color: 'green', value: 4 },
  {color: 'cyan', value: 5 },
];

const rand = (min, max) => Math.random() * (max - min) + min;
const spin = document.querySelector('#spin');
const canvas = document.querySelector('#wheel')
const ctx = canvas.getContext('2d');
const radius = canvas.width / 2;
const PI = Math.PI; // 3.141592653589793
const TAU = 2 * PI; // 6.283185307179586

const friction = 0.97; // 0.995=soft, 0.99=mid, 0.98=hard
let angVel = 0; // Angular velocity
let angle = 0; // angle in radians

const getIndex = () =>
  Math.floor(fruits.length - (angle / TAU) * fruits.length) % fruits.length;

// Called when the wheel stops
function stopSpinning() {
  const slice = fruits[getIndex()];
  console.log('Landed on', slice.value);
  fruits.splice(getIndex(),1) 
  init()
}

function drawSector(sector, index) {
  const angle = (TAU / fruits.length) * index;
  ctx.save();
  // COLOR
  ctx.beginPath();
  ctx.fillStyle = sector.color;
  ctx.moveTo(radius, radius);
  ctx.arc(radius, radius, radius, angle, angle + TAU / fruits.length);
  ctx.lineTo(radius, radius);
  ctx.fill();
  // positioning of the text
  ctx.translate(radius, radius);
  ctx.rotate(angle + (TAU / fruits.length) / 2);
  ctx.textAlign = 'right';
  ctx.fillStyle = 'black';
  ctx.font = 'bold 1.3em Courier New';
  ctx.fillText(sector.value, radius - 10, 10);
  //
  ctx.restore();
}

function rotate() {
  const slice = fruits[getIndex()];
  ctx.canvas.style.transform = `rotate(${angle - PI / 2}rad)`;
  spin.textContent = !angVel ? 'SPIN' : slice.value;
}

function frame() {
  if (!angVel) return;
  const isSpinning = angVel > 0;
  angVel *= friction; // Decrement velocity by friction
  if (angVel < 0.002) angVel = 0; // Bring to stop
  angle += angVel; // Update angle
  angle %= TAU; // Normalize angle
  rotate();

  if (isSpinning && angVel === 0) {
    // If the wheel has stopped spinning
    stopSpinning();
  }
}

function init() {
  fruits.forEach(drawSector);
  rotate(); // Initial rotation
  engine(); // Start engine
}

const engine = () => {
  frame();
  requestAnimationFrame(engine);
};


init()
spin.addEventListener('click', () => {
  if (!angVel) angVel = rand(2, 1);
});

<div id="wheelOfFortune">
  <canvas id="wheel" width="100" height="100"></canvas>  
  <button id="spin">SPIN</button>
</div>

Answer 2

@koya21很想看到你的解决方案，我能够拼接阵列，但轮子旋转的持续时间在每次旋转后都会减少，我正在使用@Helder Sepulveda的代码