SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Javascript in different browsers
-
Nov 28, 2003, 10:47 #1
- 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"> Attack </td> </tr> <TR> <td bgcolor="#f0f0e0" style="display:none" id="1"> <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"> Cast </td> </tr> <TR> <td bgcolor="#f0f0e0" style="display:none" id="2"> <a style="cursor:hand" onClick="attack('fb');">FireBall</a> (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"> <script>document.write(att);</script> </TD> </TR> <TR> <TD>Level (lvl) : </TD> <TD align="center" id="val_lvl"> <script>document.write(lvl);</script> </TD> </TR> <TR> <TD>Enemy Defense (edef) : </TD> <TD align="center" id="val_edef"> <script>document.write(edef);</script> </TD> </TR> </TABLE> <br> <TABLE align="center" border="1" style="border-collapse:collapse"> <TR> <TD><b> Type :</b> </TD> <TD><b> Formule :</b> </td> <TD><b> Min. Dmg :</b> </td> <TD><b> Max. Dmg :</b> </td> </TR> <TR> <TD align="center"> Normal </TD> <TD align="left"> ((((2*lvl/5+2)*att*(5 + Math.random()*10)/edef)/5+2));</TD> <TD align="center"> <script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+0)/edef)/5+2)));</script></td> <TD align="center"> <script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(5+10)/edef)/5+2)));</script></td> </TR> <TR> <TD align="center"> Fireball </TD> <TD align="left"> ((((2*lvl/5+2)*att*(30 + Math.random()*40)/edef)/5+2));</TD> <TD align="center"> <script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+0)/edef)/5+2)));</script></td> <TD align="center"> <script>document.write(Math.round((((2*lvl/5+2)*(att/2)*(30+40)/edef)/5+2)));</script></td> </TR> </TABLE> </BODY> </HTML>
thx_o_ OOP _o_
-
Nov 29, 2003, 20:24 #2
- Join Date
- Apr 2002
- Location
- Holland
- Posts
- 126
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
anyone?
_o_ OOP _o_
-
Dec 1, 2003, 10:28 #3
- 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.Cross-Browser.com, Home of the X Library
-
Dec 1, 2003, 10:48 #4
- 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