1
単純なハングマンゲームを試していますが、間違った答えごとにすぐに線を描いています。しかし、すべての行はブラウザの最後に描画されます。どんな助けでも大歓迎です。HTMLキャンバスがJavascriptで更新されない
<!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>
のない明白な重複[どのようにHTML5キャンバスレンダリングが終了すると、私は知っていますか？]（http://stackoverflow.com/questions/ 41346772/how-do-i-know-when-html5-canvas-rendering-is-finished）（別の症状、同じ原因） – Kaiido