如何在停止后重新旋转下面的滚轮。有一天，我无法弄明白。
我创建了一个resetWheel函数，一旦完全停止，它就会重置轮子。一旦车轮被锁定并停止，我尝试插入它，但它拒绝与我合作。提前感谢您的反馈和帮助。随意添加到我现有的代码，因为我还是相当新的，任何建议都很好！
function rand(min, max) {
return Math.random() * (max - min) + min;
}
var color = ['#6897bb', '#6dc066', '#f67f5c', '#cc5466', '#e6e6fa', '#fbc', '#f88', "#fbc", "#f67"];
var label = ['5', '3', '2', '1', '15', '6', '10', '0', "20", '0'];
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width / 2; // center
var isStopped = false;
var lock = false;
var logged = false;
let totalScore = 0;
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function drawSlice(deg, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
function drawText(deg, text) {
ctx.save();
ctx.translate(center, center);
ctx.rotate(deg2rad(deg));
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = 'bold 30px sans-serif';
ctx.fillText(text, 130, 10);
ctx.restore();
}
function drawImg() {
ctx.clearRect(0, 0, width, width);
for (var i = 0; i < slices; i++) {
drawSlice(deg, color[i]);
drawText(deg + sliceDeg / 2, label[i]);
deg += sliceDeg;
}
}
drawImg();
function resetWheel() {
(anim());
}
startSpin.addEventListener("click", function anim() {
deg += speed;
deg %= 360;
// Increment speed
if (!isStopped && speed < 3) {
speed = speed + 1 * 0.1;
}
// Decrement Speed
if (isStopped) {
if (!lock) {
lock = true;
slowDownRand = rand(0.959, 0.998);
}
speed = speed > 0.2 ? speed *= slowDownRand : 0;
}
if (lock && !speed) {
var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
ai = (slices + ai) % slices; // Fix negative index
let score = label[ai];
if (!logged) {
console.log(score);
totalScore = totalScore + score;
console.log(totalScore)
logged = true;
}
}
drawImg();
window.requestAnimationFrame(anim);
});
document.getElementById("stopSpin").addEventListener("mousedown", function() {
isStopped = true;
//setTimeout(loadPhrase, 2000); //waits for wheel to stop, then starts function
}, false);#wheel {
display: block;
text-align: center;
overflow: hidden;
}
#wheel:after {
content: "";
background: red;
border: 2px solid white;
position: absolute;
top: -7px;
left: 50%;
width: 10px;
height: 10px;
margin-left: -7px;
transform: rotate(45deg)
} <div id="gameScreen">
<div id="wheel">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<br>
<button id="startSpin">Spin!</button>
<button id="stopSpin">Stop!</button>
<div id="gameWrapper">
<h1 id="game_header">Guess The Correct Letters</h1>
<div id="display">
</div>
</div>
</div>
答案 0 :(得分：1)
有一天我无法弄明白。
Oof在个人层面打击了我
无论如何，您没有将isStopped设置为false，因此您的滚轮也不会旋转，您的anim()功能也无法在代码中的任何其他位置访问，因此您的重置功能无法看到它
JS
function rand(min, max) {
return Math.random() * (max - min) + min;
}
var color = ['#6897bb', '#6dc066', '#f67f5c', '#cc5466', '#e6e6fa', '#fbc', '#f88', "#fbc", "#f67"];
var label = ['5', '3', '2', '1', '15', '6', '10', '0', "20", '0'];
var slices = color.length;
var sliceDeg = 360 / slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width / 2; // center
var isStopped = false;
var lock = false;
var logged = false;
let totalScore = 0;
function deg2rad(deg) {
return deg * Math.PI / 180;
}
function drawSlice(deg, color) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
function drawText(deg, text) {
ctx.save();
ctx.translate(center, center);
ctx.rotate(deg2rad(deg));
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = 'bold 30px sans-serif';
ctx.fillText(text, 130, 10);
ctx.restore();
}
function drawImg() {
ctx.clearRect(0, 0, width, width);
for (var i = 0; i < slices; i++) {
drawSlice(deg, color[i]);
drawText(deg + sliceDeg / 2, label[i]);
deg += sliceDeg;
}
}
function anim() {
deg += speed;
deg %= 360;
// Increment speed
if (!isStopped && speed < 3) {
speed = speed + 1 * 0.1;
}
// Decrement Speed
if (isStopped) {
if (!lock) {
lock = true;
slowDownRand = rand(0.959, 0.998);
}
speed = speed > 0.2 ? speed *= slowDownRand : 0;
}
if (lock && !speed) {
var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
ai = (slices + ai) % slices; // Fix negative index
let score = label[ai];
if (!logged) {
console.log(score);
totalScore = totalScore + score;
console.log(totalScore)
logged = true;
}
}
drawImg();
window.requestAnimationFrame(anim);
}
drawImg();
function resetWheel() {
if(isStopped){
isStopped = false;
anim();
}
}
startSpin.addEventListener("click", anim);
document.getElementById("stopSpin").addEventListener("mousedown", function() {
isStopped = true;
//setTimeout(loadPhrase, 2000); //waits for wheel to stop, then starts function
}, false)
document.getElementById("restartSpin").addEventListener("click",resetWheel);
HTML（我添加了一个重启按钮）
<div id="gameScreen">
<div id="wheel">
<canvas id="canvas" width="300" height="300"></canvas>
</div>
<br>
<button id="startSpin">Spin!</button>
<button id="stopSpin">Stop!</button>
<button id="restartSpin">Restart</button>
<div id="gameWrapper">
<h1 id="game_header">Guess The Correct Letters</h1>
<div id="display">
</div>
</div>
</div>