SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot XzAzX's Avatar
    Join Date
    Apr 2002
    Location
    Holland
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript in different browsers

    right, I'm trying to make a battle system, which already works, but now i added a HP bar (with some help from xDev ) and it works fine for me in IE, but for example Opera doesn't get it right..

    IE, good version :


    Opera, wrong :




    http://www.binary-zero.net/maikel/spel/bs/Test2.html


    here's the whole code (offcourse you can also view the source )
    HTML Code:
    <HTML>
    <HEAD>	
    <style type="text/css">
    #balk 
    {
      width: 100px;
    }
    </style>
    <script language="JavaScript">
    		
    var lvl = 10;
    var att = 34;
    var edef = 40;
    var widthBalk = 100;
    var widthLeeg = 0;
    					
    function attack(type)
    {
    	if(type=='norm')
    		{
    			var dmg=Math.round((((2*lvl/5+2)*(att/2)*(5 + Math.random()*10)/edef)/5+2));
    			if(dmg < "1" ){ dmg = "1"; } 
    			schade.innerHTML = dmg;
    			hp.innerHTML -= dmg;
    						
    			// start HP balk
    			widthBalk = hp.innerHTML;
    			widthLeeg = 100 - hp.innerHTML;
    			
    			if(widthLeeg >= 100)
    			{
    				hp.innerHTML = 0;
    				document.getElementById("balk").style.width = 0;
    				document.getElementById("leeg").style.width = 100;
    			}
    			else
    			{
    				document.getElementById("balk").style.width = widthBalk;
    				document.getElementById("leeg").style.width = widthLeeg;
    			}		
    			
    			// einde HP balk
    			
    			
    			
    		
    		}
    					
    	if(type=='fb')
    		{
    			if(mpx.innerHTML < 1)
    			{ 
    				alert("Your can't use FireBall any more\nbecause your MP is too low");
    			}
    			else
    			{
    				var dmg=Math.round((((2*lvl/5+2)*(att/2)*(30 + Math.random()*40)/edef)/5+2)); 
    				if(dmg == "0" ){ dmg = "1"; } 
    				mpx.innerHTML = mpx.innerHTML - 5;
    				schade.innerHTML = dmg;
    				hp.innerHTML -= dmg;
    				
    				// start HP balk
    				widthBalk = hp.innerHTML;
    				widthLeeg = 100 - hp.innerHTML;
    			
    				if(widthLeeg >= 100)
    				{
    					hp.innerHTML = 0;
    					document.getElementById("balk").style.width = 0;
    					document.getElementById("leeg").style.width = 100;
    				}
    				else
    				{
    					document.getElementById("balk").style.width = widthBalk;
    					document.getElementById("leeg").style.width = widthLeeg;
    				}		
    			
    			// einde HP balk
    				
    			}
    		
    	    }
    					
    	if(hp.innerHTML < 1)
    		{
    			hp.innerHTML = "0";
    			var text = 
    			"You Destroyed The Enemy!\nCongratulations!\n\n" +
    			"This gave you 20 experience points!";
    			alert(text);
    		}
    			
    }
    
    		</SCRIPT>
    
    <SCRIPT>
    		function menu(nr)
            {
            pic = "pic_" +nr;
                    if(document.getElementById(nr).style.display=="none")
                    {
                        document.getElementById(nr).style.display=''  ;
                        document.getElementById(pic).src='pilned.gif' ;
                    }
                    else
                    {
                        document.getElementById(nr).style.display="none";
                        document.getElementById(pic).src='pil.gif' ;
                    }
            }
    </SCRIPT>
    </HEAD>
    
    <BODY rightmargin=0 leftmargin=0 bottommargin=0 topmargin=0>
    <font face="verdana">
    <br>
    <center>
    <table border="1" style="border-collapse:collapse">
    
    <tr>
           <td id="balk" height="15" background="bar.gif"></td>
    	   <td id="leeg" height="15" background="leeg.gif"></td>
    </tr>
    </table>
    
    <TABLE align="center" border="1" style="border-collapse:collapse">
    <TR>
    <TD>Enemy HP :</TD>
    <TD align="center" id="hp" style="font-weight:bold">100</TD>
    </TR>
    <TR>
    <TD>Damage this time : </TD>
    <TD align="center" id="schade">0</TD>
    </TR>
    <TR>
    <TD>Your MP : </TD>
    <TD align="center" id="mpx">10</TD>
    </TR>
    </TABLE>
    
    <br>
    
    
    <table align="center" border="0" width="200" cellspacing="0" cellpadding="3">
    <tr>
    <td width="100%" bgcolor="#CFD0CF" colspan="2" style="cursor:hand" 
    onClick="menu('1')">
    <img border="0" src="pil.gif" WIDTH="9" HEIGHT="9" id="pic_1">
    &nbsp;Attack
    </td>
    </tr>
    <TR>
    
    <td bgcolor="#f0f0e0" style="display:none" id="1">
    &nbsp;&nbsp;&nbsp;
    <a style="cursor:hand" onClick="attack('norm');">Normal</a><br>
    
    </td>
    
    </tr>         
    </table>
    
    <table align="center" border="0" width="200" cellspacing="0" cellpadding="3">
    <tr>
    <td width="100%" bgcolor="#CFD0CF" colspan="2" style="cursor:hand" 
    onClick="menu('2')">
    <img border="0" src="pil.gif" WIDTH="9" HEIGHT="9" id="pic_2">
    &nbsp;Cast
    </td>
    </tr>
    <TR>
    
    <td bgcolor="#f0f0e0" style="display:none" id="2">
    &nbsp;&nbsp;&nbsp;
    <a style="cursor:hand" onClick="attack('fb');">FireBall</a>&nbsp;&nbsp;(5 MP)
    </td>
    
    </tr>         
    </table>
    
    <br>
    <br>
    <TABLE align="center" border="1" style="border-collapse:collapse">
    <TR>
    <TD>Attack (att) :</TD>
    <TD align="center" id="val_att">&nbsp;<script>document.write(att);</script>&nbsp;</TD>
    </TR>
    <TR>
    <TD>Level (lvl) : </TD>
    <TD align="center" id="val_lvl">&nbsp;<script>document.write(lvl);</script>&nbsp;</TD>
    </TR>
    <TR>
    <TD>Enemy Defense (edef) : </TD>
    <TD align="center" id="val_edef">&nbsp;<script>document.write(edef);</script>&nbsp;</TD>
    </TR>
    </TABLE>
    <br>
    <TABLE align="center" border="1" style="border-collapse:collapse">
    <TR>
    <TD><b>&nbsp;Type :</b> </TD>
    <TD><b>&nbsp;Formule :</b> </td>
    <TD><b>&nbsp;Min. Dmg :</b> </td>
    <TD><b>&nbsp;Max. Dmg :</b> </td>
    </TR>
    <TR>
    <TD align="center">&nbsp;Normal&nbsp;</TD>
    <TD align="left">&nbsp;((((2*lvl/5+2)*att*(5 + Math.random()*10)/edef)/5+2));</TD>
    <TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+0)/edef)/5+2)));</script></td>
    <TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+10)/edef)/5+2)));</script></td>
    </TR>
    <TR>
    <TD align="center">&nbsp;Fireball&nbsp; </TD>
    <TD align="left">&nbsp;((((2*lvl/5+2)*att*(30 + Math.random()*40)/edef)/5+2));</TD>
    <TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+0)/edef)/5+2)));</script></td>
    <TD align="center">&nbsp;<script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+40)/edef)/5+2)));</script></td>
    </TR>
    </TABLE>
    
    </BODY>
    </HTML>
    
    Anyone an idea how to fix it?
    thx
    _o_ OOP _o_

  2. #2
    SitePoint Zealot XzAzX's Avatar
    Join Date
    Apr 2002
    Location
    Holland
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?
    _o_ OOP _o_

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi XzAzX,

    I've looked at this several times, and finally dug into it a little deeper.

    Opera7 is reacting strangely, I agree. When the TDs are resized td.offsetWidth does not change by the same amount td.style.width changes - but padding and border width remain constant.

    There are several tips I would like to give about your code - but I don't have time right now, sorry.

    For another way of implementing a bar-graph, have a look at this: xBarGraph demo.

  4. #4
    SitePoint Zealot XzAzX's Avatar
    Join Date
    Apr 2002
    Location
    Holland
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx for reacting anyway

    I'll wait for your reply
    _o_ OOP _o_


Bookmarks

Posting Permissions

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