jQuery寫的小遊戲

這些天學習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內核瀏覽器中，左邊的血條掉血是從右邊開始的，這點感覺不是很完美。

jQuery寫的小遊戲

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

停薪留職了！

jQuery的一點東西

JS的日曆

jQuery實現了一個拖拽小東西的程序

規劃

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結