Question

我做了一个刽子手游戏作为我获得的任务的一部分，尽管我遇到了几个问题：

一个问题是，当我开始一个新游戏时，我不能让画布清晰（它曾经起作用，但我想我搞砸了。）

另一个原因是我不知道如何在隐藏字母标记为_的地方出现正确的字母。

代码相当长，所以我会发布相关部分，但如果你想看到它的实际效果，我已将其发布到jsfiddle。

代码如下：

HTML：

<section class="task">
    <h3>
        Task 4
    </h3>
    <button id=hangmanbtn>Play!</button>
    <div id="hiddenCanvas"></div>
    <p id="lifePool"></p>
    <div id="buttons"></div>
    <div id="hold"></div>
    <canvas id="hangman" height="500px" width="800px"></canvas>
</section>

应该清除画布的Javascript代码。

hangmanbtn.onclick = function(){
    hangman();
};
function hangman () {

    hangmanStyle();
    createbuttons();
    incompleteWord();

/*
*   RESET CANVAS ON NEW GAME
*/   
    var ctx = document.getElementById("hangman").getContext("2d");
    ctx.beginPath();
    ctx.clearRect(0, 0, hangman.width, hangman.height);

/*
*   REMOVE CAVNAS OVERLAY & RESTORE BUTTONS
*/
    hangmanbtn.style.display = "none";
    hiddenCanvas.style.display = "none";
    lifePool.innerHTML = "You have 6 lives";
    document.getElementById("buttons").className = "";

Javascript代码是最大的问题，无法弄清楚如何替换它。我知道这里的问题是

myWord[i].innerHTML = guess;

但我不知道如何解决它。

function wordOnClick() {

    var guess = this.innerHTML;
    this.className = "active";
    this.onclick = null;
    for (var i=0; i<saveWord.length; i++) {
        if (saveWord[i] === guess) {
            myWord[i].innerHTML = guess;
            var bool = true;
            winCounter++;

        }
    }
    if (bool != true) {
        counter --;
        animateMan();

    }
    if (counter === 0) {
        document.getElementById("buttons").className = "active";

    }
    if (winCounter === saveWord.length) {
        lifePool.innerHTML = "Congratz, you've won!";
        hangmanbtn.style.display = "inherit";

    }
}

如果您需要我发布任何其他代码块，请告诉我。

谢谢你们！

Answer 1

您应该像这样重置：

/*
*   RESET CANVAS ON NEW GAME
*/   
    var canvas = document.getElementById("hangman");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();

几个问题在我的刽子手游戏中

1 个答案: