#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0

    Battle simulator problems!


    I'm having a lot of problems trying to learn Javascript. I don't understand how I can select different character classes to fight. Here so far is the code:



    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Register</title>
            <!--[if IE]>
                <script src="(URL address blocked: See forum rules)"></script>
            <![endif]-->
            <link href="CSS/styles.css" type="text/css" rel="stylesheet" />
    
        <script type="text/javascript">
        	
    var monsters = {
    
    
      reaper : { hitpoints: 250, strength : 17, luck : 3 },
    
    
      dragon : { hitpoints: 1000, strength: 50, luck : 5},
      
      orc : { hitpoints: 100, strength: 12, luck : 2 },
      
      ogre: { hitpoints: 50, strength: 10, luck: 1 }
      
    
    
    }
    
    
    	
    	
    	function startFight()
        {
            charFightHP = charHP;
            beastFightHP = beastHP;
            fightTrue = 1;
            charDmg = charStr - beastDef;
            beastDmg = beastStr - charDef;
            beastName = document.getElementById("theBName").innerHTML;
    
            if (charDmg < 0)
            {
                charDmg = 0;
            }
            else if (beastDmg < 0)
            {
                beastDmg = 0;
            }
    
            while (fightTrue != 0)
            {
                if (charFightHP > 0 && beastFightHP > 0) 
                {
                    charFightHP =  beastDmg - charFightHP;
                    beastFightHP = charDmg - beastFightHP;
                    alert("You do "+charDmg+" damage to "+beastName+". "+beastName+" does "+beastDmg+" damage to you.");
                    document.getElementById("theHP").innerHTML = charFightHP;
                    document.getElementById("theBHP").innerHTML = beastFightHP;
                }
                else{
                    fightTrue = 0;
                }
            }
    
            if (beastFightHP < 0 && charFightHP > 0)
            {
                fightWin();
            }
    
            if (charFightHP < 0)
            {
                alert("You are dead");
                createChar();
            }
        }
    	
    	
    	
    	
    	
    	
    	
    	
    	
    	
        </script>
    
        </head>
        <header>
            
           
            <div style="clear:both;"></div>
        </header>
        <body>
    	
    
    
    
            <div id="content">
            		<form class="form">
    
    
    
    <h2>Simulator</h2>
    
    <field name="fieldName" static="true" type="FieldType" value="code">Strength</field>
    
    
    <input type = "text" value="300" disabled="disable" id="hitpoints" />
    
     <input type = "text" value="100" disabled="disable" id="strength" />
     
     <input type = "text" value="100" disabled="disable" id="luck" />
     
     <select>
      <option>Dragon</option>
      <option>Orc</option>
      <option>Ogre</option>
      <option>Reaper</option>
    </select>
     
     
     
     
     
     
     <input type="button" value="Fight" onclick="startFight()";/>
     
    	</form>
            </div>
        </body>
        <footer>
        
        </footer>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by fastskater07
    I'm having a lot of problems trying to learn Javascript. I don't understand how I can select different character classes to fight. Here so far is the code:



    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Register</title>
            <!--[if IE]>
                <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            <link href="CSS/styles.css" type="text/css" rel="stylesheet" />
    
        <script type="text/javascript">
    var character = { hitpoints: 300, strength: 100, luck: 100}
    
    var monsters = {
      reaper : { hitpoints: 250, strength : 17, luck : 3 },
      dragon : { hitpoints: 1000, strength: 50, luck : 5},
      orc : { hitpoints: 100, strength: 12, luck : 2 },
      ogre: { hitpoints: 50, strength: 10, luck: 1 }
    }
    
    
    	
    	
    	function startFight()
        {
            charFightHP = charHP;
            beastFightHP = beastHP;
            fightTrue = 1;
            charDmg = charStr - beastDef;
            beastDmg = beastStr - charDef;
            beastName = document.getElementById("theBName").innerHTML;
    
            if (charDmg < 0)
            {
                charDmg = 0;
            }
            else if (beastDmg < 0)
            {
                beastDmg = 0;
            }
    
            while (fightTrue != 0)
            {
                if (charFightHP > 0 && beastFightHP > 0) 
                {
                    charFightHP =  beastDmg - charFightHP;
                    beastFightHP = charDmg - beastFightHP;
                    alert("You do "+charDmg+" damage to "+beastName+". "+beastName+" does "+beastDmg+" damage to you.");
                    document.getElementById("theHP").innerHTML = charFightHP;
                    document.getElementById("theBHP").innerHTML = beastFightHP;
                }
                else{
                    fightTrue = 0;
                }
            }
    
            if (beastFightHP < 0 && charFightHP > 0)
            {
                fightWin();
            }
    
            if (charFightHP < 0)
            {
                alert("You are dead");
                createChar();
            }
        }
    	
    	
    	
        </script>
    
        </head>
        <header>
            
           
            <div style="clear:both;"></div>
        </header>
        <body>
    	
    
    
    
            <div id="content">
            		<form class="form">
    
    
    
    <h2>Simulator</h2>
    
    <field name="fieldName" static="true" type="FieldType" value="code">Strength</field>
    
    
    <input type = "text" value="300" disabled="disable" id="hitpoints" />
    
     <input type = "text" value="100" disabled="disable" id="strength" />
     
     <input type = "text" value="100" disabled="disable" id="luck" />
     
     <select>
      <option>Dragon</option>
      <option>Orc</option>
      <option>Ogre</option>
      <option>Reaper</option>
    </select>
     
     
     
     
     
     
     <input type="button" value="Fight" onclick="startFight()";/>
     
    	</form>
            </div>
        </body>
        <footer>
        
        </footer>
    </html>

    What im trying to get it to do is when you select the opponnent i want it to have a turn based strategy where the user fights the opponent until one dies. I'm trying to make a life bar also. I know the math algorhythm needs to look something like...


    Code:
    If  Math.random() + luck / 100) * 10 > 5 Hit else Miss
    
    damage = Math.ceil(Math.random()) * Strength)
    
    if hitpoints <= 0 character/monster dies
    I just cant figure it out!
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    8
    Rep Power
    0
    I'm working on a similar program myself, its a fun way to learn a lot of great web development technologies.

    I'd love to help you on this, but your question isn't very specific. Where are you getting stuck?

    the way I approached it:

    I created an class called "combatant." All other creatures, monster or player, inherited from combatant. There are great lessons about objects and inheritance in JavaScript over on Codeacademy (there at the end of the JavaScript track.)

    Once they inherit from Combatant, I modify stats like hit points and damage.

    You should probably create separate functions for things like a basic attack roll, basic damage roll, etc. your attack roll function would just return a boolean value, and your damage roll function will return a number to deduct from hit points.

    What you get with all this is actually a pretty lean program, with a lot of code that gets reused over and over again. I haven't gotten it working all the way with JavaScript, but I have a fully functioning version in Ruby. (inheritence is SO much easier in Ruby.)

    I'm on a work computer so I don't have my code to paste in, but feel free to email me and I'd be happy to help you on this project.

    SCM

IMN logo majestic logo threadwatch logo seochat tools logo