Skip to content

Instantly share code, notes, and snippets.

@cagcak

cagcak/monster_slayer_game_vue.html

Created May 27, 2018 18:18
Show Gist options
  • Save cagcak/022afb5ffed9b9e0cbf28493805d8252 to your computer and use it in GitHub Desktop.
Save cagcak/022afb5ffed9b9e0cbf28493805d8252 to your computer and use it in GitHub Desktop.
Download ZIP
Simple game called Monster Slayer with Max on udemy
Raw
monster_slayer_game_vue.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.0/css/foundation.min.css" />
</head>
<body>
<div id="app">
<section class="row controls" v-if="isGameRunning">
<div class="small-12 columns">
<button id="quit-game" @click="quitGame">
{{ app.quit }}
</button>
</div>
</section>
<section class="row">
<div class="small-6 columns">
<h1 class="text-center">{{ app.player }}</h1>
<div class="healthbar">
<div
class="healthbar text-center"
style="margin: 0; color: white;"
:style="[{width: playerHealth + '%'}, {backgroundColor: healthColor}]">
{{ playerHealth }}
</div>
</div>
</div>
<div class="small-6 columns">
<h1 class="text-center">{{ app.monster }}</h1>
<div class="healthbar">
<div
class="healthbar text-center"
style="background-color: green; margin: 0; color: white;"
:style="[{width: monsterHealth + '%'}, {backgroundColor: healthColor}]">
{{ monsterHealth }}
</div>
</div>
</div>
</section>
<section class="row controls" v-if="!isGameRunning">
<div class="small-12 columns">
<button id="start-game" @click="startGame">
{{ app.newGame }}
</button>
</div>
</section>
<section class="row controls" v-else>
<div class="small-12 columns">
<button id="attack" @click="attack">
{{ app.attack }}
</button>
<button id="special-attack" @click="specialAttack">
{{ app.special }}
</button>
<button id="heal" @click="healAction">
{{ app.heal }}
</button>
<button id="give-up" @click="giveUp">
{{ app.give_up }}
</button>
</div>
</section>
<section class="row log" v-if="turns.length > 0">
<div class="small-12 columns">
<ul>
<li v-for="turn in turns" :class="{'player-turn': turn.isPlayer, 'monster-turn': !turn.isPlayer}">
{{ turn.text }}
</li>
</ul>
</div>
</section>
</div>
<script>
new Vue({
el: '#app',
data: {
app: {
player: 'PLAYER',
monster: 'MONSTER',
newGame: 'START NEW GAME',
attack: 'ATTACK',
special: 'SPECIAL ATTACK',
heal: 'HEAL',
give_up: 'GIVE UP',
quit: 'QUIT GAME'
},
playerHealth: 100,
monsterHealth: 100,
healLevel: 10,
isGameRunning: false,
healthColor: 'green',
turns: [
]
},
methods: {
log: function (log) {
console.log(log)
},
startGame: function () {
this.isGameRunning = true
this.playerHealth = 100
this.monsterHealth = 100
this.turns = []
},
quitGame: function () {
this.isGameRunning = false
},
attack: function () {
var damage = this.calculateDamage(3, 10)
this.monsterHealth -= damage
this.turns.unshift({
isPlayer: true,
text: 'Player hits to monster for ' + damage
})
if (this.isWon()) {
return
}
this.monsterAttacks()
},
specialAttack: function () {
var damage = this.calculateDamage(10, 20)
this.monsterHealth -= damage
this.turns.unshift({
isPlayer: true,
text: 'Player hits to monster hard for ' + damage
})
if (this.isWon()) {
return
}
this.monsterAttacks()
},
healAction: function () {
if (this.playerHealth <= 90) {
this.playerHealth += this.healLevel
} else {
this.playerHealth = 100
}
this.turns.unshift({
isPlayer: true,
text: 'Player heals for ' + this.healLevel
})
this.monsterAttacks()
},
checkHealth: function () {
if (this.monsterHealth <= 30){
this.healthColor = 'red';
} else {
this.healthColor = 'green';
}
},
giveUp: function () {
this.isGameRunning = false
},
monsterAttacks: function () {
var damage = this.calculateDamage(5, 12)
this.playerHealth -= damage
this.isWon()
this.turns.unshift({
isPlayer: false,
text: 'Monster hits to player for ' + damage
})
},
calculateDamage: function (min, max) {
this.checkHealth()
return Math.max(Math.floor(Math.random() * max) + 1, min)
},
isWon: function () {
this.checkHealth()
if (this.monsterHealth <= 0) {
if (confirm('Player Won! New Game ?')) {
this.startGame()
} else {
this.isGameRunning = false
}
return true
} else if (this.playerHealth <= 0) {
if (confirm('Game Over! Monster won. New Game ?')) {
this.startGame()
} else {
this.isGameRunning = false
}
return true
}
this.checkHealth()
return false
}
},
created: function() {
document.title = 'Monster Slayer'
document.head.querySelector('meta[name=description]').content = 'First Vue challenge SPA !'
document.head.querySelector('meta[name=author]').content = 'cagcak'
}
})
</script>
<style scoped>
* {
background-color: #333;
color: whitesmoke !important;
}
.text-center {
text-align: center;
}
.healthbar {
width: 80%;
height: 40px;
background-color: #eee;
margin: auto;
transition: width 500ms;
}
.controls, .log {
margin-top: 30px;
text-align: center;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0px 3px 6px #ccc;
}
.turn {
margin-top: 20px;
margin-bottom: 20px;
font-weight: bold;
font-size: 22px;
}
.log ul {
list-style: none;
font-weight: bold;
text-transform: uppercase;
}
.log ul li {
margin: 5px;
}
.log ul .player-turn {
color: blue !important;
background-color: #e4e8ff;
}
.log ul .monster-turn {
color: red !important;
background-color: #ffc0c1;
}
button {
font-size: 20px;
background-color: #eee;
padding: 12px;
box-shadow: 0 1px 1px black;
margin: 10px;
color: #333 !important;
}
#start-game {
background-color: #aaffb0;
}
#start-game:hover {
background-color: #76ff7e;
}
#quit-game {
color: whitesmoke;
background-color: #ff0000;
}
#quit-game:hover {
color: whitesmoke;
background-color: #ff9d9d;
}
#attack {
background-color: #ff7367;
}
#attack:hover {
background-color: #ff3f43;
}
#special-attack {
background-color: #ffaf4f;
}
#special-attack:hover {
background-color: #ff9a2b;
}
#heal {
background-color: #aaffb0;
}
#heal:hover {
background-color: #76ff7e;
}
#give-up {
background-color: #ffffff;
}
#give-up:hover {
background-color: #c7c7c7;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment