骰子游戏条件
Dice Game Conditions
我的函数 match() 不起作用...我想我可以存储 playerGameOne 和 playerGameTwo 的 return 值,这样我就可以比较 playerOne 和 playerTwo 的值,然后进行比较。这似乎不是逻辑,因为我的函数只会生成随机显示消息,而不是遵循我在匹配函数中设置的条件。但是控制台日志显示的值与我滚动的值不同。请帮助:
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x
let y
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
playerGameOne();
displayMessageOne()
}
function diceTwo(){
playerGameTwo();
displayMessageTwo();
};
function match(){
playerGameOne();
playerGameTwo();
x = playerGameOne();
y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match)
h1, div, p{
text-align: center;
}
img{
width: 200px;
}
<h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>
尝试在 diceOne 和 diceTwo 函数中设置 x 和 y。
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x = 0
let y = 0
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
x = playerGameOne(); //update x
displayMessageOne()
}
function diceTwo(){
y = playerGameTwo(); //update y
displayMessageTwo();
};
function match(){
//use functions diceOne and diceTwo to set x and y
//playerGameOne();
//playerGameTwo();
//x = playerGameOne();
//y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
//diceOne and diceTwo now set x and y
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match)
h1, div, p{
text-align: center;
}
img{
width: 200px;
}
<h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>
我的函数 match() 不起作用...我想我可以存储 playerGameOne 和 playerGameTwo 的 return 值,这样我就可以比较 playerOne 和 playerTwo 的值,然后进行比较。这似乎不是逻辑,因为我的函数只会生成随机显示消息,而不是遵循我在匹配函数中设置的条件。但是控制台日志显示的值与我滚动的值不同。请帮助:
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x
let y
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
playerGameOne();
displayMessageOne()
}
function diceTwo(){
playerGameTwo();
displayMessageTwo();
};
function match(){
playerGameOne();
playerGameTwo();
x = playerGameOne();
y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match)
h1, div, p{
text-align: center;
}
img{
width: 200px;
}
<h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>
尝试在 diceOne 和 diceTwo 函数中设置 x 和 y。
const max = 8
const para = document.querySelector('p')
const buttonOne = document.querySelector('button.first')
const buttonTwo = document.querySelector('button.second')
const buttons = document.querySelectorAll('button')
let playerOne
let playerTwo
let playerPoints = 0
let x = 0
let y = 0
function playerGameOne(){
let random = Math.floor(Math.random()*(max));
playerOne = (random + 1)
return playerOne
}
function playerGameTwo(){
let random = Math.floor(Math.random()*(max));
playerTwo = (random + 1)
return playerTwo
}
function displayMessageOne(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerOne} on the dice.`
document.body.append(para)
}
function displayMessageTwo(){
const para = document.createElement('p')
para.innerText = `Your rolled a ${playerTwo} on the dice.`
document.body.append(para)
}
function displaySuccessMatchMessage(){
// if(playerPoints === 5){
// para.innerText = "Congratulations! You got 5 points. Play again."
// return document.body.append(para)
// }
const para = document.createElement('p');
para.innerText = `You gained a point! You have ${playerPoints}.`
document.body.append(para)
}
function displayFailedMatchMessage(){
const para = document.createElement('p');
para.innerText = "Try again."
document.body.append(para)
}
function diceOne(){
x = playerGameOne(); //update x
displayMessageOne()
}
function diceTwo(){
y = playerGameTwo(); //update y
displayMessageTwo();
};
function match(){
//use functions diceOne and diceTwo to set x and y
//playerGameOne();
//playerGameTwo();
//x = playerGameOne();
//y = playerGameTwo();
console.log(x+y) //getting different log values
if((x+y) > 8){
playerPoints+=1;
displaySuccessMatchMessage();
}else{
playerPoints+=0;
displayFailedMatchMessage()
}
if(playerPoints === 5){
displaySuccessMatchMessage()
}
}
//diceOne and diceTwo now set x and y
buttonOne.addEventListener('click', diceOne)
buttonTwo.addEventListener('click', diceTwo)
buttonTwo.addEventListener('click', match)
h1, div, p{
text-align: center;
}
img{
width: 200px;
}
<h1>
Click on me: Goal is to get to 5 points.
</h1>
<div>
<button class="first">
<img class = "firstImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
<button class="second">
<img class = "secondImage" src="https://atlas-content-cdn.pixelsquid.com/stock-images/dice-B5mdRR0-600.jpg">
</button>
</div>