一塊兒來作webgame，《卡片魔獸》（一）基礎戰鬥

寫在前面的話

這不是教程，只是博主在娛樂過程當中的一些小結記錄。博主水平有限，沒有什麼高級的東西，只是將一些小的知識點結合一下，作這麼一個養成類型的卡片頁面遊戲（=。=！有點繞）。作一個完整的遊戲，涉及內容不少，因此一步一步來，這一篇，主要是講《卡片魔獸》的基礎戰鬥的實現。完整的戰鬥估計要用三篇博文來說，因此，這是第一篇。

關於使用的語言，PHP+Javascript(jQuery)+HTML+CSS。沒使用HTML5，由於我還在學HTML5，爭取之後可使用HTML5來進行製做。

關於遊戲設計

遊戲設計包含不少方面，這裏主要是指內容設計，好比職業，技能，系統等。因此，其實本不在該篇內容以內，可是爲了能很好的說明基礎戰鬥，這裏仍是要說兩句。

從名字就能看出來，是和魔獸世界有關的，因此，職業、技能等都使用魔獸世界的東西。關於技能，每一個職業將會有5種技能，3種主動技能（如：攻擊，補血），2種輔助技能（如：加BUFF，保護隊友等）。

本篇主要講基礎戰鬥，因此只會涉及攻擊和補血，其它的戰鬥狀況將會在之後介紹

戰鬥界面預覽

試玩-基礎戰鬥

這裏能夠試玩

基礎戰鬥的主要內容

從程序的角度講，也就兩方面，一、處理動畫。二、處理數據。那麼本篇的內容以下：

• 普通攻擊的傷害計算
• 爆機攻擊的傷害計算
• 單體補血
• 羣體補血
• 職業能量和技能消耗能量的判斷
• 電腦隨機選擇玩家角色進行攻擊
• 攻擊動畫（包括補血）
• 受到傷害動畫
• 血條、能量條的消耗與增長計算
• 角色死亡

在講這些內容前，還得先講講職業角色的內容，關係到戰鬥時數據的讀取與處理

職業角色的屬性

每個職業角色，都用一個數組來保存它的各類屬性，拿戰士爲例，它會有如下幾個屬性

• 職業
• 種族
• 性別
• 等級
• 總血量
• 剩餘血量
• 能量上限
• 已有能量
• 能量顏色(用於顯示)
• 能量類型
• 爆機概率
• 攻擊速度

以上只是本篇博文要介紹的內容，固然一個角色還有不少的屬性，如：buff，debuff，角色狀態（如：盜賊的潛行）

玩家角色屬性數組：

$this->_players_status=array(
    '1'=>array(
        'profession'=>'priest',  //職業：牧師
        'race'=>'human',  //種族：人類
        'sex'=>'female',  //性別：女
        'lv'=>1,  //等級：1級
        'blood_total'=>400,  //總血量：400
        'blood_remain'=>400,  //剩餘血量：400
        'energy_total'=>600,  //能量上限：600
        'energy'=>600,  //剩餘能量：600
        'energy_type'=>'magic',  //能量類型：魔法
        'energy_color'=>'blue',  //能量顏色
        'crit'=>10,  //爆機概率：10%
        'speed'=>25  //攻擊速度：25%
    ),
    '2'=>array(
        'profession'=>'warrior',
        'race'=>'dwarf',
        'sex'=>'female',
        'lv'=>1,
        'blood_total'=>500,
        'blood_remain'=>500,
        'energy_total'=>100,
        'energy'=>0,
        'energy_type'=>'rage',
        'energy_color'=>'red',
        'crit'=>10,
        'speed'=>10
    ),
);

 

這些屬性裏不少一看就懂的，也沒什麼特別。只是要講講幾個和攻擊效果有關的

energy_type：能量類型。咱們知道魔獸世界裏的能量有三種：

• 一、魔法。初始狀態是滿值，即等於能量上限
• 二、怒氣。初始狀態是空值，即0
• 三、能量。初始狀態是滿值，即等於能量上限

在這裏，魔法和能量從類型上講是同樣的，只是顏色不一樣，因此用energy_color來作一下區分。程序根據它們的值來調用不一樣的CSS樣式，從而顯示不一樣的顏色

crit：爆機概率。是一個百分比。

speed：攻擊速度。也是一個百分比，它是決定攻擊前後順序的一個值。好比敵我雙方有10個角色，在玩家技能選擇結束後，哪一個角色先攻擊，就靠這個值來作排序，值越大的，越先攻擊。

