我正在開發一個點擊游戲，其中向用戶呈現一個坐標，然后他們必須單擊相應的坐標。我對其進行了設計，如果他們是正確的，則會添加一個類，在他們的分數周圍放置一個綠色邊框。如果他們不正確，就會添加一個不同的班級，并在他們的分數周圍加上紅色邊框。這在第一次玩游戲時有效。問題是，以后每次播放時，無論正確與否，它都只應用紅色邊框。我很困惑，因為它仍然正確計算分數 - 如果您單擊正確的方塊，那么您仍然會得分，但它應用了錯誤的類別。這是我的代碼筆的鏈接：https ://codepen.io/jacobc1596/pen/yLNwQZR這是我認為的相關代碼：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貢獻1797條經驗 獲得超4個贊
每次開始游戲時，都會向所有方塊添加事件偵聽器：
function startGame() {
board.style.pointerEvents = 'all';
target.innerHTML = randomSquare;
gameTime()
document.querySelectorAll('.square').forEach(item => {
item.addEventListener('click', event => { ////// <<<< HERE
第二次運行游戲時，單擊的方塊中有 2 個偵聽器。
第一個運行正常，符合預期。但改變 randomSquare 值。
第二個事件會報告失敗，因為現在點擊的方塊不再是 randomSquare
當你運行游戲 100 次時，你就有了 6400 個聽眾?。。?！
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
第一種方法： 在附加新偵聽器之前刪除所有偵聽器（如果存在）
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 關注
- 134 瀏覽
添加回答
舉報
0/150
提交
取消