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
| function getRandomValue(min, max){
| return Math.floor(Math.random() * (max - min)) + min;
| }
|
|
| const app = Vue.createApp({
| data() {
| return {
| playerHealth: 100,
| monsterHealth: 100,
| };
| },
| computed: {
| monsterBarStyle(){
| return {width: this.monsterHealth + '%'}
| },
| playerBarStyle(){
| return {width: this.playerHealth + '%'}
| },
| },
| watch: {},
| methods: {
| attackMonster() {
| const attackValue = getRandomValue(5,12);
| this.monsterHealth -= attackValue;
| this.attackPlayer();
| },
| attackPlayer(){
| const attackValue = getRandomValue(8,15);
| this.playerHealth -= attackValue;
| },
| },
| });
|
| app.mount("#game");
|
|
