2
我正在嘗試在javascript中製作紙牌遊戲。我希望用戶在點擊「clicky」按鈕時看到卡片的正面，然後再次點擊時顯示在同一張卡片的背面。在之後的點擊中，我希望它切換到下一張牌的前面等等。現在，當第五張牌被顯示時，我用五張新牌重新加載頁面。每張卡片是可變卡片中的一個項目，每次點擊後改變的元素是帶有身份證的p標籤。落後的Javascript卡牌遊戲
我的代碼正在工作，但如果我有更多的卡片，大約七個，它開始滯後。有兩個互相調用的函數是不是一個好主意？有沒有更好的方法來編寫這段代碼，以便我可以有更多的卡？
下面的代碼：
<html>
<body>
<p id=」card」></p>
<button id="clicky">Fråga</button>
<script type="text/javascript">
var cards = [[」front1」, 」back1」], [」front2」, 」back2」], [」front3」, 」back3」], [」front4」, 」back4」], [」front5」, 」back5」]];
var a = 0;
var clicky = document.getElementById("clicky");
clicky.addEventListener("click", function(){setFront(a)});
var card = document.getElementById(」card」);
function setFront (a) {
card.textContent = cards[a][0];
clicky.addEventListener("click", function(){setBack(a)});
}
function setBack (a) {
card.textContent = cards[a][1];
a += 1;
if (a < 5) {
clicky.addEventListener("click", function(){setFront(a)});
} else {
clicky.addEventListener("click", function() {
window.location=url;
});
}
}
</script>
</body>
</html>
任何幫助表示讚賞！
你爲什麼有'」'，而不是'「'？不要在一個文字處理器（如MS Word）中編輯代碼。 –
好吧，我會記得！ – xdna
對我而言，突出的一點是，你只有一個'clicky'元素，但是在每個函數中你都要添加一個新的事件監聽器，並且從不*刪除事件監聽器，這意味着最終它會調用4監聽器和4個新的監聽器，看看你是否可以重新安排你的邏輯來運行** on ** onClickyClick函數，並添加一些狀態變量來幫助它決定將要發生的事情接下來應該做什麼。 – Katana314