/* my code */
var gArrSpell = [    
'1111', '2222', '3333', '4444', '5555', '6666', '7777', '8888', '999999', 'AAAA', 'bbbb', 'cccc', 'dddd', 'eeee', 'fffff'
];var gArrSplDmg = [11,12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 ];var gRound = 0;
var gTimerID = 0;
var gAtkDrct = 0;
var gDmg = 0;var gArPty1 = ['', '', 0, 0, 0, 0];
var gArPty2 = ['', '', 0, 0, 0, 0];
var INDEX_MD5 = 1;
var INDEX_ID = 0;
var INDEX_HP = 2;
var INDEX_DEF = 3;
var INDEX_ATK = 4;
var INDEX_SPD = 5;
var INDEX_PTY_MAX = 6;var BLC_PTY_10 = 10;
var BLC_PTY_50 = 50;
var BLC_PTY_99 = 99;var ROUND_MAX = 5;
var ROUND_RESET = 0xFF;
var ROUND_START = 0;/* ************************************************************************* */
/* start: NF Process ******************************************************* */
/* clear pty array */
function ClearPty(arrPty){for (var i=0; i<INDEX_PTY_MAX; i++) { if(i<2) { arrPty[i] = ''; }else { arrPty[i]=0; } }    
}
/* calc md5 code */
function AllToMD5(str1, str2) {// reset round infogRound = ROUND_RESET// hide pty msgdocument.getElementById("disppty1").style.display="none";document.getElementById("disppty2").style.display="none";document.getElementById("fightdisp").style.display="none";if (str1 != '') {gArPty1[INDEX_ID] = str1;gArPty1[INDEX_MD5] = To_md5(str1);ShowMd5A.innerHTML = gArPty1[INDEX_MD5];}else {ShowMd5A.innerHTML = '';ClearPty(gArPty1);}if (str2 != '') {gArPty2[INDEX_MD5] = To_md5(str2);ShowMd5B.innerHTML=gArPty2[INDEX_MD5];gArPty2[INDEX_ID] = str2;}else {ShowMd5B.innerHTML = '';ClearPty(gArPty2);}}/* property balance */
function BalancePty(arrPty){console.log("base pty:", arrPty[INDEX_HP],arrPty[INDEX_DEF],arrPty[INDEX_ATK],arrPty[INDEX_SPD])if(arrPty[INDEX_HP] < BLC_PTY_50) { arrPty[INDEX_HP]=BLC_PTY_50; }for(var i=INDEX_DEF; i<=INDEX_SPD; i++) {if(arrPty[i] < BLC_PTY_10) { arrPty[i]=BLC_PTY_10; }if(arrPty[i] > BLC_PTY_99) { arrPty[i]=BLC_PTY_99; }}console.log("balc pty:", arrPty[INDEX_HP],arrPty[INDEX_DEF],arrPty[INDEX_ATK],arrPty[INDEX_SPD])
}/* calc property; reset property */
function ToPty() {var aPtyshow = 0;// hide fight msgif (gRound != ROUND_START){console.log("==ToPty== reset property")// stop IntervalclearInterval(gTimerID)// clean old msgdocument.getElementById("fightdisp").style.display="none";document.getElementById("_roundinfo").innerHTML = '';gRound = ROUND_START;gTimerID = 0;gAtkDrct = 0;gDmg = 0;/* INDEX_HP作为Flag: 同md5不重生属性; Fight后,通过ToPty()恢复HP */    if (gArPty1[INDEX_MD5] != '') {// md5 to ptygArPty1[INDEX_HP] = parseInt(gArPty1[INDEX_MD5].substring(0,2),16)gArPty1[INDEX_DEF] = parseInt(gArPty1[INDEX_MD5].substring(2,4),16)gArPty1[INDEX_ATK] = parseInt(gArPty1[INDEX_MD5].substring(4,6),16)gArPty1[INDEX_SPD] = parseInt(gArPty1[INDEX_MD5].substring(6,8),16)// balanceBalancePty(gArPty1);// show ptydocument.getElementById("disppty1").style.display="block";p1hpt.innerHTML = gArPty1[INDEX_HP];p1hp.innerHTML  = gArPty1[INDEX_HP];p1def.innerHTML = gArPty1[INDEX_DEF];p1atk.innerHTML = gArPty1[INDEX_ATK];p1spd.innerHTML = gArPty1[INDEX_SPD];//console.log("1111")}if (gArPty2[INDEX_MD5] != '') {// md5 to ptygArPty2[INDEX_HP] = parseInt(gArPty2[INDEX_MD5].substring(0,2),16)gArPty2[INDEX_DEF] = parseInt(gArPty2[INDEX_MD5].substring(2,4),16)gArPty2[INDEX_ATK] = parseInt(gArPty2[INDEX_MD5].substring(4,6),16)gArPty2[INDEX_SPD] = parseInt(gArPty2[INDEX_MD5].substring(6,8),16)// balanceBalancePty(gArPty2);// show ptydocument.getElementById("disppty2").style.display="block";p2hpt.innerHTML = gArPty2[INDEX_HP];p2hp.innerHTML  = gArPty2[INDEX_HP];p2def.innerHTML = gArPty2[INDEX_DEF];p2atk.innerHTML = gArPty2[INDEX_ATK];p2spd.innerHTML = gArPty2[INDEX_SPD];///console.log("3333")}}else{console.log("4444")}
}/* display round msg of fight */
function DispRound(gDmg){var aAtkID, aDefID;// get ATKer&DEFerif(gAtkDrct ===1){aAtkID = gArPty1[INDEX_ID]aDefID = gArPty2[INDEX_ID]p2hpt.innerHTML=gArPty2[INDEX_HP]}else{aAtkID = gArPty2[INDEX_ID]aDefID = gArPty1[INDEX_ID]p1hpt.innerHTML=gArPty1[INDEX_HP]}// max str : 5aAtkID = aAtkID.substring(0,5)aDefID = aDefID.substring(0,5)document.getElementById("_roundinfo").innerHTML +='<li>['+gRound+']'+aAtkID+gArrSpell[gRound]+aDefID+' get'+gDmg+'dmg<li>'}/* direction check */
function GetDrct(){if(gAtkDrct === 0){if(gArPty1[INDEX_SPD] > gArPty2[INDEX_SPD])  gAtkDrct = 1;else  gAtkDrct = 2;}else{if(gAtkDrct === 1)  gAtkDrct = 2;else gAtkDrct = 1; }
}/* winner check */
function CheckWinner(){var winner="P0";if(gArPty1[INDEX_HP] < 1){winner = gArPty2[INDEX_ID]console.log("P1 Win @Round:", gRound)}else if(gArPty2[INDEX_HP] < 1){winner = gArPty1[INDEX_ID]console.log("P2 Win @Round:", gRound)}else if(gRound >= ROUND_MAX){clearInterval(gTimerID)if(gArPty1[INDEX_HP] > gArPty2[INDEX_HP])  winner=gArPty1[INDEX_ID]else  winner = gArPty2[INDEX_ID]}if(winner != "P0"){clearInterval(gTimerID)document.getElementById("_roundinfo").innerHTML +='<li>'+winner+' winner</li></br>'}
}function SpellDamage(){var spDmg = 0;var spCnt = 0;spCnt = (gArPty1[INDEX_MD5][gRound] | gArPty2[INDEX_MD5][gRound]);spDmg = gArrSplDmg[spCnt];console.log("===>>>", gRound, gArPty1[INDEX_MD5][gRound], gArPty2[INDEX_MD5][gRound], spCnt, spDmg)return spDmg;
}
/* damage calc */
function CalcDamage(){// get directionGetDrct();// get dmgif(gAtkDrct === 1){// get spell dmggDmg = SpellDamage()//gArPty1[INDEX_ATK]if(gArPty2[INDEX_HP] > gDmg)  gArPty2[INDEX_HP] -= gDmg;else  gArPty2[INDEX_HP] = 0;}else{// get spell dmggDmg = SpellDamage()//gArPty2[INDEX_ATK]if(gArPty1[INDEX_HP] > gDmg)  gArPty1[INDEX_HP] -= gDmg;else  gArPty1[INDEX_HP] = 0;}// round cntgRound ++;// display round infoDispRound(gDmg)// check winnerCheckWinner();
}// fight start
function ToFight(){// hide fight msgdocument.getElementById("fightdisp").style.display="block";// HP作为开始判定FLagif((gArPty1[INDEX_HP] > 0) && (gArPty2[INDEX_HP] > 0)) {gTimerID = setInterval("CalcDamage()", 500)console.log("End of Round:", gRound)}else  console.log("Can't Start Round")
}/* endof: NF Process ******************************************************* */
/* ************************************************************************* */

 

 

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Name Fight</title><link rel="styleSheet" href="tsmd5.css" type="text/css" /><script type="text/javascript" lang="JavaScript" src="tsmd5.js"></script></head>
<body>
<div class="sjdv"><div class="sjdv1"><ul><!-- Name input label --><li class="sjicong"></li><li class="sjleft"><input id="TestStr1" value=""></li></ul><ul><!-- Name input label --><li class="sjiconb clearfix"></li><li class="sjleft"><input id="TestStr2" value=""></li></ul><ul><!-- button for [ToMD5][ToPty][Fight] --><li class="sjdv33 clearfix"><input type="button" style="width:70px;" value="ToMD5" onClick="AllToMD5(TestStr1.value, TestStr2.value)"></li><li class="sjdv33"><input type="button" style="width:70px;" value="ToPty" onClick="ToPty()"></li><li class="sjdv33"><input type="button" style="width:70px;" value="Figth" onClick="ToFight()"></li></ul></div><!-- MD5 Code Display --><div class="sjdv1 clearfix"><span id="ShowMd5A"></span><BR><span id="ShowMd5B"></span><BR><BR></div><!-- Property Display --><div class="sjdv11"><ul id="disppty1" style="display:none"><li style="min-width: 24%;">HP[<span id="p1hpt"></span>/<span id="p1hp"></span>]</li><li>DEF[<span id="p1def"></span>]</li><li>ATK[<span id="p1atk"></span>]</li><li>SPD[<span id="p1spd"></span>]</li></ul><ul id="disppty2" class="clearfix" style="display:none"><li style="min-width: 24%;">HP[<span id="p2hpt"></span>/<span id="p2hp"></span>]</li><li>DEF[<span id="p2def"></span>]</li><li>ATK[<span id="p2atk"></span>]</li><li>SPD[<span id="p2spd"></span>]</li></ul></div><!-- Fight Info Display --><div class="sjdv111 clearfix" id="fightdisp" style="display:none"><div class="sjdv50">@ALLL </div> VS <div class="sjdv50">@A222</div><ul id="_roundinfo"></ul></div>
</div></body></html>

 

 

js

 

/* @20180102 by Tsj */
/* div */
.sjdv {min-width: 200px; max-width: 500px; line-height: 20px; background-color: antiquewhite}
.sjdv50 {width: 50%; display: inline}
.sjdv33 {float: left; min-width: 33.3%; margin: 20px 0; line-height: 20px;}.sjdv1, .sjdv11, .sjdv111 {padding: 0px; background-color: azure}
.sjdv1 ul, .sjdv11 ul, .sjdv111 ul {padding: 0px; list-style: none; width: 100%;}
.sjdv1 ul li {float: left; height: 20px;}
.sjdv11 ul li {float: left; height: 20px; padding-right: 1px; min-width: 17%;}.sjdv2 {width: 200px; }/* position control */
.sjiconr {width:20px; height: 20px; background-color: red;}
.sjicong {width:20px; height: 20px; background-color: green;}
.sjiconb {width:20px; height: 20px; background-color: blue;}.sjleft {float: left}
.sjright {float: right}.clearfix {clear: both}
.offix {overflow: hidden}