www.webdeveloper.com
Results 1 to 5 of 5

Thread: Text based game in Javascript NEED HELP!

  1. #1
    Join Date
    Aug 2013
    Posts
    2

    Question Text based game in Javascript NEED HELP!

    Hey guys, so i was on the Codecademy site learning Javascript and i was up to the Dragon Slayer game project. When i completed it i decided to take it further and this is what i've got so far:

    (Scroll to bottom for my question)

    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    </head>
    <body>
    
    <script type="text/javascript">
    var slaying = true;
    
    var youHit = Math.floor(Math.random() * 3); // decides how often the player will hit the dragon
    var damageDealt = Math.floor(Math.random() * 4 + 1); // calculates how much damage will be dealt to dragon if hit
    var totalDamageToDragon = 0;
    
    var playerHP = 10; // Starting HP for the player
    
    var dragonHit = Math.floor(Math.random() * 1.5); // decides how often the dragon will hit the player
    var damageTaken = Math.floor(Math.random() * 6 + 2); // calculates how much damage player will take if hit
    var totalDamageTaken = 0;
    
    while(slaying){ // same as slaying === true or saying slaying === 1
        if(youHit){	// and again same as youHit === true or youHit === 1
            document.write("You slashed at the dragon and dealt " + damageDealt + " damage! Nice work! <br>");
            
    		totalDamageToDragon += damageDealt;
            damageDealt = Math.floor(Math.random() * 4 + 1); // resets the variable damageDealt
    
            if(totalDamageToDragon >=  20){
                document.write("With that final hit, you slew the mighty dragon! You truly are a great warrior!");
                slaying = false;
            }
            else{
                document.write("The intense battle rages on! <br>");
    			youHit = Math.floor(Math.random() * 4); // resetting the youHit variable
            }
        }
        else if(dragonHit){
            
    		totalDamageTaken =+ damageTaken;
    		playerHP = playerHP - totalDamageTaken;
    		
    		if(playerHP > 0){
    			document.write("You fail to evade the dragon's powerful claws, and it deals " damageTaken + " damage to you! You currently have " + playerHP + " HP left. <br>");
    
    			dragonHit = Math.floor(Math.random() * 1.5); // resets the dragonHit variable
    			damageTaken = Math.floor(Math.random() * 6 + 2); // resets the damageTaken variable
    		}
    		else{
    			document.write("With the dragon's final attack you fall to the ground, defeated. Before you can muster enough strength to rise, the dragon incinerates you with it's fiery breath and devours you. Sorry, but you lose - Try Again.");
    			slaying = false;
    		}
        }
    	else{
    		document.write("In the intense battle both your and the dragon's attacks miss each other! <br>");
    	}
    }
    </script>
    
    
    </body>
    </html>
    My problem is that this won't run when i try it in my main browser (i use Chrome) or IE, so it must be a syntax error or some error on my part. Only thing is i can't seem to find it

    Where could i have gone wrong? Any constructive tips or any relevance info is welcome, thank you guys!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432
    What does the error console of chrome contain?

    And, you may want to reconsider the use of document.write in your script.

  3. #3
    Join Date
    Aug 2013
    Posts
    2
    Quote Originally Posted by JMRKER View Post
    What does the error console of chrome contain?

    And, you may want to reconsider the use of document.write in your script.
    Oh if you mean the Javascript Console then i got this:

    "Uncaught SyntaxError: Unexpected identifier"

    What indentifier could they be talking about? I can't find it lol. Therefore when i run this in Chrome i get nothing but a blank page.

    As for the document.write() what should i use instead? Maybe console.log() or maybe return?

    I'm kind of a newbie if you haven't already guessed haha

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432
    It usually includes a line number. Is it not there?

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,432

    Lightbulb

    This version at least displays something.
    Your original problem was this line:
    Code:
      document.write("You fail to evade the dragon's powerful claws, and it deals " damageTaken + " damage to you! You currently have " + playerHP + " HP left. <br>");
    See if you can determine what it was.

    After that, I believe your game logic is messed up, so this is only a guess as to what you are trying to do.
    But with these changes you can see the variable assignments
    as you pass through each loop of the game with the alert message.

    Note the substitution for the document.write statements.
    Even if you had the logic correct,
    using document.write would reload the page to the original status every time it was executed.

    Now use this to evaluate your variables and fix your variable assignments and logic tests.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <div id="gameAction"></div>
    <button onclick="play()">One pass</button>
    
    <script type="text/javascript">
    var $d = document.getElementById('gameAction');
    
    var slaying = true;
    
    var youHit = Math.floor(Math.random() * 3); // decides how often the player will hit the dragon
    var damageDealt = Math.floor(Math.random() * 4 + 1); // calculates how much damage will be dealt to dragon if hit
    var totalDamageToDragon = 0;
    
    var playerHP = 10; // Starting HP for the player
    
    var dragonHit = Math.floor(Math.random() * 1.5); // decides how often the dragon will hit the player
    var damageTaken = Math.floor(Math.random() * 6 + 2); // calculates how much damage player will take if hit
    var totalDamageTaken = 0;
    
    var Stats = [ ];  var checkAction;  // for testing purposes only
    function play() {
      Stats = [];
      Stats.push(slaying);
      Stats.push('\nyouHit & damage:\n'+youHit);
      Stats.push(totalDamageTaken);
      Stats.push('\ndragonHit & damage\n:'+dragonHit);
      Stats.push(totalDamageToDragon);
      Stats.push('\nplayerHP:'+playerHP);
      alert(Stats.join('\n'));
    
    // while (slaying) { // same as slaying === true or saying slaying === 1  // replace logic after testing
      $d.innerHTML += '<p>';
      if (youHit) {	// and again same as youHit === true or youHit === 1
        $d.innerHTML += "You slashed at the dragon and dealt " + damageDealt + " damage! Nice work! <br>";
            
        totalDamageToDragon += damageDealt;
        damageDealt = Math.floor(Math.random() * 4 + 1); // resets the variable damageDealt
    
        if (totalDamageToDragon >=  20 ){
          $d.innerHTML += "With that final hit, you slew the mighty dragon! You truly are a great warrior!";
          slaying = false;
        } else {
          $d.innerHTML += "The intense battle rages on! <br>";
          youHit = Math.floor(Math.random() * 4); // resetting the youHit variable
        }
      }
      if (dragonHit) {
        totalDamageTaken =+ damageTaken;
        playerHP = playerHP - totalDamageTaken;
        if (playerHP > 0) {
          $d.innerHTML += "You fail to evade the dragon's powerful claws, and it deals " + damageTaken + " damage to you!";
          $d.innerHTML += " You currently have " + playerHP + " HP left. <br>";
          dragonHit = Math.floor(Math.random() * 1.5); // resets the dragonHit variable
          damageTaken = Math.floor(Math.random() * 6 + 2); // resets the damageTaken variable
        } else {
          $d.innerHTML += "With the dragon's final attack you fall to the ground, defeated. ";
          $d.innerHTML += "Before you can muster enough strength to rise, the dragon incinerates you with it's fiery breath and devours you. ";
          $d.innerHTML += "Sorry, but you lose - Try Again.";
          slaying = false;
        }
      }
      if (!youHit && !dragonHit) {
        $d.innerHTML += "In the intense battle both your and the dragon's attacks miss each other! <br>";
      }
    // }
    }
    
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles