Created
April 25, 2017 11:53
-
-
Save mtancoigne/55788679b1d599b41b939c423ffa985d to your computer and use it in GitHub Desktop.
Hangman 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
<template> | |
<div id="app"> | |
<div v-if="!gagne && !perdu"> | |
<h1>Le pendu avec les animaux</h1> | |
<pre class="mot">{{motADeviner}}</pre> | |
<div> | |
<button v-for="l in lettres" | |
@click="testeLettre(l)" | |
:disabled="testees.indexOf(l) > -1" | |
class="btn-lettre" | |
:class="succes.indexOf(l) > -1 && 'success'">{{ l }} | |
</button> | |
</div> | |
</div> | |
<div v-else-if="perdu" class="perdu"> | |
<div> | |
Perdu ! Le mot à deviner était "{{mot}}" | |
<button @click="reset">Recommencer</button> | |
</div> | |
</div> | |
<div v-else class="gagne"> | |
<div>Gagné</div> | |
<button @click="reset">Recommencer</button> | |
</div> | |
</div> | |
</template> | |
<script> | |
// Liste de mots | |
const mots = ['chat', 'chien', 'rat', 'oiseau']; | |
export default { | |
name: 'app', | |
data(){ | |
return { | |
// Alphabet (on le met là pour y accéder dans la vue) | |
lettres: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'], | |
// Liste des lettres valides | |
succes: [], | |
// Liste des lettres ratées | |
rates: [], | |
// Mot à deviner: | |
mot: mots[parseInt(Math.floor(Math.random() * mots.length), 10)], | |
// Lettres testées (pour l'affichage) | |
testees: [], | |
}; | |
}, | |
computed: { | |
motADeviner(){ | |
let out = []; | |
for (const l of this.mot) { | |
out.push(this.succes.indexOf(l) === -1 ? '_' : l); | |
} | |
return out.join(' '); | |
}, | |
gagne(){ | |
return this.succes.length === this.mot.length | |
}, | |
perdu(){ | |
return this.rates.length > 6 | |
}, | |
}, | |
methods: { | |
testeLettre(lettre){ | |
this.testees.push(lettre) | |
if (this.mot.indexOf(lettre) > -1) { | |
this.succes.push(lettre); | |
} else { | |
this.rates.push(lettre); | |
} | |
}, | |
reset(){ | |
this.succes = []; | |
this.rates = []; | |
this.mot = mots[parseInt(Math.floor(Math.random() * mots.length), 10)]; | |
this.testees = []; | |
} | |
} | |
}; | |
</script> | |
<style> | |
body { | |
background-color: #EEE; | |
font-family: sans-serif; | |
color: #333; | |
padding: 0; | |
margin: 0; | |
} | |
.btn-lettre { | |
/*padding:15px;*/ | |
font-size: 2em; | |
border: 1px solid #333; | |
background-color: #FFF; | |
width: 2em; | |
height: 2em; | |
margin: 3px; | |
} | |
[disabled] { | |
opacity: .5; | |
} | |
.success, | |
[disabled].success { | |
color: green; | |
background-color: lightgreen; | |
} | |
/* Pas encore au point sur les flex... */ | |
.gagne, | |
.perdu { | |
text-align: center; | |
font-size: 2em; | |
height: 100vh; | |
padding: 2em; | |
} | |
.gagne { | |
color: green; | |
background-color: lightgreen; | |
} | |
.perdu { | |
color: darkred; | |
background-color: red; | |
} | |
.mot{ | |
font-size:3em; | |
text-align: center; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment