HTML5翻牌游戲源代碼是游戲開發(fā)者不可或缺的一個工具。這種管理地圖和游戲元素的代碼可以幫助開發(fā)者創(chuàng)建一個交互性強、容易上手的游戲。
function flipCard() { var flippedCards = document.querySelectorAll(".flipped"); if(flippedCards.length === 2) { // 翻開的卡片已達上限,無法再翻新卡片 return; } this.classList.add("flipped"); var flippedCount = document.querySelectorAll(".flipped").length; if(flippedCount === 2) { // 如果已翻開兩張牌 var cards = document.querySelectorAll(".card"); setTimeout(function() { if(flippedCards[0].dataset.name === flippedCards[1].dataset.name) { // 找到兩張相同的牌 flippedCards.forEach(function(card) { card.classList.add("matched"); }); // 如果全部牌都翻轉(zhuǎn)完成,游戲結(jié)束 if(document.querySelectorAll(".card.matched").length === cards.length) { document.querySelector("#win").classList.add("visible"); } } else { // 沒有找到相同的牌,隱藏翻開的牌 flippedCards.forEach(function(card) { card.classList.remove("flipped"); }); } }, 1000); } } var cards = [ { "name": "apple", "img": "img/apple.png" } // 其他牌 ]; for(var i = 0; i< cards.length; i++) { var card = document.createElement("div"); card.classList.add("card"); card.dataset.name = cards[i].name; var front = document.createElement("div"); front.classList.add("front"); var back = document.createElement("div"); back.classList.add("back"); back.style.backgroundImage = "url('" + cards[i].img + "')"; card.appendChild(front); card.appendChild(back); document.querySelector("#game-board").appendChild(card); } var allCards = document.querySelectorAll(".card"); for(var i = 0; i< allCards.length; i++) { allCards[i].addEventListener("click", flipCard); }
在這個代碼示例中,我們定義了一個flipCard函數(shù),讓玩家通過點擊卡片來翻轉(zhuǎn)牌。我們還聲明了一個名為cards的數(shù)組,用于存儲一組排在桌面上的卡片。
注意,我們還需要在HTML頁面中添加一個諸如
的元素,用于將卡片添加到頁面上。當卡片匹配完后,我們還會添加一個"class=visible"的元素,用于表明玩家已經(jīng)取得勝利。
總的來說,使用HTML5翻牌游戲源代碼,開發(fā)者可以輕松制作出一個讓玩家感到互動性和趣味性的游戲。而且很多代碼都可以在Git等開源社區(qū)中找到,具有較廣泛的適應(yīng)性。