我正在使用库创建一个旋转轮 This is link to it 我想做的是为玩家添加旋转“否”的选项。次并得到NO。一次获得奖品。所以只需点击一下，他就会得到“否”。奖品，并且游戏中已经提供了一次旋转 1 奖品的正常选项
所以，我想到重复多次旋转轮盘并显示多个奖品的功能，但我不知道该怎么做。如果有人知道我该如何做到这一点。
应该重复的函数是startspin()
然后单击“NO”按钮。旋转它应该产生NO。奖品
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<html>
<head>
<title>HTML5 Canvas Winning Wheel</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>
<body>
<div align="center">
<br />
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin();" />
<br /><br />
<a href="#" onClick="resetWheel(); return false;">Play Again</a><br /> (reset)
<br>
</div>
</td>
<td width="438" height="582" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
</div>
<script>
// Create new wheel object specifying the parameters at creation time.
let theWheel = new Winwheel({
'numSegments' : 8, // Specify number of segments.
'outerRadius' : 212, // Set outer radius so wheel fits inside the background.
'textFontSize' : 28, // Set font size as desired.
'segments' : // Define segments including colour and text.
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' : // Specify the animation to use.
{
'type' : 'spinToStop',
'duration' : 5, // Duration in seconds.
'spins' : 8, // Number of complete spins.
'callbackFinished' : alertPrize
}
});
// Vars used by the code in this page to do power controls.
let wheelPower = 0;
let wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel)
{
// Ensure that power can't be changed while wheel is spinning.
if (wheelSpinning == false) {
// Reset all to grey incase this is not the first time the user has selected the power.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1) {
document.getElementById('pw1').className = "pw1";
}
if (powerLevel >= 2) {
document.getElementById('pw2').className = "pw2";
}
if (powerLevel >= 3) {
document.getElementById('pw3').className = "pw3";
}
// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;
// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin()
{
// Ensure that spinning can't be clicked again while already running.
if (wheelSpinning == false) {
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
// to rotate with the duration of the animation the quicker the wheel spins.
if (wheelPower == 1) {
theWheel.animation.spins = 3;
} else if (wheelPower == 2) {
theWheel.animation.spins = 8;
} else if (wheelPower == 3) {
theWheel.animation.spins = 15;
}
// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "spin_off.png";
document.getElementById('spin_button').className = "";
// Begin the spin animation by calling startAnimation on the wheel object.
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}
// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
function resetWheel()
{
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
theWheel.draw(); // Call draw to render changes to the wheel.
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
// -------------------------------------------------------
function alertPrize(indicatedSegment)
{
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("You have won " + indicatedSegment.text);
}
</script>
</body>
</html>**更新代码**
// Create new wheel object specifying the parameters at creation time.
var number_of_spin=0;
let theWheel = new Winwheel({
'numSegments' : 8, // Specify number of segments.
'outerRadius' : 212, // Set outer radius so wheel fits inside the background.
'textFontSize' : 28, // Set font size as desired.
'segments' : // Define segments including colour and text.
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' : // Specify the animation to use.
{
'type' : 'spinToStop',
'duration' : 5, // Duration in seconds.
'spins' : 8, // Number of complete spins.
'callbackFinished' : alertPrize
}
});
// Vars used by the code in this page to do power controls.
let wheelPower = 0;
let wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin()
{
// Ensure that spinning can't be clicked again while already running.
if (wheelSpinning == false) {
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
// to rotate with the duration of the animation the quicker the wheel spins.
// Begin the spin animation by calling startAnimation on the wheel object.
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}
function startSpin2()
{
// Ensure that spinning can't be clicked again while already running.
if (wheelSpinning == false) {
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
// to rotate with the duration of the animation the quicker the wheel spins.
number_of_spin++;
if(number_of_spin>0){
theWheel.animation.duration=0;
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
else if (number_of_spin>=5){theWheel.animation.duration=5;
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;}
// Begin the spin animation by calling startAnimation on the wheel object.
}
}
// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
function resetWheel()
{
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
theWheel.draw(); // Call draw to render changes to the wheel.
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters
// note the indicated segment is passed in as a parmeter as 99% of the time you will want to know this to inform the user of their prize.
// -------------------------------------------------------
function alertPrize(indicatedSegment)
{
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("You have won " + indicatedSegment.text);
}
最佳答案
您可以使用内置的callbackFinished在第一次旋转后删除动画，并在剩余的四次旋转后重置它(应该是瞬时的)。
因此，将整数变量 number_of_spins 设置为 0，并在每次旋转后递增 1。
现在，每次旋转时，检查:
if(number_of_spins > 0)然后将animation.duration设置为0else if(number_of_spins >= 5)将animation.duration重置为其默认值。
这是如何完成的:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Winning Wheel</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="Winwheel.js"></script>
</head>
<body>
<div align="center">
<br />
<br />
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="spin_off.png" alt="Spin" onClick="startSpin(1);" />
<br /><br />
<a href="#" onClick="resetWheel(); return false;">Play Again</a><br /> (reset)
<br>
<button onclick="startSpin(5)">5 spin</button>
</div>
</td>
<td width="438" height="582" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
</div>
<script>
// Create new wheel object specifying the parameters at creation time.
let theWheel = new Winwheel({
'numSegments' : 8, // Specify number of segments.
'outerRadius' : 212, // Set outer radius so wheel fits inside the background.
'textFontSize' : 28, // Set font size as desired.
'segments' : // Define segments including colour and text.
[
{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
],
'animation' : // Specify the animation to use.
{
'type' : 'spinToStop',
'duration' : 5, // Duration in seconds.
'spins' : 8, // Number of complete spins.
'callbackFinished' : alertPrize
}
});
// Vars used by the code in this page to do power controls.
let wheelPower = 0;
let wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel)
{
// Ensure that power can't be changed while wheel is spinning.
if (wheelSpinning == false) {
// Reset all to grey incase this is not the first time the user has selected the power.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1) {
document.getElementById('pw1').className = "pw1";
}
if (powerLevel >= 2) {
document.getElementById('pw2').className = "pw2";
}
if (powerLevel >= 3) {
document.getElementById('pw3').className = "pw3";
}
// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;
// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin(how_many_prizes)
{
how_many_prizes = Math.min(how_many_prizes, theWheel.numSegments);
theWheel.how_many_prizes = how_many_prizes;
// Ensure that spinning can't be clicked again while already running.
if (wheelSpinning == false) {
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
// to rotate with the duration of the animation the quicker the wheel spins.
if (wheelPower == 1) {
theWheel.animation.spins = 3;
} else if (wheelPower == 2) {
theWheel.animation.spins = 8;
} else if (wheelPower == 3) {
theWheel.animation.spins = 15;
}
// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "spin_off.png";
document.getElementById('spin_button').className = "";
// Begin the spin animation by calling startAnimation on the wheel object.
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}
// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
function resetWheel()
{
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
theWheel.draw(); // Call draw to render changes to the wheel.
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
let number_of_spins = 0;
let prizes = new Set();
const animation_time = 0;
function alertPrize(indicatedSegment)
{
how_many_prizes = theWheel.how_many_prizes || 1;
prizes.add(indicatedSegment.text);
number_of_spins = prizes.size;
if(number_of_spins > 0 && number_of_spins < how_many_prizes-1) {
theWheel.animation.spins = 1;
theWheel.animation.duration = animation_time;
setTimeout(() => {
theWheel.startAnimation();
theWheel.spinning = true;
}, animation_time*1000);
}
else if(number_of_spins == how_many_prizes-1) {
theWheel.animation.duration = animation_time*2.35;
theWheel.startAnimation();
theWheel.spinning = true;
}
else if(number_of_spins == how_many_prizes) {
theWheel.animation.duration = 5;
output_prizes();
reset_everything();
return;
}
}
function output_prizes() {
console.log("Here are your prizes: ");
console.log(prizes);
}
function reset_everything() {
number_of_spins = 0;
prizes = new Set();
theWheel.spinning = false;
theWheel.animation.spins = 8;
theWheel.animation.duration = 5;
}
</script>
</body>
</html>
PS:该脚本仅使用 JS Set()s 给每个奖品一次。
关于javascript - 如何让一个函数在点击时多次出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68034149/