打怪兽（Vue，小实验）

一个小小的实验，看的玩就行

参照Udemy 实验所作，

html部分

  
    
    
    
    
    
    
    
  
  
    

      Monster Slayer
    
    
      

        怪兽血量
        
          
        
      
      

        你的血量
        
          
        
      
	  

		   Game Over!
		  You Lost!
		  You won!
		  It's a draw!
		  开始新的游戏
	  
      

        普通攻击
        特殊攻击
        治疗
        投降
      
      

        对抗日志
        
			
				
				{{message.actionBy === 'player' ? 'Player' : 'Monster'}}
				治疗值:{{message.actionValue}} 
				攻击值{{message.actionValue}} 
			
		
      
    
  

js部分

function get_attck(min, max) {
	return Math.floor((Math.random() * (max - min)) + min);
}
const app = Vue.createApp({
	data() {
		return {
			playerHealth: 100,
			monsterHealth: 100,
			currentRound: 0,
			winner:null,
			LogMessage:[]
		}
	},
	computed: {
		playerBar() {
			if(this.playerHealth<0){
				return {width:'0%'};
			}
			return {
				width: this.playerHealth + '%'
			};
		},
		monsterBar() {
			if(this.monsterHealth<0){
				return {width:'0%'};
			}
			return {
				width: this.monsterHealth + '%'
			};
		},
		mayAttack() {
			return this.currentRound % 3 !== 0;
		}
	},
	watch:{
		playerHealth(value){
			if(value<0 && this.monsterHealth <0){
				this.winner = 'draw';
			}else if(value<0){
				this.winner='monster';
			}
		},
		monsterHealth(value){
			if(value<0 && this.playerHealth <0){
				this.winner = 'draw';
			}else if(value<0){
				this.winner='player';
			}
		}
	},
	methods: {
		startNewGame(){
			this.playerHealth = 100;
			this.monsterHealth = 100;
			this.currentRound = 0;
			this.winner = null;
			this.LogMessage = [];
		},
		AttackMonster() {
			this.currentRound++;
			const attackValue = get_attck(5, 12);        //修改你的基础攻击
			this.monsterHealth -= attackValue;
			this.addMessage('player','attack',attackValue);
			this.AttackPlayer();
		},
		AttackPlayer() {
			const attackValue = get_attck(8, 15);        //修改怪兽攻击
			this.playerHealth -= attackValue;
			this.addMessage('monster','attack',attackValue);
		},
		specialAttack() {
			this.currentRound++;
			const attackValue = get_attck(9,20);        //暴击
			this.monsterHealth -= attackValue;
			this.AttackPlayer();
			this.addMessage('player','spacial_attack',attackValue);
		},
		healPlayer() {
			this.currentRound++;
			const healValue = get_attck(4,12);        //治疗值
			if (this.playerHealth + healValue > 100) {
				this.playerHealth = 100;
			} 
			else {
				this.playerHealth += healValue;
			}
			this.addMessage('player','Heal',healValue);
			this.AttackPlayer();
		},
		surrend(){
			this.winner='monster';
		},
		addMessage(who,what,value){
			console.log(this.LogMessage);
			this.LogMessage.unshift({
				actionBy:who,
				actiontype:what,
				actionValue:value
			});
		}
	}
});
app.mount("#game");

css

* {
  box-sizing: border-box;
}

html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 0.5rem;
  background-color: #880017;
  color: white;
  text-align: center;
  margin-bottom: 2rem;
}

section {
  width: 90%;
  max-width: 40rem;
  margin: auto;
}

.healthbar {
  width: 100%;
  height: 40px;
  border: 1px solid #575757;
  margin: 1rem 0;
  background: #fde5e5;
}

.healthbar__value {
  background-color: #00a876;
  width: 100%;
  height: 100%;
}

.container {
  text-align: center;
  padding: 0.5rem;
  margin: 1rem auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  border-radius: 12px;
}

#monster h2,
#player h2 {
  margin: 0.25rem;
}

#controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

button {
  font: inherit;
  border: 1px solid #88005b;
  background-color: #88005b;
  color: white;
  padding: 1rem 2rem;
  border-radius: 12px;
  margin: 1rem;
  width: 12rem;
  cursor: pointer;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

button:focus {
  outline: none;
}

button:hover,
button:active {
  background-color: #af0a78;
  border-color: #af0a78;
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26);
}

button:disabled {
  background-color: #ccc;
  border-color: #ccc;
  box-shadow: none;
  color: #3f3f3f;
  cursor: not-allowed;
}

#log ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#log li {
  margin: 0.5rem 0;
}

.log--player {
  color: #7700ff;
}

.log--monster {
  color: #da8d00;
}

.log--damage {
  color: red;
}

.log--heal {
  color: green;
}