職業技能的屬性

和角色屬性同樣，技能屬性也用一個數組來保存，看看牧師和戰士的技能先：

$this->_players_skills=array(
    '1'=>array(  //對應角色屬性數組裏的角色
        'kszl'=>array(  //技能簡寫（拼音）
            'id'=>0,    //技能ID
            'name'=>'快速治療',  //技能名稱
            'damage'=>120,  //技能基本傷害值（若是是治療技能，它就是基本補血值）
            'use_energy'=>50,  //使用能量值
            'add_energy'=>0,  //增長能量值
            'cure'=>1,  //是不是治療技能
            'unit'=>'1',  //傷害單位，數值或百分比
            'member'=>1,  //目標單位數，0爲羣體
            'explanation'=>'快速治療一名友放目標，回覆120點生命',  //技能介紹
        ),
        'zldy'=>array(
            'id'=>1,
            'name'=>'治療禱言',
            'damage'=>80,
            'use_energy'=>100,
            'add_energy'=>0,
            'cure'=>1,
            'unit'=>'1',
            'member'=>0,
            'explanation'=>'爲全部隊友回覆80點生命',
        ),
        'cj'=>array(
            'id'=>2,
            'name'=>'懲擊',
            'damage'=>120,
            'use_energy'=>80,
            'add_energy'=>0,
            'explanation'=>'懲擊一名敵人，形成120點神聖傷害',
        ),
        'tkyz'=>array(
            'id'=>3,
            'name'=>'痛苦壓制',
            'damage'=>40,
            'use_energy'=>120,
            'add_energy'=>0,
            'explanation'=>'保護一名隊友，使其受到的全部傷害減小40%',
        ),
        'zysd'=>array(
            'id'=>4,
            'name'=>'真言術韌',
            'damage'=>30,
            'use_energy'=>80,
            'add_energy'=>0,
            'explanation'=>'增長全部小隊成員30%生命',
        ),

    ),
    '2'=>array(
        'zs'=>array(
            'id'=>0,
            'name'=>'致死打擊',
            'damage'=>100,
            'use_energy'=>0,
            'add_energy'=>20,
            'explanation'=>'一次強有力的攻擊，形成100點傷害，產生20點怒氣值',
        ),
        'jrdj'=>array(
            'id'=>1,
            'name'=>'巨人打擊',
            'damage'=>80,
            'use_energy'=>0,
            'add_energy'=>0,
            'explanation'=>'形成80點基礎傷害，可使你接下來的攻擊無視目標100%護甲，持續3個回合',
        ),
        'yy'=>array(
            'id'=>2,
            'name'=>'英勇',
            'damage'=>150,
            'use_energy'=>30,
            'add_energy'=>0,
            'explanation'=>'一次猛烈攻擊，形成150點傷害，消耗30點怒氣',
        ),
        'yh'=>array(
            'id'=>3,
            'name'=>'援護',
            'damage'=>0,
            'use_energy'=>0,
            'add_energy'=>0,
            'explanation'=>'高速跑向一名隊友，你將代替目標承受下一次攻擊',
        ),
        'jjnh'=>array(
            'id'=>4,
            'name'=>'集結吶喊',
            'damage'=>20,
            'use_energy'=>0,
            'add_energy'=>0,
            'cure'=>1,
            'unit'=>'%',
            'member'=>0,
            'explanation'=>'暫時使全隊成員生命值提升20%，持續3個回合，3個回合後，這些生命值將被扣除',
        ),
    ),
);

 

第一個技能寫了註釋，這裏仍是要講一下幾個特別一點東西

user_energy和add_energy：消耗能量和增長能量。這就是能量類型中魔法和怒氣的區別，魔法，在普通攻擊技能下只會消耗，而怒氣則不一樣，有的技能產生怒力，而不消耗怒氣，有的消耗而不產生。因此有這兩個屬性值。

unit：單位。通常狀況下就兩種，一、數值。二、是百分比。若是是百分比，系統會按傷害值的百分比進行計算，若是是數值，則不用

有了職業角色屬性和職業技能屬性後，下面就來說講戰鬥相關內容

攻擊和補血

攻擊和補血在程序看來，是沒區別的，只是目標對象不同。攻擊針對敵方目標，補血針對已方目標。攻擊多數是減血量，而補血多數是增長血量。

在攻擊的邏輯上，首先得判斷目標是生存狀況，若是已經死了，萬萬不能鞭屍。

這篇主要是角色職業、技能設定，下一篇就是前端戰鬥實現了