之前用js写的一个英雄对战的小游戏，可拓展，用面向对象思想设计的，比如英雄的继承关系，属性的成长等
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Hero Fight</title> 5 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 7 8 <script type="text/javascript"> 9 function random(s, e) { 10 var iRan, iMax, iMin, iRtn; 11 s = parseInt(s); 12 e = parseInt(e); 13 iRan = Math.random(); 14 if (!isNaN(e)) { // 是否有可转换成数字的第二个参数 15 iMax = Math.max(s, e); 16 iMin = Math.min(s, e); 17 iRtn = Math.ceil(iRan * (iMax - iMin) + iMin); 18 if (iRtn >= e) iRtn = iRtn - 1; // 如果生成的随机数>=传入最大的数时减1 19 return iRtn; 20 } 21 if (!isNaN(s)) {// 是否有可转换成数字的第一个参数 22 iRtn = Math.ceil(iRan * s); 23 if (iRtn >= s) iRtn = iRtn - 1; 24 return iRtn; 25 } 26 return 0; 27 } 28 29 var HeroType = { 30 Unknown: 0, 31 Intelligent: 1, 32 Strength: 2, 33 Agile: 3 34 }; 35 function Hero() { 36 this.Name = ""; 37 this.Camp = ""; 38 this.IsDead = false; 39 this.Type = HeroType.Unknown; 40 this.Level = 1; 41 this.HP = 1; 42 this.MP = 1; 43 this.MinAttack = 1; 44 this.MaxAttack = 1; 45 this.AttackRange = "0-1"; 46 this.Armor = 1; 47 this.Attack = function () { 48 return random(this.MinAttack, this.MaxAttack); 49 } 50 this.Damage = function (damage) { 51 var realDamage = parseInt(damage * (1.0 - this.Armor * 0.1)); 52 this.HP = parseInt(this.HP - realDamage); 53 if (this.HP <= 0) { 54 this.IsDead = true; 55 this.HP = 0; 56 } 57 return realDamage; 58 } 59 this.Run = function () { 60 return this.Name + ":for the " + this.Camp; 61 } 62 } 63 64 function Archmage(name) { 65 Hero.call(this); 66 67 this.Name = name; 68 this.Armor = 3; 69 this.AttackRange = "15-27"; 70 this.Camp = "Human"; 71 this.HP = 350; 72 this.Level = 1; 73 this.MaxAttack = this.AttackRange.split("-")[1]; 74 this.MinAttack = this.AttackRange.split("-")[0]; 75 this.Type = HeroType.Intelligent; 76 this.MP = 500; 77 } 78 79 function BladeMaster(name) { 80 Hero.call(this); 81 this.CriDamageLevel = 0; 82 this.Name = name; 83 this.Armor = 4; 84 this.AttackRange = "18-32"; 85 this.Camp = "ORC"; 86 this.HP = 400; 87 this.Level = 1; 88 this.MaxAttack = this.AttackRange.split("-")[1]; 89 this.MinAttack = this.AttackRange.split("-")[0]; 90 this.Type = HeroType.Agile; 91 this.MP = 100; 92 this.CriDamage = function () { 93 var temp = random(1, 100); 94 if (temp <= 15) { 95 this.CriDamageLevel = 3; 96 return 3; 97 } 98 if (temp > 15 && temp <= 30) { 99 this.CriDamageLevel = 2; 100 return 2; 101 } 102 if (temp > 30) { 103 this.CriDamageLevel = 0; 104 return 1; 105 } 106 107 return 1; 108 } 109 this.Attack = function () { 110 return random(this.MinAttack, this.MaxAttack) * this.CriDamage(); 111 } 112 } 113 114 115 116 $(document).ready(function () { 117 118 /*$("input[name='btn_ready']").click(function () { 119 if ($(this).prev().val() != "") { 120 var newb = $(this).after("<input value='RollIt' type='button' name='roll'/>"); 121 $(this).remove(); 122 $(newb).click(function () { 123 var roll = random(1, 100); 124 $(this).data("rp", roll); 125 var newc = $(this).after("<input value='Attack' type='button' name='attack' disabled='disabled'/>"); 126 $(this).remove(); 127 if ($(newc).data("hero") == null) { 128 var hero = new BladeMaster(""); 129 $(newc).data("hero", hero); 130 } 131 132 }); 133 } 134 });*/ 135 $("#btn_go").click(function () { 136 if ($("#h1").val() != "" && $("#h2").val() != "") { 137 $("#attack2").data("hero", null); 138 $("#attack1").data("hero", null); 139 140 141 $("input[name='attack']").hide(); 142 143 var h1 = new BladeMaster($("#h1").val()); 144 var h2 = new BladeMaster($("#h2").val()); 145 $("#attack1").data("hero", h1); 146 $("#attack2").data("hero", h2); 147 148 if (random(0, 100) >= 50) { 149 $("#attack1").show("slow"); 150 } 151 else { 152 $("#attack2").show("slow"); 153 } 154 } 155 else { 156 alert("please enter player name"); 157 } 158 }); 159 160 $("#attack1").click(function () { 161 $("#attack1").hide(); 162 $("#attack2").show(); 163 var hero1 = $("#attack1").data("hero"); 164 var hero2 = $("#attack2").data("hero"); 165 166 var damage = hero1.Attack(); 167 var realDamage = hero2.Damage(damage); 168 $("#attack1").data("hero", hero1); 169 $("#attack2").data("hero", hero2); 170 $("#sp_hp2").html("current hp is :" + hero2.HP); 171 if (hero1.CriDamageLevel != 0) { 172 $("<div style='color:red'>" + hero1.Name + " attack " + hero2.Name + ", make damage " + realDamage + "(" + hero1.CriDamageLevel + " * cri damage), " + hero2.Name + " hp is " + hero2.HP + ",</div>").appendTo($("#result")); 173 } 174 else { 175 $("<div>" + hero1.Name + " attack " + hero2.Name + ", make damage " + realDamage + "(" + hero1.CriDamageLevel + " * cri damage), " + hero2.Name + " hp is " + hero2.HP + ",</div>").appendTo($("#result")); 176 } 177 if (hero2.IsDead) { 178 $("<div>" + hero1.Run() + "</div>").appendTo($("#result")); 179 alert("the winner is :" + hero1.Name); 180 $("#attack2").data("hero", null); 181 $("#attack1").data("hero", null); 182 183 $("#h1").val(""); 184 $("#h2").val(""); 185 $("input[name='attack']").hide(); 186 return; 187 } 188 }); 189 190 $("#attack2").click(function () { 191 $("#attack2").hide(); 192 $("#attack1").show(); 193 var hero1 = $("#attack2").data("hero"); 194 var hero2 = $("#attack1").data("hero"); 195 var damage = hero1.Attack(); 196 var realDamage = hero2.Damage(damage); 197 $("#attack2").data("hero", hero1); 198 $("#attack1").data("hero", hero2); 199 $("#sp_hp1").html("current hp is :" + hero2.HP); 200 if (hero1.CriDamageLevel != 0) { 201 $("<div style='color:red'>" + hero1.Name + " attack " + hero2.Name + ", make damage " + realDamage + "(" + hero1.CriDamageLevel + " * cri damage), " + hero2.Name + " hp is " + hero2.HP + ",</div>").appendTo($("#result")); 202 } 203 else { 204 $("<div>" + hero1.Name + " attack " + hero2.Name + ", make damage " + realDamage + "(" + hero1.CriDamageLevel + " * cri damage), " + hero2.Name + " hp is " + hero2.HP + ",</div>").appendTo($("#result")); 205 } 206 if (hero2.IsDead) { 207 $("<div>" + hero1.Run() + "</div>").appendTo($("#result")); 208 alert("the winner is :" + hero1.Name + ",click ok to play again"); 209 $("#attack2").data("hero", null); 210 $("#attack1").data("hero", null); 211 212 $("#h1").val(""); 213 $("#h2").val(""); 214 $("input[name='attack']").hide(); 215 return; 216 } 217 }); 218 }); 219 220 </script> 221 </head> 222 <body> 223 <div class="header"></div> 224 <div> 225 Hero Player 1,Please enter your Name: 226 <input id="h1" /> <input name="btn_ready" type="button" value="Ready" style="display:none"/> 227 <span id="sp_hp1"></span> 228 <input id="attack1" type="button" value="Attack" name="attack" style="display:none"/> 229 </div> 230 231 <div > 232 Hero Player 2,Please enter your Name: 233 <input id="h2" /> <input name="btn_ready" type="button" value="Ready" style="display:none"/> 234 <span id="sp_hp2"></span> 235 <input id="attack2" type="button" value="Attack" name="attack" style="display:none"/> 236 </div> 237 238 <div> 239 <input id="btn_go" type="button" value="GoGoGo"/> 240 <div id="result"></div> 241 242 </div> 243 244 245 246 247 <div class="footer"></div> 248 </body> 249 </html>