我正在尝试做一个简单的绞刑吏游戏，为每个错误答案直接画线。但是，所有线条仅在浏览器的末尾绘制。任何帮助将非常感激。 这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Hangman</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<H1 id="heading">Hangman</H1>
<p id="someText">Thanks for playing!</p>
<canvas id="hangmanArea" width="200" height="200"></canvas>
<script type="text/javascript">
$(window).on('load',function(){
//draw hung man function
var drawHangman = function(numWrongs){
var eltHangmanArea = document.getElementById("hangmanArea");
var ctxHangmanArea = eltHangmanArea.getContext("2d");
ctxHangmanArea.strokeStyle = "Black";
ctxHangmanArea.lineWidth = 4;
ctxHangmanArea.beginPath();
if (numWrongs===0){
ctxHangmanArea.clearRect(0,0,200,200);
} else if (numWrongs===1){
ctxHangmanArea.moveTo(20,180);
ctxHangmanArea.lineTo(20,20);
} else if (numWrongs===2){
ctxHangmanArea.moveTo(20,20);
ctxHangmanArea.lineTo(100,20);
} else if (numWrongs===3){
ctxHangmanArea.moveTo(100,20);
ctxHangmanArea.lineTo(100,40);
} else if (numWrongs===4){
ctxHangmanArea.moveTo(120,60);
ctxHangmanArea.arc(100,60,20,0,Math.PI*2,false);
} else if (numWrongs===5){
ctxHangmanArea.moveTo(100,80);
ctxHangmanArea.lineTo(100,120);
} else if (numWrongs===6){
ctxHangmanArea.moveTo(80,100);
ctxHangmanArea.lineTo(120,100);
} else if (numWrongs===7){
ctxHangmanArea.moveTo(100,120);
ctxHangmanArea.lineTo(80,140);
} else if (numWrongs===8){
ctxHangmanArea.moveTo(100,120);
ctxHangmanArea.lineTo(120,140);
}
ctxHangmanArea.stroke();
};
//Word bank
var wordBank = ["abc","def","ghi"];
//Setting parameters
var targetWord =
wordBank[Math.floor(Math.random()*wordBank.length)];
var numLetters = targetWord.length;
var maxNumTries = 8;
var hiddenLetter = "_";
//Trial loop
var gotItFlag = false;
var gotSomethingFlag = false;
var tryCounter = 0;
var tryLetter = null;
var hiddenWord = [];
for(var letterCounter = 0; letterCounter<numLetters;letterCounter++){
hiddenWord.push(hiddenLetter);
}
drawHangman(0); /*clear canvas*/
while(gotItFlag===false && tryCounter<maxNumTries){
tryLetter = prompt("Word: " + hiddenWord.join(" ") + ". Please input next guess! You have " +
String( maxNumTries - tryCounter) + " more tries.");
if (!(tryLetter===null)) {
//only go on if user actually put something in
tryLetter = tryLetter.slice(0,1);
tryLetter = tryLetter.toLowerCase();
gotItFlag = true;
gotSomethingFlag = false;
for(var letterCounter = 0; letterCounter<numLetters; letterCounter++){
if (tryLetter === targetWord[letterCounter].toLowerCase()) {
hiddenWord[letterCounter] = targetWord[letterCounter];
gotSomethingFlag = true;
}
if (hiddenWord[letterCounter] === hiddenLetter) {
gotItFlag = false;
}
}
tryLetter = null;
if (gotSomethingFlag === false) {
tryCounter++;
drawHangman(tryCounter);
}
}
}
if (gotItFlag) {
alert("You have got the word, " + targetWord + ". Well done!");
} else {
alert("You have lost. It was " + targetWord + ". Better luck next time.");
}
});
</script>
</body>
</html>
最佳答案
抱歉，我没有足够的声誉，无法在评论区发布此内容。问题是因为您使用提示来获取用户的输入，这将阻止 DOM 加载。请注意，alert 和 prompt 将暂停 DOM 加载，直到响应。
关于javascript - HTML Canvas 未使用 Javascript 进行更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41406908/