1
간단한 행맨 게임을 시도하고 있습니다. 각 잘못된 대답에 대해 곧바로 선을 그립니다. 그러나 모든 행은 브라우저의 마지막에 그려집니다. 어떤 도움이라도 대단히 감사 할 것입니다.HTML 캔버스가 자바 스크립트로 업데이트되지 않습니다.
<!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