Why not draw a hangman after each error, but only after the end of the game, when the word is guessed or run out of attempts?

can be alert block canvas? But how to fix if so.
<!DOCTYPE html>
<html>
the <head>
<meta charset="UTF-8">
<title>Виселица2</title>
</head>
the <body>
<h1>Hangman</h1>
<canvas id='canvas' width='400' height='400'></canvas>
the <script>
 'use strict'


 function drawMan(sumProbe) {
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');

 if (sumProbe == 5) {
 ctx.lineWidth = 4;
 ctx.strokeRect(200, 10, 20, 20);
 } else if (sumProbe == 4) {
ctx.beginPath();
 ctx.moveTo(210, 30);
 ctx.lineTo(210, 80);
ctx.stroke();
 } else if (sumProbe == 3) {
ctx.beginPath();
 ctx.moveTo(210, 50);
 ctx.lineTo(180, 40);
ctx.stroke();
 } else if (sumProbe == 2) {
ctx.beginPath();
 ctx.moveTo(210, 50);
 ctx.lineTo(240, 40);
ctx.stroke();
 } else if (sumProbe == 1) {
ctx.beginPath();
 ctx.moveTo(210, 80);
 ctx.lineTo(180, 120);
ctx.stroke();
 } else if (sumProbe == 0) {
ctx.beginPath();
 ctx.moveTo(210, 80);
 ctx.lineTo(240, 120);
ctx.stroke();
};
}

 let words = [
//'program',
'macaque',
//'fine'
//'pancake',
'mA'
//'variable',
'word'
];

 function pickWord() {
 return words[Math.floor(Math.random()*words.length)];
 } 
 let word = pickWord();


 setupAnswerArray function(word) {
 let answerArray = [];
 for (let i = 0; i < word.length; i++) {
 answerArray[i] = '_';
}
 return answerArray;
}
 let answerArray = setupAnswerArray(word);


 let remainingLetters = word.length;
 let sumProbe = 6;
 showPlayerProgress function(answerArray) {
 alert(answerArray.join(' '));
}



 while (remainingLetters > 0 && sumProbe > 0) {

showPlayerProgress(answerArray);

 function getGuess() {
 return prompt('Guess a letter or press Cancel to exit 
game');

}
 let quess = getGuess();


 if (quess === null) {
break;
}
 else if (quess.length !== 1) {
 alert('Please enter a single letter');
 } else {

 function updateGameState(quess, word, answerArray) {
 let appearances = 0;
 for (let j = 0; j < word.length; j++) {
 if ( word[j] === quess.toLowerCase() &&
 answerArray[j] === '_' ) {
 answerArray[j] = quess.toLowerCase();
appearances++;

}
}
 return appearances;
}

 let correctGuesses = updateGameState(quess, word, answerArray);
 remainingLetters -= correctGuesses;
 if (correctGuesses === 0) {

 sumProbe--; 

}
}
 drawMan(sumProbe); 
}

 function total(answerArray) {
showPlayerProgress(answerArray);
 alert('Well, the word was '+ word);
}
total(answerArray);


</script>

</body>
</html>
April 7th 20 at 10:53
0 answer

Find more questions by tags JavaScript