Guest User

Untitled

a guest
Oct 15th, 2019
75
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