Мобильная версияЯ хочу, чтобы колесо выбора, которое находится сверху, слегка двигалось, как будто оно касается включенных кнопок. колесо, но я не могу это сделать, кто-нибудь может мне помочь?
я приложил код и фото
это мой HTML
Wheel of Fortune
Spin
document.addEventListener('DOMContentLoaded', function() {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.getElementById('raysSvg');
const circle = svg.querySelector('circle');
let rayIdCounter = 0;
function addRay(angle, rotation, duration, width, length, opacity, blur = 0, outer = '#ffc0d1', inner = '#ef1b43') {
const rayId = `ray-${rayIdCounter++}`;
const halfWidth = width / 2;
const points = `100,100 ${100 - halfWidth},${100 - length} ${100 + halfWidth},${100 - length}`;
let gradient = document.createElementNS(svgNS, 'linearGradient');
gradient.id = rayId;
gradient.setAttribute('x1', '0%');
gradient.setAttribute('y1', '100%');
gradient.setAttribute('x2', '0%');
gradient.setAttribute('y2', '0%');
let stop1 = document.createElementNS(svgNS, 'stop');
stop1.setAttribute('offset', '0%');
stop1.setAttribute('style', `stop-color:${inner}; stop-opacity:${opacity}`);
let stop2 = document.createElementNS(svgNS, 'stop');
stop2.setAttribute('offset', '100%');
stop2.setAttribute('style', `stop-color:${outer}; stop-opacity:0`);
gradient.appendChild(stop1);
gradient.appendChild(stop2);
svg.appendChild(gradient);
if (blur > 0) {
let filter = document.createElementNS(svgNS, 'filter');
filter.id = `filter-${rayId}`;
let gaussianBlur = document.createElementNS(svgNS, 'feGaussianBlur');
gaussianBlur.setAttribute('in', 'SourceGraphic');
gaussianBlur.setAttribute('stdDeviation', blur);
filter.appendChild(gaussianBlur);
svg.appendChild(filter);
}
let polygon = document.createElementNS(svgNS, 'polygon');
polygon.setAttribute('fill', `url(#${rayId})`);
polygon.setAttribute('points', points); // Use the points defined above
polygon.classList.add('polygon');
polygon.style.transformOrigin = '100px 100px';
polygon.style.animation = `wiperMotion${angle} ${duration}s 0s infinite alternate ease-in-out`;
polygon.style.transform = `rotate(${angle}deg)`;
polygon.style.filter = blur > 0 ? `url(#filter-${rayId})` : 'none';
svg.insertBefore(polygon, circle);
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `@keyframes wiperMotion${angle} {
from { transform: rotate(${angle - rotation}deg); }
to { transform: rotate(${angle + rotation}deg); }
}`;
document.getElementsByTagName('head')[0].appendChild(style);
}
// (angle, rotation, duration, width, length, opacity, blur = 0, outer = '#FFFFFF', inner = '#FFFFFF')
addRay(0,15,4.2,510,20,0.7,0.2,);
addRay(45,30,8.1,310,20,0.4);
addRay(90,65,12.6,510,20,0.2,0.4,);
addRay(135,20,16.8,510,20,0.5,0.5,);
addRay(170,11,6.1,510,58,0.1,0.2,);
addRay(245,40,9.3,510,83,0.6);
addRay(290,95,20.1,510,60,0.12,0.7,);
addRay(335,25,22.8,510,130,0.3,0.5,);
addRay(152,11,6.3,510,110,0.8,0.8,);
addRay(198,40,11.1,510,50,0.2);
addRay(221,95,20.9,302,70,0.5,0.4,);
addRay(375,25,22.1,200,20,0.7,0.9,);
addRay(20,25,22.8,210,50,0.3,0.5,);
addRay(10,11,6.3,210,30,0.8,0.8,);
addRay(30,40,11.1,110,30,0.2);
addRay(45,95,20.9,102,30,0.5,0.4,);
addRay(360,25,22.1,100,10,0.7,0.9,);
});
это мой JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const spinButton = document.getElementById('spinButton');
const resultDisplay = document.getElementById('result');
const arrow = document.getElementById('arrow');
const toRad = 1 / 180 * Math.PI;
const wheelImage = new Image();
wheelImage.src = './wheel.png';
wheelImage.onload = () => {
ctx.drawImage(wheelImage, 0, 0, canvas.width, canvas.height);
}
// const arrowImage = new Image();
// arrowImage.src = './weel-picker.png';
// arrowImage.onload = () => {
// // Once the arrow image is loaded, draw it at the center of the canvas facing up
// const arrowX = canvas.width / 2 - arrowImage.width / 2;
// const arrowY = canvas.height / 11 - arrowImage.height / 1.5;
// ctx.drawImage(arrowImage, arrowX, arrowY);
// };
const lightsContainer = document.querySelector('.lights');
const numLights = 15; // Adjust number of lights as needed
const delay = 100;
for (let i = 0; i < numLights; i++) {
setTimeout(() => {
const light = document.createElement('div');
light.classList.add('light');
const angle = (360 / numLights) * i;
const x = Math.cos((angle * Math.PI) / 180) * 50 + 47;
const y = Math.sin((angle * Math.PI) / 180) * 50 + 47;
light.style.left = x + '%';
light.style.top = y + '%';
lightsContainer.appendChild(light);
}, i * delay);
}
// const numLights = 24; // Adjust number of lights
// const radius = 80; // Adjust radius of lights
// const delay = 100; // Adjust delay between turning on lights
// for (let i = 0; i < numLights; i++) {
// setTimeout(() => {
// const angle = (i / numLights) * Math.PI * 2;
// const x = Math.cos(angle) * radius + 100; // Adjust position center
// const y = Math.sin(angle) * radius + 100; // Adjust position center
// const light = document.createElement('div');
// light.classList.add('light');
// light.style.left = x + 'px';
// light.style.top = y + 'px';
// lightsContainer.appendChild(light);
// }, i * delay);
// }
const wheel = {
sections: [{
number: 'Prize 1',
color: '#FF4136'
},
{
number: 'Prize 2',
color: '#0074D9'
},
{
number: 'Prize 3',
color: '#2ECC40'
},
{
number: 'Prize 4',
color: '#FFDC00'
},
{
number: 'Prize 5',
color: '#FF851B'
},
{
number: 'Prize 6',
color: '#B10DC9'
},
{
number: 'Prize 7',
color: '#DC9'
},
{
number: 'Prize 8',
color: '#000000'
}
],
centerX: canvas.width / 2,
centerY: canvas.height / 2,
radius: canvas.width / 2,
startAngle: 0,
draw() {
const angle = 360 / this.sections.length;
const textRadius = this.radius / 2; // Adjusted to half the radius for better centering
for (let i = 0; i < this.sections.length; i++) {
const textAngle = angle * i + angle / 2; // Angle to position text at the center of each section
const sectionCenterAngle = this.startAngle + i * angle + angle / 2; // Midpoint angle of the section
const x = this.centerX + Math.cos(sectionCenterAngle * toRad) * textRadius;
const y = this.centerY + Math.sin(sectionCenterAngle * toRad) * textRadius;
ctx.beginPath();
ctx.moveTo(this.centerX, this.centerY);
ctx.arc(this.centerX, this.centerY, this.radius, i * angle * toRad, (i + 1) * angle * toRad);
ctx.closePath();
ctx.fillStyle = this.sections.color;
ctx.fill();
ctx.stroke();
ctx.fillStyle = 'white';
ctx.font = '20px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(this.sections.number, x, y);
}
}
};
let rotationAngle = 0;
let spinning = false;
// let arrowY = canvas.height / 11 - arrowImage.height / 1.5;
let arrowAnimationStep = 1;
function spinWheel() {
if (spinning) return; // Prevent multiple spins
const winningIndex = wheel.sections.findIndex(section => section.number === 'Prize 6');
const finalAngle = (-90 - (360 / wheel.sections.length * winningIndex + Math.random() * ((360 / wheel.sections.length) - 5))) + (360 * (Math.floor(Math.random() * 5) + 5));
resultDisplay.textContent = `You won: Prize 6`;
// Spin animation
spinning = true;
var deceleration = 0.98;
rotationAngle = rotationAngle % 360;
var speed = calculateSpeed(finalAngle, rotationAngle, deceleration);
const spinInterval = () => {
drawWheel(rotationAngle);
if (speed 0.1)
if (Math.abs(current - targetRotationAngle) < 5) {
return trySpeed;
}
trySpeed += 0.1
}
return trySpeed
}
wheel.draw(); // Initial drawing
spinButton.addEventListener('click', spinWheel);
Подробнее здесь: https://stackoverflow.com/questions/784 ... ons-on-the
