从命运之轮中删除值

Question

我从这里使用了 Roco K. Bullian 的命运之轮代码：how to draw a wheel of fortune?

我是使用 canvas 的新手，但我已经了解了代码的大部分功能 - 数学显然不是我的强项！

我正在努力添加这样的功能，即当轮子停止旋转并落在切片上时，我怎样才能完全移除它或更改切片的颜色并停止轮子再次落在它上面？这可能吗？

提前感谢您的answers/advice！

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>

从命运之轮中删除值

Remove the value from the wheel of fortune

html

javascript

canvas

html5-canvas