Question

我正在创建一个子手游戏，作为开始学习Javascirpt的一种方式。我遇到一个问题，每次我单击“提交”按钮来检查所有变量是否重置的猜测。

在在线编辑器中链接到它。

https://www.w3schools.com/code/tryit.asp?filename=G2UONHRX9JIY

在编辑器上说该文件不存在，但是当我在本地运行该文件时，它会重置。

我认为这与我的表格有关。由于模式验证，我需要使用表单而不是简单的按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hangman Game</title>
</head>
<body>

<canvas id="hangman_canvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas><br><br>
<label id="guess_label"></label><br><br>
<form onsubmit="checkGuess()">
Input a letter: <input type="text" name="input_guess" id="letter_input" pattern="[A-Za-z]{1}" title="Single letter input">
<input type="submit">
</form>

<script>
var canvas = document.getElementById('hangman_canvas');
var ctx = canvas.getContext("2d");
var word = "Hangman";
var correctGuessArray = [];
var status = 0;

for (var i=0; i < word.length; i++) {
    correctGuessArray.push(" _ ");
}

//head, body, leftarm, rightarm, leftleg, rightleg

//Hang Station
ctx.fillStyle = "#919b59";
ctx.fillRect(70,50,10,300); //long upright
ctx.fillRect(70,50,150,10); //top section
ctx.fillRect(25,350,100,10); //bottom
ctx.fillRect(220,50,10,50); //noose
drawStatus();

function checkGuess() {
    var guessInput = document.getElementById("letter_input").value;
    var guessLower = guessInput.toLowerCase();
    for (var i = 0, len = word.length; i < len; i++) {
        if (guessLower === word[i].toLowerCase()) {
            correctGuessArray[i] = word[i];
            drawStatus();
        }
    }
}

function drawStatus() {
    document.getElementById("guess_label").innerText = "";
    for (var a=0; a < correctGuessArray.length; a++) {
        document.getElementById("guess_label").append(correctGuessArray[a]);
    }

    ctx.fillStyle = "#c14b59";
    if (status >= 1) {
        ctx.beginPath();
        ctx.arc(225,130,30,0,2 * Math.PI);
        ctx.stroke();
    }
    if (status >= 2) {
        ctx.fillRect(223, 160, 4, 100);
    }
}

单击时重置Javascript变量

0 个答案: