1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| function getRandomValue(min, max) {
| return Math.floor(Math.random() * (max - min)) + min;
| }
|
| const app = Vue.createApp({
| data() {
| return {
| playerHealth: 100,
| monsterHealth: 100,
| currentRound: 0,
| winner: null,
| logMessages: []
| };
| },
| computed: {
| monsterBarStyles() {
| if (this.monsterHealth < 0) {
| return { width: '0%' };
| }
| return { width: this.monsterHealth + '%' };
| },
| playerBarStyles() {
| if (this.playerHealth < 0) {
| return { width: '0%' };
| }
| return { width: this.playerHealth + '%' };
| },
| mayUseSpecialAttack() {
| return this.currentRound % 3 !== 0;
| },
| },
| watch: {
| playerHealth(value) {
| if (value <= 0 && this.monsterHealth <= 0) {
| // A draw
| this.winner = 'draw';
| } else if (value <= 0) {
| // Player lost
| this.winner = 'monster';
| }
| },
| monsterHealth(value) {
| if (value <= 0 && this.playerHealth <= 0) {
| // A draw
| this.winner = 'draw';
| } else if (value <= 0) {
| // Monster lost
| this.winner = 'player';
| }
| },
| },
| methods: {
| startGame() {
| this.playerHealth = 100;
| this.monsterHealth = 100;
| this.winner = null;
| this.currentRound = 0;
| this.logMessages = [];
| },
| attackMonster() {
| this.currentRound++;
| const attackValue = getRandomValue(5, 12);
| this.monsterHealth -= attackValue;
| this.addLogMessage('player', 'attack', attackValue);
| this.attackPlayer();
| },
| attackPlayer() {
| const attackValue = getRandomValue(8, 15);
| this.playerHealth -= attackValue;
| this.addLogMessage('monster', 'attack', attackValue);
| },
| specialAttackMonster() {
| this.currentRound++;
| const attackValue = getRandomValue(10, 25);
| this.monsterHealth -= attackValue;
| this.addLogMessage('player', 'attack', attackValue);
| this.attackPlayer();
| },
| healPlayer() {
| this.currentRound++;
| const healValue = getRandomValue(8, 20);
| if (this.playerHealth + healValue > 100) {
| this.playerHealth = 100;
| } else {
| this.playerHealth += healValue;
| }
| this.addLogMessage('player', 'heal', healValue);
| this.attackPlayer();
| },
| surrender() {
| this.winner = 'monster';
| },
| addLogMessage(who, what, value) {
| this.logMessages.unshift({
| actionBy: who,
| actionType: what,
| actionValue: value
| });
| }
| },
| });
|
| app.mount('#game');
|
|
