Last active
April 24, 2018 19:55
-
-
Save oliverbth05/ea3c4ba4241b453bf324e830234f553b to your computer and use it in GitHub Desktop.
VUE.js Simple Game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #body{ | |
| background: #DA4453; /* fallback for old browsers */ | |
| background: -webkit-linear-gradient(to right, #89216B, #DA4453); /* Chrome 10-25, Safari 5.1-6 */ | |
| background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
| } | |
| #headerSegment{ | |
| text-align:center; | |
| } | |
| .column{ | |
| text-align:center; | |
| } | |
| #actionli{ | |
| list-style-type: none; | |
| } | |
| #text-center{ | |
| color:white; | |
| text-align: center; | |
| } | |
| #textWhite{ | |
| color: white; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> | |
| </head> | |
| <body id = "body"> | |
| <div class = "ui container" id = "project"> | |
| <div class = "ui segment" id = "headerSegment"> | |
| <h1> | |
| First Vue.js Project | |
| </h1> | |
| </div> | |
| <div class = "ui stackable grid" id = "textWhite"> | |
| <div class = "ui eight wide column"> | |
| <h3> | |
| You | |
| </h3> | |
| <div class="ui green progress"> | |
| <div class="bar" id = "text-center" :style = "{width: health + '%'}"></div> | |
| </div> | |
| Health: {{health}} | |
| </div> | |
| <div class = "ui eight wide column"> | |
| <h3> | |
| Monster | |
| </h3> | |
| <div class="ui green progress"> | |
| <div class="bar" id = "text-center" :style = "{width: monsterHealth + '%'}"></div> | |
| </div> | |
| Health: {{monsterHealth}} | |
| </div> | |
| </div> | |
| <div class = "ui segment"> | |
| <button v-if = "show" @click = "newGame()" class = "ui fluid labeled icon button"><i class = "gamepad icon"></i>Start New Game</button> | |
| <template v-if = "!show"> | |
| <h1 style = "text-align:center;"> | |
| Actions | |
| </h1> | |
| <div class = "ui four column stackable centered grid"> | |
| <div class = "column"> | |
| <button @click = "attack" class="ui fluid labeled icon button"> <i class="crosshairs icon"></i>Attack </button> | |
| </div> | |
| <div class = "column"> | |
| <button @click = "specialAttack" class="ui fluid labeled icon button"> <i class="fire icon"></i> Special Attack </button> | |
| </div> | |
| <div class = "column"> | |
| <button @click = "heal" class = "ui fluid labeled icon button"> <i class = "heartbeat icon"></i> Heal</button> | |
| </div> | |
| <div class = "column"> | |
| <button @click = "show = !show" class = "ui fluid labeled icon button"> <i class = "flag outline icon"></i> Give Up</button> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <div> | |
| </div> | |
| <div class = "ui segment"> | |
| <h3> | |
| Action Log | |
| </h3> | |
| <ul> | |
| <li id = "actionli" v-for = "action in actionLog" class = "ui segment">{{action}}</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Vue({ | |
| el: "#project", | |
| data: { | |
| show: true, | |
| actionLog: [], | |
| health: 100, | |
| monsterHealth: 100 | |
| }, | |
| methods:{ | |
| newGame: function(){ | |
| this.actionLog = []; | |
| this.health = 100; | |
| this.monsterHealth = 100; | |
| this.show = !this.show | |
| }, | |
| attack: function(){ | |
| var selfDamage = Math.floor(Math.random() * 9); | |
| this.actionLog.unshift("Monster did " + selfDamage + " points of damage"); | |
| this.health -= selfDamage; | |
| var damage = Math.floor(Math.random() * 10); | |
| this.actionLog.unshift("You did " + damage + " points of damage"); | |
| this.monsterHealth -= damage; | |
| if(this.health <= 0){ | |
| alert("You Lose"); | |
| this.show = !this.show; | |
| } | |
| if(this.monsterHealth <= 0){ | |
| alert("You Win"); | |
| this.show = !this.show; | |
| } | |
| }, | |
| specialAttack: function(){ | |
| var selfDamage = Math.floor(Math.random() * 9); | |
| this.actionLog.unshift("Monster did " + selfDamage + " points of damage"); | |
| this.health -= selfDamage; | |
| var specialDamage = Math.floor(Math.random() * 14); | |
| this.actionLog.unshift("You did " + specialDamage + " points of special damage"); | |
| this.monsterHealth -= specialDamage; | |
| if(this.health <= 0){ | |
| alert("You Lose"); | |
| this.show = !this.show; | |
| } | |
| if(this.monsterHealth <= 0){ | |
| alert("You Win"); | |
| this.show = !this.show; | |
| } | |
| }, | |
| heal: function(){ | |
| var selfDamage = Math.floor(Math.random() * 9); | |
| this.actionLog.unshift("Monster did " + selfDamage + " points of damage"); | |
| this.health -= selfDamage; | |
| var healthRestored = Math.floor(Math.random() * 9); | |
| this.actionLog.unshift("You restored " + healthRestored + " points of health"); | |
| this.health += healthRestored; | |
| if(this.health <= 0){ | |
| alert("You Lose"); | |
| this.show = !this.show; | |
| } | |
| if(this.monsterHealth <= 0){ | |
| alert("You Win"); | |
| this.show = !this.show; | |
| } | |
| }, | |
| calculateDamage: function(){ | |
| } | |
| }, | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment