javascript - 我正在做一个刽子手游戏,我想让生命计数器工作
问题描述
// create an array of words
const words = ['javascript','cascading', 'language','coding','amazing','tree','letter'];
let word = words[Math.floor(Math.random() * words.length)];// pick a ranndom word from the words array
let wordContainer = document.getElementById("words-container");
let answerLetters = word.split('');
console.log('answerLetters: ',answerLetters);
let lettersInput = document.querySelectorAll(".letters button");// variable which represents all buttons
let pressedLetters = [];
let correctLetters = [];
let wrongLetters = [];
let lives = 10;
let showLives = document.querySelector('.lives');
let messageWinner = "Congrats! You won!";
let messageLoser = "You lost! Please try again!"
// created a span for each char in the random word
for(let i = 0; i < word.length;i++){
let letter = document.createElement('span');
letter.innerText = '_ ';
wordContainer.appendChild(letter);
}
let wordContainnerSpans = document.querySelectorAll('.words-container span');
// handle user input with event listener
for(let i = 0; i < lettersInput.length; i++){
lettersInput[i].addEventListener("click", function(){
console.log('button pressed is: ',lettersInput[i].innerHTML);
pressedLetters.push(lettersInput[i].innerHTML);
checkMatchAndUpdate(lettersInput[i].innerHTML);
})
}
function checkMatchAndUpdate(guessedLetter){
let guess = answerLetters.indexOf(guessedLetter);
while (guess != -1) {
correctLetters.push(guess);
guess = answerLetters.indexOf(guessedLetter, guess + 1);
}
console.log(correctLetters);
for(let i = 0; i < correctLetters.length;i++){
wordContainnerSpans[correctLetters[i]].innerText = guessedLetter;
}
correctLetters = [];
}
我有正在工作的 checkMatchAndUpdate 功能,但我在创建生命计数器时遇到问题,我希望玩家有 10 条生命,然后在玩家输或赢时显示。如果有人可以提供帮助,那就太好了。谢谢!
解决方案
Lives 是常规变量,您需要创建一些函数来设置/检查/添加/删除生命。
在您的代码中,我没有看到任何用于检查或编辑生命的代码,您尝试了什么?
简单的例子:
let isAlive = {
lives: 0,
isStillAlive: true,
setLives(n){
if(n && !Number.isNaN(n)){
this.lives = n
}
return this
},
check(){
if (!this.lives || this.lives <= 0) {
this.isStillAlive = false;
}
return this.isStillAlive
},
addLives(n){
this.check()
if(n && !Number.isNaN(n)){
this.lives = this.lives + n;
}else{
this.lives++;
}
return this
},
removeLives(n){
this.check()
if (!this.isStillAlive) return this;
if (n && !Number.isNaN(n)) {
if (this.lives - n <= 0) {
this.lives = 0;
this.isStillAlive = false;
} else {
this.lives = this.lives - n;
}
} else {
if (this.lives - 1 <= 0) {
this.lives = 0;
} else {
this.lives--;
}
}
return this;
},
getLives(){
console.log('lives ', this.lives)
return this;
}
}
// First set lives
isAlive.setLives(10)
// You can get aviable lives with
isAlive.getLives()
// you can add or remove lives
isAlive.addLives() // add 1 live
isAlive.addLives(5) // add 5 lives, total 16
isAlive.removeLives() // remove 1 live
isAlive.removeLives(2) // remove 2 lives
// Fluent interface
console.log('fluent')
isAlive.setLives(15).getLives().removeLives(2).getLives().addLives(5).getLives() // 18 lives
console.log('is still have lives? ', isAlive.check())
// STOP
isAlive.removeLives(18)
console.log('is still have lives? ', isAlive.check())
在此之后,您可以检查
isAlive.check()
如果是真的 - 还活着,如果是假的 - 做一些类似表演游戏结束的事情。
推荐阅读
- spring-kafka - 如何扩展 spring-kafka 的“@KafkaListener”注释以创建我自己的具有有限属性的注释?
- angular - Angular 9 首次构建需要很长时间,对 CI 来说很不方便,有没有办法加快速度?
- python - Matplotlib:有没有办法用 matplotlibrc 设置默认的散布样式?
- java - 从数据库中检索的日期值使用 java.util.date 显示前一天的值
- jenkins - Jenkins 管道构建分支触发器
- javascript - 在句柄函数上反应钩子状态未定义
- business-objects - 在 WebI 报告中过滤高于 X% 组的行
- flutter - 如何在颤动中将自定义小部件传递给另一个自定义小部件?
- linux - 在 Linux (Ubuntu) 中使用 MI Box 进行 WIFI 调试。设备无法识别
- probabilistic-programming - Pyro Paramstore 的不同访问方法给出不同的结果