js英雄对战小游戏看看你的人品

之前用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>
View Code
posted on 2013-07-12 12:26 mixls1234 阅读(318) 评论(0) 收藏举报