<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Wheel of Fortune Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
Konva.angleDeg = false;
var angularVelocity = 6;
var angularVelocities = [];
var lastRotation = 0;
var controlled = false;
var numWedges = 25;
var angularFriction = 0.2;
var target, activeWedge, stage, layer, wheel, pointer;
var finished = false;
function getAverageAngularVelocity() {
var total = 0;
var len = angularVelocities.length;
if (len === 0) {
return 0;
}
for (var n = 0; n < len; n++) {
total += angularVelocities[n];
}
return total / len;
}
function purifyColor(color) {
var randIndex = Math.round(Math.random() * 3);
color[randIndex] = 0;
return color;
}
function getRandomColor() {
var r = 100 + Math.round(Math.random() * 55);
var g = 100 + Math.round(Math.random() * 55);
var b = 100 + Math.round(Math.random() * 55);
return purifyColor([r, g, b]);
}
function getRandomReward() {
var mainDigit = Math.round(Math.random() * 9);
return mainDigit + '\n0\n0';
}
function addWedge(n) {
var s = getRandomColor();
var reward = getRandomReward();
var r = s[0];
var g = s[1];
var b = s[2];
var angle = (2 * Math.PI) / numWedges;
var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
r += 100;
g += 100;
b += 100;
var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';
var wedge = new Konva.Group({
rotation: (2 * n * Math.PI) / numWedges,
});
var wedgeBackground = new Konva.Wedge({
radius: 400,
angle: angle,
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 400,
fillRadialGradientColorStops: [0, startColor, 1, endColor],
fill: '#64e9f8',
fillPriority: 'radial-gradient',
stroke: '#ccc',
strokeWidth: 2,
});
wedge.add(wedgeBackground);
var text = new Konva.Text({
text: reward,
fontFamily: 'Calibri',
fontSize: 50,
fill: 'white',
align: 'center',
stroke: 'yellow',
strokeWidth: 1,
rotation: (Math.PI + angle) / 2,
x: 380,
y: 30,
listening: false,
});
wedge.add(text);
text.cache();
wedge.startRotation = wedge.rotation();
wheel.add(wedge);
}
function animate(frame) {
var angularVelocityChange =
(angularVelocity * frame.timeDiff * (1 - angularFriction)) / 1000;
angularVelocity -= angularVelocityChange;
var shape = stage.getIntersection({
x: stage.width() / 2,
y: 100,
});
if (controlled) {
if (angularVelocities.length > 10) {
angularVelocities.shift();
}
angularVelocities.push(
((wheel.rotation() - lastRotation) * 1000) / frame.timeDiff
);
} else {
var diff = (frame.timeDiff * angularVelocity) / 1000;
if (diff > 0.0001) {
wheel.rotate(diff);
} else if (!finished && !controlled) {
if (shape) {
var text = shape.getParent().findOne('Text').text();
var price = text.split('\n').join('');
alert('Your price is ' + price);
}
finished = true;
}
}
lastRotation = wheel.rotation();
if (shape) {
if (shape && (!activeWedge || shape._id !== activeWedge._id)) {
pointer.y(20);
new Konva.Tween({
node: pointer,
duration: 0.3,
y: 30,
easing: Konva.Easings.ElasticEaseOut,
}).play();
if (activeWedge) {
activeWedge.fillPriority('radial-gradient');
}
shape.fillPriority('fill');
activeWedge = shape;
}
}
}
function init() {
stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
layer = new Konva.Layer();
wheel = new Konva.Group({
x: stage.width() / 2,
y: 410,
});
for (var n = 0; n < numWedges; n++) {
addWedge(n);
}
pointer = new Konva.Wedge({
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 30,
fillRadialGradientColorStops: [0, 'white', 1, 'red'],
stroke: 'white',
strokeWidth: 2,
lineJoin: 'round',
angle: 1,
radius: 30,
x: stage.width() / 2,
y: 33,
rotation: -90,
shadowColor: 'black',
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 2,
shadowOpacity: 0.5,
});
layer.add(wheel);
layer.add(pointer);
stage.add(layer);
wheel.on('mousedown touchstart', function (evt) {
angularVelocity = 0;
controlled = true;
target = evt.target;
finished = false;
});
stage.addEventListener(
'mouseup touchend',
function () {
controlled = false;
angularVelocity = getAverageAngularVelocity() * 5;
if (angularVelocity > 20) {
angularVelocity = 20;
} else if (angularVelocity < -20) {
angularVelocity = -20;
}
angularVelocities = [];
},
false
);
stage.addEventListener(
'mousemove touchmove',
function (evt) {
var mousePos = stage.getPointerPosition();
if (controlled && mousePos && target) {
var x = mousePos.x - wheel.getX();
var y = mousePos.y - wheel.getY();
var atan = Math.atan(y / x);
var rotation = x >= 0 ? atan : atan + Math.PI;
var targetGroup = target.getParent();
wheel.rotation(
rotation - targetGroup.startRotation - target.angle() / 2
);
}
},
false
);
var anim = new Konva.Animation(animate, layer);
setTimeout(function () {
anim.start();
}, 1000);
}
init();
</script>
</body>
</html>
|