当满足条件时,如何用javascript重新启动游戏?
一、 n完全是javascript编程的初学者。我通过youtube观看了这个石头剪刀游戏制作教程。但我无法让我的程序重新启动,在那之前,我会显示一条消息,显示“玩家赢了!”/“计算机赢了”。请给出改进我的代码的建议。完整代码如下所示:当满足条件时,如何用javascript重新启动游戏?,javascript,ecmascript-6,jscript,Javascript,Ecmascript 6,Jscript,一、 n完全是javascript编程的初学者。我通过youtube观看了这个石头剪刀游戏制作教程。但我无法让我的程序重新启动,在那之前,我会显示一条消息,显示“玩家赢了!”/“计算机赢了”。请给出改进我的代码的建议。完整代码如下所示: const game = () => { let pScore = 0; let cScore = 0; //Start the Game const startGame = () => { const playBtn =
const game = () => {
let pScore = 0;
let cScore = 0;
//Start the Game
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");
playBtn.addEventListener("click", () => {
introScreen.classList.add("fadeOut");
match.classList.add("fadeIn");
});
};
//Play Match
const playMatch = () => {
const options = document.querySelectorAll(".options button");
const playerHand = document.querySelector(".player-hand");
const computerHand = document.querySelector(".computer-hand");
const hands = document.querySelectorAll(".hands img");
hands.forEach((hand) => {
hand.addEventListener("animationend", function () {
this.style.animation = "";
});
});
//Computer Options
const computerOptions = ["rock", "paper", "scissors"];
options.forEach((option) => {
option.addEventListener("click", function () {
//Computer Choice
const computerNumber = Math.floor(Math.random() * 3);
const computerChoice = computerOptions[computerNumber];
setTimeout(() => {
//Here is where we call compare hands
compareHands(this.textContent, computerChoice);
//Update Images
playerHand.src = `./assets/${this.textContent}.png`;
computerHand.src = `./assets/${computerChoice}.png`;
}, 2000);
//Animation
playerHand.style.animation = "shakePlayer 2s ease";
computerHand.style.animation = "shakeComputer 2s ease";
});
});
};
const updateScore = () => {
const playerScore = document.querySelector(".player-score p");
const computerScore = document.querySelector(".computer-score p");
playerScore.textContent = pScore;
computerScore.textContent = cScore;
};
const compareHands = (playerChoice, computerChoice) => {
//Update Text
const winner = document.querySelector(".winner");
//Checking for a tie
if (playerChoice === computerChoice) {
winner.textContent = "It's a tie!";
return;
}
//Check for Rock
if (playerChoice === "rock") {
if (computerChoice === "scissors") {
winner.textContent = "Player wins!";
pScore++;
updateScore();
return;
} else {
winner.textContent = "Computer wins!";
cScore++;
updateScore();
return;
}
}
//Check for Paper
if (playerChoice === "paper") {
if (computerChoice === "scissors") {
winner.textContent = "Computer wins!";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player wins!";
pScore++;
updateScore();
return;
}
}
//Check for scissors
if (playerChoice === "scissors") {
if (computerChoice === "rock") {
winner.textContent = "Computer wins!";
cScore++;
updateScore();
return;
} else {
winner.textContent = "Player wins!";
pScore++;
updateScore();
return;
}
}
};
//Is call all the inner function
startGame();
playMatch();
};
//Start the game function
game();
这是一个非常简单的解决方案,并不理想,但您可以简单地执行
Location.reload()
您可以在窗口中添加click event listener并重新加载页面
window.addEventListener('click',()=>{ location.reload()})
如果要重新启动游戏,可能需要重置某些变量(反映游戏状态),清除某些元素中的文本,然后再次调用
game()
。将重置方法中的变量作为标准,而不是设置侦听器和对HTML元素的引用。添加结束条件检查(三选一),否则,重复playMatch()
(不设置对HTML元素的引用)。将游戏创建为类compareHands
获得了大量可重复的代码。思考如何减少代码。应该使用少于您现在使用的字符数的50%的字符。养成将UI更新和游戏逻辑分开的习惯,以创建更干净的代码,就像您在updateScore()
中所做的那样。