finish hangman v1
This commit is contained in:
@@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<h1>Liste des jeux</h1>
|
||||
<div>
|
||||
<router-link to="/jeux/pendu">
|
||||
Pendu
|
||||
</router-link>
|
||||
<div class="game-index">
|
||||
<HangmanIndex link="/jeux/pendu" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HangmanIndex from "./HangMan/HangmanIndex";
|
||||
|
||||
export default {
|
||||
name: "GameIndex"
|
||||
name: "GameIndex",
|
||||
components: {
|
||||
HangmanIndex
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
157
resources/js/views/Games/HangMan/Hangman.vue
Normal file
157
resources/js/views/Games/HangMan/Hangman.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="p-2 game-container">
|
||||
<h1 class="text-center">Pendu</h1>
|
||||
<p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
|
||||
<div class="flex">
|
||||
<div class="game-container-box">
|
||||
<svg height="250" width="200" class="figure-container">
|
||||
<!-- Potence -->
|
||||
<line x1="60" y1="20" x2="140" y2="20" />
|
||||
<line x1="140" y1="20" x2="140" y2="50" />
|
||||
<line x1="60" y1="20" x2="60" y2="230" />
|
||||
<line x1="20" y1="230" x2="100" y2="230" />
|
||||
|
||||
<!-- Tête -->
|
||||
<circle cx="140" cy="70" r="20" class="figure-part"/>
|
||||
<!-- Corps -->
|
||||
<line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
|
||||
<line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
|
||||
<line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
|
||||
<line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
|
||||
<line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="game-container-box">
|
||||
<div class="wrong-letters-container">
|
||||
<div v-html="wrongLettersEl" class="wrong-letters"></div>
|
||||
<div class="word" v-html="wordEl"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="notification" class="notification-container" id="notification-container">
|
||||
<p>Vous avez déjà saisie cette lettre.</p>
|
||||
</div>
|
||||
<div v-if="popup" class="popup-container" id="popup-container">
|
||||
<div class="popup">
|
||||
<h2>{{ finalMessage }}</h2>
|
||||
<button id="play-button" @click="playAgain">Rejouer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-input">
|
||||
<label for="saisie" class="pb-1">Saisir vos lettres ici</label>
|
||||
<input v-model="letterBox" id="saisie" type="text" @keyup="keyMessage">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Hangman",
|
||||
data: function () {
|
||||
return {
|
||||
words: ['pimprenelle', 'culcul', 'milo', 'Prout'],
|
||||
letterBox: '',
|
||||
figureParts: [],
|
||||
correctLetters: [],
|
||||
wrongLetters: [],
|
||||
wrongLettersEl: '',
|
||||
selectedWord: '',
|
||||
wordEl: '',
|
||||
finalMessage: '',
|
||||
popup: false,
|
||||
notification: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase()
|
||||
this.figureParts = this.$el.querySelectorAll('.figure-part')
|
||||
this.displayWord()
|
||||
},
|
||||
methods: {
|
||||
keyMessage(e) {
|
||||
console.log(event.key, event.keyCode)
|
||||
if(e.keyCode >= 65 && e.keyCode <= 90) {
|
||||
const letter = e.key
|
||||
|
||||
if(this.selectedWord.includes(letter)) {
|
||||
if(!this.correctLetters.includes(letter)) {
|
||||
this.correctLetters.push(letter)
|
||||
|
||||
this.displayWord()
|
||||
} else {
|
||||
this.showNotification()
|
||||
}
|
||||
} else {
|
||||
if(!this.wrongLetters.includes(letter)) {
|
||||
this.wrongLetters.push(letter);
|
||||
|
||||
this.updateWrongLettersEl()
|
||||
} else {
|
||||
this.showNotification()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
displayWord() {
|
||||
this.wordEl =
|
||||
this.selectedWord
|
||||
.split('')
|
||||
.map(
|
||||
letter => {
|
||||
let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
|
||||
return '<span class="letter">' + toggleLetter +"</span>"
|
||||
}
|
||||
).join('');
|
||||
|
||||
const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
|
||||
|
||||
console.log('win', innerWord, this.selectedWord)
|
||||
if(innerWord === this.selectedWord) {
|
||||
this.finalMessage = 'Gagné! 😃';
|
||||
this.popup = true
|
||||
}
|
||||
},
|
||||
updateWrongLettersEl() {
|
||||
console.log('wrong', this.wrongLettersEl)
|
||||
this.wrongLettersEl =
|
||||
!this.wrongLetters ? '<p>Wrong</p>' : ''
|
||||
+
|
||||
this.wrongLetters.map(letter => `<span>${letter}</span>`);
|
||||
|
||||
// Display parts
|
||||
this.figureParts.forEach((part, index) => {
|
||||
const errors = this.wrongLetters.length;
|
||||
|
||||
if(index < errors) {
|
||||
part.style.display = 'block'
|
||||
} else {
|
||||
part.style.display = 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// Check if lost
|
||||
if(this.wrongLetters.length === this.figureParts.length) {
|
||||
this.finalMessage = 'Perdu. 😕';
|
||||
this.popup = true
|
||||
}
|
||||
},
|
||||
playAgain: function () {
|
||||
this.correctLetters.splice(0);
|
||||
this.wrongLetters.splice(0);
|
||||
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase();
|
||||
this.displayWord();
|
||||
this.updateWrongLettersEl();
|
||||
this.popup = false
|
||||
this.letterBox = ''
|
||||
},
|
||||
showNotification(){
|
||||
this.notification = true
|
||||
|
||||
setTimeout(() => {
|
||||
this.notification = false
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
13
resources/js/views/Games/HangMan/HangmanIndex.vue
Normal file
13
resources/js/views/Games/HangMan/HangmanIndex.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<router-link :to="link" class="game-index-item">
|
||||
<svg-vue icon="hangman" />
|
||||
<h2>Pendu</h2>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HangmanIndex",
|
||||
props: ["link"],
|
||||
}
|
||||
</script>
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<h1>Pendu</h1>
|
||||
<p>Trouve le mot du pendu - Saisi les lettres</p>
|
||||
<div class="game-container">
|
||||
<svg height="250" width="200" class="figure-container">
|
||||
<!-- Potence -->
|
||||
<line x1="60" y1="20" x2="140" y2="20" />
|
||||
<line x1="140" y1="20" x2="140" y2="50" />
|
||||
<line x1="60" y1="20" x2="60" y2="230" />
|
||||
<line x1="20" y1="230" x2="100" y2="230" />
|
||||
|
||||
<!-- Tête -->
|
||||
<circle cx="140" cy="70" r="20" class="figure-part"/>
|
||||
<!-- Corps -->
|
||||
<line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
|
||||
<line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
|
||||
<line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
|
||||
<line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
|
||||
<line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
|
||||
</svg>
|
||||
|
||||
<div class="wrong-letters-container">
|
||||
<div v-html="wrongLetters"></div>
|
||||
</div>
|
||||
|
||||
<div class="word" v-html="wordEl"></div>
|
||||
</div>
|
||||
|
||||
<div class="popup-container" id="popup-container">
|
||||
<div class="popup">
|
||||
<h2 id="final-message"></h2>
|
||||
<button id="play-button" @click="playAgain">Play Again</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notification-container" id="notification-container">
|
||||
<p>You have already entered this letter</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Hangman",
|
||||
data: function () {
|
||||
return {
|
||||
words: ['pimprenelle', 'culcul', 'milo'],
|
||||
correctLetters: [],
|
||||
wrongLetters: [],
|
||||
selectedWord: '',
|
||||
wordEl: '',
|
||||
popup: false,
|
||||
finalMessage: '',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
|
||||
console.log(this.selectedWord)
|
||||
this.displayWord()
|
||||
},
|
||||
methods: {
|
||||
displayWord() {
|
||||
this.wordEl =
|
||||
this.selectedWord
|
||||
.split('')
|
||||
.map(
|
||||
letter => {
|
||||
let toggleLetter = this.correctLetters.includes(letter) ? letter : ''
|
||||
return '<span class="' + letter + '">' + toggleLetter +"</span>"
|
||||
}
|
||||
|
||||
).join('')
|
||||
|
||||
const innerWord = this.wordEl.replace(/\n/g, '')
|
||||
|
||||
if(innerWord === this.selectedWord) {
|
||||
this.finalMessage = 'Congratulations! You won! 😃';
|
||||
this.popup.style.display = 'flex';
|
||||
}
|
||||
},
|
||||
updateWrongLettersEl() {
|
||||
let wrongLettersEl =
|
||||
this.wrongLetters.length > 0 ? '<p>Wrong</p>' : ''
|
||||
+
|
||||
this.wrongLetters.map(letter => `<span>${letter}</span>`)
|
||||
|
||||
// Display parts
|
||||
figureParts.forEach((part, index) => {
|
||||
const errors = wrongLetters.length
|
||||
|
||||
if(index < errors) {
|
||||
part.style.display = 'block'
|
||||
} else {
|
||||
part.style.display = 'none'
|
||||
}
|
||||
})
|
||||
|
||||
// Check if lost
|
||||
if(wrongLetters.length === figureParts.length) {
|
||||
finalMessage.innerText = 'Unfortunately you lost. 😕';
|
||||
popup.style.display = 'flex';
|
||||
}
|
||||
},
|
||||
playAgain: function () {
|
||||
this.correctLetters.splice(0)
|
||||
this.wrongLetters.splice(0)
|
||||
this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
|
||||
this.displayWord()
|
||||
this.updateWrongLettersEl()
|
||||
this.popup = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user