Reputation: 11

HTML Canvas not updating with Javascript

I am attempting to do a simple Hangman game, with lines being drawn straightaway for each wrong answer. However, all the lines only get drawn right at the end in the browser. Any help would be much appreciated. Here is my code:

<!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>

Upvotes: 1

Answers (2)

Roljhon

Reputation: 1339

Sorry, I don't have enough reputation to post this in the comment area. The issue is because you're using a prompt in getting the input from the user which will block the DOM to load. Take note that alert and prompt will pause the DOM to load until response.

Upvotes: 1

Bharatsing Parmar

Reputation: 2455

You can check output as per your need at fiddle jsfiddle.net/bharatsing/e36werp8/1/

$(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.");
                }
              }
            }

        });

Upvotes: 0

HTML Canvas not updating with Javascript

Answers (2)

Related Questions