这些天学习jQuery,写了一个小游戏--名字pk。上代码:
namepk.html:
- <html>
- <head>
- <title>-----PK-----</title>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <script type='text/javascript' src='jquery-1.2.6.min.js'></script>
- <script type='text/javascript' src='pk.js'></script>
- </head>
- <body style='background:pink'>
- <center>输入名字,开始战斗</center>
- <div align='center'>
- <fieldset id='bar1' style='float:left;margin:5px;color:blue;text-align:left'>战</fieldset>
- <fieldset id='bar2' style='float:right;margin:5px;color:blue;text-align:left'>战</fieldset>
- <table id='state'>
- <tr>
- <td id='state1'><div id='blood1'></div></td>
- <td rowspan='2'>VS</td>
- <td id='state2'><div id='blood2'></div></td>
- </tr>
- <tr>
- <td><input type='text' style='width:100%; padding:0px; margin:0px'/></td>
- <td><input type='text' style='width:100%; padding:0px; margin:0px'/></td>
- </tr>
- <tr>
- <td colspan='3' style='text-align:center'><input type='button' value='GO' /></td>
- </tr>
- </table>
- <p id='battleField'></p>
- </div>
- </body>
- </html>
pk.js:
- var actions = [["踢了", "一脚"], ["一脚踹向", "的屁股"], ["拿起棒子猛击", "的头部"],["发出一招六脉神剑,直指", "的胸口"],
- ["抓了一把毒药向", "撒去"], ["使出降龙十八掌,把", "吓的屁滚尿流"], ["对", "拳打脚踢"]];
- var results = [",昏迷了1秒", ",站起来后感到晕乎乎的", ",眼泪哇哇的", " ", " ", " ", " "];
- var places = ["雪山峰顶", "紫禁之巅", "少林寺", "榕树下", "桃花盛开的地方", "万花丛中", "茅厕屋顶之上"];
- var who = 0; //who's turn
- var warrior1, warrior2;
- var w1life, w2life;//初始生命
- var timer;//定时器
- $(document).ready(function() {
- $(':button').width(40).css('cursor', 'hand').bind('click', start);
- $('div:first').wrap('<fieldset style="background:cyan"></fieldset>');
- $(':text').parent().css({width:'200px', padding:'0px', margin:'0px'});
- $('#state1').css('text-align', 'right');
- $('#state1, #state2').css({width:'200px', height:'20px', background:'orange'});
- $('#blood1, #blood2').css({right:'0px',position:'relative', width:'100%', height:'100%', background:'red', color:'white'});
- $(this).bind('keydown', function() {if(event.keyCode == 13) $(':button').click()});//绑定回车
- });
- function start() {
- var w1name= $(':text')[0].value;
- var w2name= $(':text')[1].value;
- var placeIndex = Math.round(Math.random()*(places.length-1));//随机产生战斗地点
- if(w1name == "" || w2name == "") return;
- else {
- $('#battleField').empty(); //清空作战区域
- $(':button').attr('disabled', 'true').css('cursor', 'default');//按钮不可用
- warrior1 = new warrior(w1name, 0, 0, 100);
- warrior2 = new warrior(w2name, 0, 0, 100);//初始化两个战士
- setProperty(warrior1); setProperty(warrior2);//设置属性
- w1life = warrior1.life; w2life = warrior2.life;
- $('#bar1').html('攻击:'+ warrior1.attack+ '<br/><br/>防御:'+ warrior1.defence+ '<br/><br/>生命:'+ warrior1.life);
- $('#bar2').html('攻击:'+ warrior2.attack+ '<br/><br/>防御:'+ warrior2.defence+ '<br/><br/>生命:'+ warrior2.life);//初始化状态栏
- $('#blood1, #blood2').css({width:'100%', height:'100%', background:'red', color:'white'}); //初始化血条
- $('#battleField').append('<h3 color="blue">'+warrior1.name+'、'+ warrior2.name+'决战'+ places[placeIndex]+ '</h3>');//战斗地点
- timer = setInterval(start, 1000);//定时器
- }
- function start() {
- fight(warrior1, warrior2);//战斗开始
- }
- function fight(warrior1, warrior2) {
- var value = "";//伤害值
- var actionIndex = Math.round(Math.random()*(actions.length-1));//随机产生动作
- var resultIndex = Math.round(Math.random()*(results.length-1));//随机产生效果
- if(who == 0) {//init
- if(warrior1.attack+ warrior1.defence < warrior2.attack+ warrior2.defence)
- who = 1;
- else
- who = 2;
- }
- if(who == 1) {//轮到1攻击
- if(warrior1.attack > warrior2.defence) {
- value = hurtValue(warrior1.attack, warrior2.defence, 3);
- if(value == 0) value = 1;
- }
- else if(warrior1.attack <= warrior2.defence) {
- value = hurtValue(warrior1.attack, warrior2.defence, 1);
- if(value == 0) value = 1;
- }
- warrior2.life -= value; //掉血
- if(warrior2.life <= 0) warrior2.life = 0;
- $('#blood2').animate({width: warrior2.life/w2life*200}, (value>20?20:value)*50);//掉血动画
- $('#battleField').append(warrior1.name+ ' '+ actions[actionIndex][0]+ warrior2.name+ ' '+
- actions[actionIndex][1]+ ', '+ (isDead(warrior2)?(warrior2.name+ "挂掉了!"):(warrior2.name+ '损失<font color="red">'+ value+ '</font>生命'+results[resultIndex]))+ '<br />');
- if(isDead(warrior2)) $(':button').attr('disabled', '').css('cursor', 'hand');
- who = 2;//轮到2攻击
- return;
- }
- if(who == 2) {//轮到2攻击
- if(warrior2.attack > warrior1.defence) {
- value = hurtValue(warrior2.attack, warrior1.defence, 3);
- if(value == 0) value = 1;
- }
- else if(warrior2.attack <= warrior1.defence) {
- value = hurtValue(warrior2.attack, warrior1.defence, 1);
- if(value == 0) value = 1;
- }
- warrior1.life -= value; //掉血
- if(warrior1.life <= 0) warrior1.life = 0;
- $('#blood1').animate({width: warrior1.life/w1life*200,right: '0px'}, (value>20?20:value)*50);
- $('#battleField').append(warrior2.name+ ' '+ actions[actionIndex][0]+ warrior1.name+ ' '+
- actions[actionIndex][1]+ ', '+ (isDead(warrior1)?(warrior1.name+ "挂掉了!"):(warrior1.name+ '损失<font color="red">'+ value+ '</font>生命'+ results[resultIndex]))+ '<br />');//战斗效果
- if(isDead(warrior1)) $(':button').attr('disabled', '').css('cursor', 'hand');
- who = 1;
- return;
- }
- }
- function hurtValue(attack, defence, multiple) {//计算伤害值
- return Math.round(Math.random()*Math.abs(attack - defence)*multiple);
- }
- function isDead(warrior) {//是否挂掉
- if(warrior.life <= 0) {
- clearInterval(timer);
- return true;
- }
- }
- }
- function warrior(name, attack, defence, life) {//战士类
- this.name = name;
- this.attack = attack;
- this.defence = defence;
- this.life = life;
- }
- function setProperty(obj) {//设置属性
- var warrior = obj;
- var name = $.trim(warrior.name);
- var num = 0;
- for(i=0; i<name.length; i++) {
- num += name.charCodeAt(i);
- }
- warrior.attack = findValidNum((num.toString(2)<<13).toString()).substr(0, 2)==''?findValidNum((num.toString(2)<<12).toString().substr(0, 2)):findValidNum((num.toString(2)<<13).toString()).substr(0, 2);
- warrior.defence = findValidNum((num.toString(2)<<11).toString()).substr(0, 2)==''?findValidNum((num.toString(2)<<10).toString().substr(0, 2)):findValidNum((num.toString(2)<<11).toString()).substr(0, 2);
- warrior.life = findValidLife((num.toString(2)<<9).toString()).substr(0, 3)==''?findValidLife((num.toString(2)<<8).toString()).substr(0, 3):findValidLife((num.toString(2)<<9).toString()).substr(0, 3);
- function findValidNum(str) {
- if(str == '') return '40'; //防止堆栈溢出
- if(str.substr(0,1) == '0' || str.substr(0,1) == '-'|| str.substr(0,1) < '4')
- return findValidNum(str.substring(1, str.length-1));
- return str;
- }
- function findValidLife(str) {
- if(str == '') return '100';
- if(str.substr(0,1) == '0' || str.substr(0,1) == '-' || str.substr(0,1) > '3')
- return findValidLife(str.substring(1, str.length-1));
- return str;
- }
- }
jQuery的代码就不贴了,网上随便都能搜到。程序写的很简单,战斗属性就定义了三个,可玩性不是很高。另外在ie中血条显示正常,在其他非ie内核浏览器中,左边的血条掉血是从右边开始的,这点感觉不是很完美。