Question

如何在停止后重新旋转下面的滚轮。有一天，我无法弄明白。

我创建了一个resetWheel函数，一旦完全停止，它就会重置轮子。一旦车轮被锁定并停止，我尝试插入它，但它拒绝与我合作。提前感谢您的反馈和帮助。随意添加到我现有的代码，因为我还是相当新的，任何建议都很好！

＆＃13;

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);

＆＃13;

#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)
}

＆＃13;

    <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>

＆＃13;

Answer 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>

完全停止后重新旋转车轮

1 个答案: