80 lines
1.6 KiB
JavaScript
80 lines
1.6 KiB
JavaScript
|
PLAYER = 0;
|
||
|
|
MONSTER = 1;
|
||
|
|
|
||
|
|
var app = new Vue({
|
||
|
|
el: '#app',
|
||
|
|
data: {
|
||
|
|
pHP: 100,
|
||
|
|
mHP: 100,
|
||
|
|
gameOn: false,
|
||
|
|
logs: [],
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
pHP(value){
|
||
|
|
if (value <= 0){
|
||
|
|
alert("You lose");
|
||
|
|
this.giveUp();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mHP(value){
|
||
|
|
if (value <= 0){
|
||
|
|
alert("You Win!");
|
||
|
|
this.giveUp();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
start(){
|
||
|
|
this.gameOn = true;
|
||
|
|
this.mHP = 100;
|
||
|
|
this.pHP = 100;
|
||
|
|
this.logs = [];
|
||
|
|
},
|
||
|
|
playerAttack(){
|
||
|
|
console.log("player Attack");
|
||
|
|
var dmg = this.getRandomInt(1, 10);
|
||
|
|
var log = {attacker: 'player', dmg: dmg}
|
||
|
|
this.mHP -= dmg;
|
||
|
|
this.logs.unshift(log);
|
||
|
|
this.monsterAttack();
|
||
|
|
},
|
||
|
|
specialAttack(){
|
||
|
|
console.log("special Attack");
|
||
|
|
var dmg = this.getRandomInt(1, 20);
|
||
|
|
var log = {attacker: 'player', dmg: dmg}
|
||
|
|
this.mHP -= dmg;
|
||
|
|
this.logs.unshift(log);
|
||
|
|
this.monsterAttack();
|
||
|
|
},
|
||
|
|
heal(){
|
||
|
|
console.log("heal");
|
||
|
|
var hp = this.getRandomInt(1, 10);
|
||
|
|
this.pHP += hp;
|
||
|
|
this.monsterAttack();
|
||
|
|
},
|
||
|
|
giveUp(){
|
||
|
|
this.gameOn = false;
|
||
|
|
this.logs = [];
|
||
|
|
},
|
||
|
|
monsterAttack(){
|
||
|
|
console.log("attacked");
|
||
|
|
var dmg = this.getRandomInt(1, 10);
|
||
|
|
var log = { attacker: 'monster', dmg: dmg}
|
||
|
|
this.pHP -= dmg;
|
||
|
|
this.logs.unshift(log);
|
||
|
|
},
|
||
|
|
getRandomInt(min, max) {
|
||
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
mHPStyle(){
|
||
|
|
return {width: this.mHP + "%"};
|
||
|
|
},
|
||
|
|
pHPStyle(){
|
||
|
|
return {width: this.pHP + "%"};
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|