vue endless h5 game
1.0.0
An adventure game developed using Vue.js;
git clone https://github.com/bastarder/Endless.git
cd Endless
npm install
npm run devIf you are like me, a student, like front-end development, suffer from projects that don’t practice, or you are already a big shot, you might as well complete such a small game with me. The most complex combat system in this game has been basically completed, and there are some relatively easy functions left to give you a good exercise.
This is a simple adventure game, and I also hope to get better exercise during the writing process;
I am really not good at data design and UI design. If you feel that you are willing to help when you are free, you can contact me;
QQ:85257684 , Wechat: I85257
The combat system in the game uses技能冷却mode, sending one skill to one target at a time, and calculating the effect of one action as the combat logic.
First of all, the general logic: (Fight.js)
When技能被释放, it will be given priority to enter this method. This method accepts 3 parameters,技能对象,攻击方, and被攻击方. You can customize it based on these three parties to determine whether this skill can be released;
When the skill is determined to be able to be successfully released, the skill will enter cooldown;
Extract the state of type : 1 from the attacker, and extract the state of type : 2 from the attacker;
type : 1 is all states that can affect this skill, and should be created according to this rule when customizing the state, otherwise it will not be recognized;
type : 2 is all states that can affect the changes caused to the enemy by this skill, and should be created according to this rule when customizing the state, otherwise it will not be recognized;
Extract and merge the events in the skill and state object, sort by priority;
Skill action objects are calculated from all states and skill action effects and sorted according to weights;
Rules for tentative weights
1-10 Action layer, the weight value needs to be defined in this range for events related to preconditions such as critical暴击,命中,闪避etc.;11-89 Normal layer, ordinary effects, such as damage caused by skills, status addition, removal, update, etc., most of them are in the normal layer;>90 In the 90 level, the final result of this skill under all recognizable bonuses (such as causing damage, recovering health, etc.). If your status needs to cause a最终加成, such as a 50% increase in the final damage, then this event must be defined at the 90th level, after the calculation result is determined;9999 , all weights should not exceed 9999. When calculating this layer, the action object will be converted into parameters that can be directly executed by unit interface and will not be changed;After the action object is generated, determine whether the attack is valid (such as must-win, miss, etc. ps: must-win will be preferred over 100%miss);
After confirming that it is valid, the object of action will be proxyed to攻击者and被攻击者to deal with;
At this point, the skill is fully released, and each skill is released is 1s , which means that after releasing a skill, all skills will receive a 1 second cooldown (if the skill cooldown time is less than 1 second, it will be forced to increase to 1 second);
A skill release ends. If one of the attacking party and the attacked party dies, it returns false
Consumption calculation
The formula currently used is: (Level* Base Amount) * (Strength Level + 1) * Grade Parameters
Chance calculation
The probability is fixed: [1, 1, 1, 0.95, 0.9, 0.8, 0.75, 0.62, 0.54, 0.41, 0.33, 0.28, 0.2, 0.17, 0.13, 0.1, 0.04, 0.03, 0.01, 0.01]
Attribute amplitude calculation
Processing after the strengthening failure
General process: Judge the preconditions -> Judge the probability of strengthening -> Recalculate the attributes
In the map, we can always trigger events to obtain specific effects. There are currently two built-in events:
Battle Event : When the hero enters this event grid, he will use the event object to create a battle event and jump to the battle interface. When the battle is over, he will return to the map;
Dialogue Event : When the hero enters this event grid, he will use the event object to create a dialogue event, and have some dialogue interactions with the hero, branch events, item exchange, etc.;
Event definition rules:
1. 事件将在判定允许被移动后,直接执行;
2. 在执行阶段可捕获的参数有: 当前格子对象,目标格子对象,英雄对象
3. 事件必须为一个可执行的函数;
4. 详细可以参考内置事件(event-class.js)
Here, we quote examples to explain the definition rules of skill objects;
Data (skill-data.js, state-data.js), all string forms will be converted into executable functions战斗技能释放,计算行动对象时;
example
{
id: 1000002,
name: '净化',
dsc : '净化中毒效果~',
label : ['测试2','伤害2'],
defaultTime : 3000,
restrict : [
"[attacker]{$mp} >= {60}",
"[attacker]{$hp} <= {250}",
"[attacker]{$skills} nothas {1000003,1000001}",
"[attacker]{$status} has {2000001}",
"[skill]{coolTime} > {0}",
function(skill, attacker, enemy){
return true;
}
],
eventList : [
`[1]enemy@changeHp@attacker.$atk`,
`[2]attacker@changeHp@2`,
`[3]
action@{action.state.isCritical === true};
attacker@{attacker.$hp > (attacker.$hp * 0.5)}
#
enemy@changeState@[{ id: 2000001, state: "ADD" }];
enemy@changeHp@attacker.$atk
`
,
`[4]action@{action.state.isCritical = true}`,
],
// 当为状态时还可以添加下面2个属性;
stateEvent : function(hero) {
var self = this;
var duration = 5;
var per = 1;
var current = 1;
self.stateEventTimer = setInterval(function(){
hero.changeHp(-30);
current +=1;
if(current > 5){
clearInterval(self.stateEventTimer);
hero.removeList('$status',self);
}
}, per * 1000);
this.actived = true;
},
powerUp : {
$maxHp : [0,0,0,0],
},
},
| key | value | dsc |
|---|---|---|
| id | Number | The unique identification of a skill |
| name | String | The name of the skill |
| label | [String] | Skill tags |
| defaultTime | Number | Skill cooldown time, unit milliseconds |
| restrict | [String or function] | The precondition for skill release. When parsing as a function, it can access 3 parameters,技能,攻击者, and被攻击者. When the function returns true, this rule is passed. String resolution rules: [对象]{属性名1} 标识符{值} , identifier supports > < >= <= nothas has , the final value of the expression will be judged as true and false |
| eventList | [String or function] | Event list can be a function, which accepts 3 parameters,行动对象, attacker,攻击者,被攻击者, string form parsing rules [权重]参数名@{前置条件语句}#参数名@事件@事件参数, multiple items should be used ; separate, and the end entry does not need to add a separator |
| stateEvent | function | Continuous state, this function will be executed when a state is added to the object. In this function, the unit being acted can be accessed and some processing is done. |
| powerUp | object | The attribute improvement brought by state, Array value analysis, [值, 类型: 0:基础值1:基础百分2:高级值3:高级百分] , Attribute calculation formula ((默认+ 基础值) * (1 + 基础百分) + 高级值) * (1 + 高级百分) |
Congratulations, you can now create a skill of your own
// 装备
{
id: 30000012,
name: '精致的铁剑',
level: 1,
grade: 1,
equipType : 0,
label: [
'武器'
],
intensify : 1,
intPowerUp : {
$atk: 123
},
equip : {
$def: 2,
$atk: 15,
$maxHp : 5,
$maxMp : 5,
},
dsc : '用野草编制的手镯'
}
// 物品
{
id: 3000001,
name: '野草',
pile : true,
price : 10,
use : {
defaultTime : 1000,
restrict :[
function(){
return this.$hp > 500;
}
],
effect :[
function(){
this.changeHp(30);
}
]
},
label : [
'材料'
],
dsc : '很常见的东西,或许能用来做一些东西'
},
| key | value | dsc |
|---|---|---|
| level | Number | Level of equipment |
| grade | Number | The grade of equipment is白0 ,绿1 ,蓝2 ,紫3 ,橙4 |
| equipType | Number | Equipment type武器0 ,护肩1 ,鞋子2 ,腰带3 ,上衣4 ,绑腿5 ,戒指6 ,项链7 ,手镯8 , |
| equip | object | The value of the attribute parameter of the equipment is the same as the powerUp of状态. |
| Intensify | Number | Strengthening level |
| intPowerUp | Object | The buff brought by the enhancement is $atk , and the rest of the armor is $dmgDown (percent damage reduction) |
| pile | Boolean | Is it possible to superimpose |
| price | Number | The value of the item |
| Use | object | The effect of the item can be used defaultTime :冷却时间, restrict 前置条件列表,接受函数为单个条件,this指向使用者, effect 造成的效果列表,接受函数为单个事件,this指向使用者 |
| How about it? Have you found out that you still can't create your own equipment~ It doesn't matter, it's because I didn't express it well~ |
