我正在開發(fā)一個(gè)點(diǎn)擊游戲，其中向用戶呈現(xiàn)一個(gè)坐標(biāo)，然后他們必須單擊相應(yīng)的坐標(biāo)。我對(duì)其進(jìn)行了設(shè)計(jì)，如果他們是正確的，則會(huì)添加一個(gè)類，在他們的分?jǐn)?shù)周圍放置一個(gè)綠色邊框。如果他們不正確，就會(huì)添加一個(gè)不同的班級(jí)，并在他們的分?jǐn)?shù)周圍加上紅色邊框。這在第一次玩游戲時(shí)有效。問題是，以后每次播放時(shí)，無論正確與否，它都只應(yīng)用紅色邊框。我很困惑，因?yàn)樗匀徽_計(jì)算分?jǐn)?shù) - 如果您單擊正確的方塊，那么您仍然會(huì)得分，但它應(yīng)用了錯(cuò)誤的類別。這是我的代碼筆的鏈接：https ://codepen.io/jacobc1596/pen/yLNwQZR這是我認(rèn)為的相關(guān)代碼：function startGame() { board.style.pointerEvents = 'all'; target.innerHTML = randomSquare; gameTime() document.querySelectorAll('.square').forEach(item => { item.addEventListener('click', event => { if(item.id == randomSquare) { score++ tries++ scoreOutput.innerHTML = score; randomSquare = rndSq(squareset); target.innerHTML = randomSquare; scoreOutput.classList.add('correct'); //adds 'correct' class scoreOutput.classList.remove('incorrect'); //removes 'incorrect' class } else { tries++; // scoreDisplay.innerHTML = score; randomSquare = rndSq(squareset); target.innerHTML = randomSquare; scoreOutput.classList.remove('correct'); //removes 'correct' class scoreOutput.classList.add('incorrect'); //adds 'incorrect' class }; }) })};//Reset Game (runs when the game timer runs out)function reset() { tries=0; score=0; target.innerHTML = ''; strt.style.visibility = "visible"; rst.style.visibility = 'hidden'; board.style.pointerEvents = 'none'; //to remove whatever class was last applied before game finish. scoreOutput.classList.remove('incorrect'); scoreOutput.classList.remove('correct'); scoreOutput.innerHTML = '';}//End Gamefunction end() { scoreDisplay.innerHTML = "Time's Up! You scored " + score + " points!" reset();}.correct { border:6px solid green; border-radius: 50%;}.incorrect { border:6px solid red; border-radius: 50%;}
2 回答
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊
每次開始游戲時(shí)，都會(huì)向所有方塊添加事件偵聽器：
function startGame() {
board.style.pointerEvents = 'all';
target.innerHTML = randomSquare;
gameTime()
document.querySelectorAll('.square').forEach(item => {
item.addEventListener('click', event => { ////// <<<< HERE
第二次運(yùn)行游戲時(shí)，單擊的方塊中有 2 個(gè)偵聽器。
第一個(gè)運(yùn)行正常，符合預(yù)期。但改變 randomSquare 值。
第二個(gè)事件會(huì)報(bào)告失敗，因?yàn)楝F(xiàn)在點(diǎn)擊的方塊不再是 randomSquare
當(dāng)你運(yùn)行游戲 100 次時(shí)，你就有了 6400 個(gè)聽眾?。。。?/p>
千萬里不及你
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊
第一種方法： 在附加新偵聽器之前刪除所有偵聽器（如果存在）
function onClick(event) {
const item = event.target;
if (item.id == randomSquare) {
console.log("correct", item);
score++;
tries++;
scoreOutput.innerHTML = score;
randomSquare = rndSq(squareset);
target.innerHTML = randomSquare;
scoreOutput.classList.add('correct');
scoreOutput.classList.remove('incorrect');
} else {
console.log("incorrect", item);
tries++;
// scoreDisplay.innerHTML = score;
randomSquare = rndSq(squareset);
target.innerHTML = randomSquare;
scoreOutput.classList.remove('correct');
scoreOutput.classList.add('incorrect');
};
}
function startGame() {
console.log("startGame");
//To make the board active
board.style.pointerEvents = 'all';
//First Target
target.innerHTML = randomSquare;
//Start Game timer
gameTime();
document.querySelectorAll('.square').forEach(item => {
item.removeEventListener('click', onClick);
item.addEventListener('click', onClick);
})
};
或者第二種方式，僅附加偵聽器一次：
document.querySelectorAll('.square').forEach(item => {
item.addEventListener('click', onClick);
})
function startGame() {
console.log("startGame");
//To make the board active
board.style.pointerEvents = 'all';
//First Target
target.innerHTML = randomSquare;
//Start Game timer
gameTime();
};
- 2 回答
- 0 關(guān)注
- 132 瀏覽
添加回答
舉報(bào)
0/150
提交
取消