SHARE
TWEET

Untitled

a guest Oct 15th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div class="place">
  3.         <div class="player">
  4.             <div class="health">{{ hp1 }} hp</div>
  5.             <div class="block"></div>
  6.         </div>
  7.         <div class="player">
  8.             <div class="health">{{ hp2 }} hp</div>
  9.             <div class="block"></div>
  10.         </div>
  11.         <button v-on:click="fight">Fight</button>
  12.     </div>
  13. </template>
  14.  
  15. <script>
  16.     export default {
  17.         name: "MainPage",
  18.         data() {
  19.             return {
  20.                 hp1: 100,
  21.                 hp2: 100
  22.             }
  23.         },
  24.         methods: {
  25.             fight() {
  26.                 if ((this.hp1 -= Math.floor(Math.random() * (26 - 5)) + 5) <= 0) {
  27.                     alert("Blue Win!");
  28.                     // this.hp1 = 100;
  29.                     // this.hp2 = 100;
  30.                     // this.$emit('updateScore', 2);
  31.                     return;
  32.                 }
  33.                 if ((this.hp2 -= Math.floor(Math.random() * (26 - 5)) + 5) <= 0) {
  34.                     alert("Yellow Win!");
  35.                     // this.hp1 = 100;
  36.                     // this.hp2 = 100;
  37.                     // this.$emit('updateScore', 1);
  38.                 }
  39.             },
  40.         }
  41.     }
  42. </script>
  43.  
  44. <style scoped>
  45.     button {
  46.         width: 60%;
  47.         height: 35px;
  48.     }
  49.     .place {
  50.         display: flex;
  51.         flex-wrap: wrap;
  52.         width: 15%;
  53.         justify-content: center;
  54.         align-items: center;
  55.     }
  56.     .player {
  57.         background-color: yellow;
  58.         color: darkorange;
  59.         padding: 10px;
  60.         margin: 8px;
  61.         font-size: 23px;
  62.         border: 1px solid black;
  63.     }
  64.     .player:nth-child(2) {
  65.         background-color: lightblue;
  66.     }
  67. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top