HTML画布未使用Javascript更新
我试图做一个简单的刽子手游戏，每一个错误的答案都会被直接画出来。但是，所有直线仅在浏览器的末尾绘制。任何帮助都将不胜感激。 这是我的密码：HTML画布未使用Javascript更新,javascript,jquery,canvas,Javascript,Jquery,Canvas,我试图做一个简单的刽子手游戏，每一个错误的答案都会被直接画出来。但是，所有直线仅在浏览器的末尾绘制。任何帮助都将不胜感激。 这是我的密码： <!DOCTYPE html> <html> <head> <title>Hangman</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></
<!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>
刽子手
刽子手
感谢您的参与
$（窗口）.on（'load'，function（）{
//拉赫曼函数
var drawHangman=函数（numWrongs）{
var eltangmanarea=document.getElementById（“hangmanArea”）；
var ctxHangmanArea=eltangmanarea.getContext（“2d”）；
ctxHangmanArea.strokeStyle=“黑色”；
ctxHangmanArea.lineWidth=4；
ctxHangmanArea.beginPath（）；
如果（numWrongs==0）{
ctxHangmanArea.clearRect（0,0200200）；
}else if（numWrongs==1）{
ctxHangmanArea.moveTo（20180）；
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，数学PI*2，假）；
}else if（numWrongs==5）{
ctxHangmanArea.moveTo（100,80）；
ctxHangmanArea.lineTo（100120）；
}else if（numWrongs==6）{
ctxHangmanArea.moveTo（80100）；
ctxHangmanArea.lineTo（120100）；
}else if（numWrongs==7）{
ctxHangmanArea.moveTo（100120）；
ctxHangmanArea.lineTo（80140）；
}else if（numWrongs==8）{
ctxHangmanArea.moveTo（100120）；
ctxHangmanArea.lineTo（120140）；
}
ctxHangmanArea.stroke（）；
};
//词库
变量wordBank=[“abc”、“def”、“ghi”]；
//设置参数
var targetWord=
wordBank[Math.floor（Math.random（）*wordBank.length）]；
var numLetters=targetWord.length；
var maxNumTries=8；
var hiddenLetter=“25;”；
//试验回路
var gotItFlag=false；
var gotSomethingFlag=false；
var tryCounter=0；
var-tryLetter=null；
var hiddenWord=[]；
对于（var letterCounter=0；letterCounter抱歉，我没有足够的声誉在评论区发布此消息。问题是因为您使用提示从用户处获取输入，这将阻止加载DOM。请注意，警报和提示将暂停加载DOM，直到响应。您可以检查输出根据您的需要在小提琴
$（文档）.ready（函数（）{
//拉赫曼函数
var drawHangman=函数（numWrongs）{
var eltangmanarea=document.getElementById（“hangmanArea”）；
var ctxHangmanArea=eltangmanarea.getContext（“2d”）；
ctxHangmanArea.strokeStyle=“黑色”；
ctxHangmanArea.lineWidth=4；
ctxHangmanArea.beginPath（）；
如果（numWrongs==0）{
ctxHangmanArea.clearRect（0,0200200）；
}else if（numWrongs==1）{
ctxHangmanArea.moveTo（20180）；
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，数学PI*2，假）；
}else if（numWrongs==5）{
ctxHangmanArea.moveTo（100,80）；
ctxHangmanArea.lineTo（100120）；
}else if（numWrongs==6）{
ctxHangmanArea.moveTo（80100）；
ctxHangmanArea.lineTo（120100）；
}else if（numWrongs==7）{
ctxHangmanArea.moveTo（100120）；
ctxHangmanArea.lineTo（80140）；
}else if（numWrongs==8）{
ctxHangmanArea.moveTo（100120）；
ctxHangmanArea.lineTo（120140）；
}
ctxHangmanArea.stroke（）；
设置超时（AskAnswer，1000）；
};
//词库
变量wordBank=[“abc”、“def”、“ghi”]；
//设置参数
var targetWord=
wordBank[Math.floor（Math.random（）*wordBank.length）]；
var numLetters=targetWord.length；
var maxNumTries=8；
var hiddenLetter=“25;”；
//试验回路
var gotItFlag=false；
var gotSomethingFlag=false；
var tryCounter=0；
var-tryLetter=null；
var hiddenWord=[]；
对于（var letterCounter=0；letterCounter）这似乎是一个正确的答案，您可能希望通过对发生的事情进行一些解释来改进它，而不是道歉，让它看起来像一条评论。很抱歉，@kai没有明显的重复（不同的症状，相同的原因）
$(document).ready(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();
setTimeout(AskAnswer,1000);
};
//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*/
function AskAnswer(){
if(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)
}
else{
setTimeout(AskAnswer,1000);
}
}
}
if((maxNumTries - tryCounter)==0){
if (gotItFlag) {
alert("You have got the word, " + targetWord + ". Well done!");
} else {
alert("You have lost. It was " + targetWord + ". Better luck next time.");
}
}
}
});