jQuery写的小游戏

最新推荐文章于 2023-06-06 18:29:33 发布

xieyaa

最新推荐文章于 2023-06-06 18:29:33 发布

阅读量1.9k

点赞数

分类专栏：边角技术文章标签： jquery button timer function float 游戏

本文链接：https://blog.csdn.net/xieyaa/article/details/3111831

版权

边角技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这些天学习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内核浏览器中，左边的血条掉血是从右边开始的，这点感觉不是很完美。

xieyaa

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery写的小游戏

这些天学习jQuery，写了一个小游戏--名字pk。上代码：namepk.html:html>head> title>-----PK-----title> meta http-equiv="Content-Type" content="text/html;charset=utf-8"> script type=text/javascrip
复制链接

扫一扫