HTML5卡牌游戲代碼 在HTML5中，我們可以用代碼簡單地實現(xiàn)一個卡牌游戲。下面是這個游戲的關(guān)鍵代碼，大家可以按需修改和優(yōu)化。 首先，我們先定義好每一張卡牌的圖片和名稱，將它們存儲在一個數(shù)組中：

var cards = [
{name: 'Ace', img: 'ace.png'},
{name: 'King', img: 'king.png'},
{name: 'Queen', img: 'queen.png'},
{name: 'Jack', img: 'jack.png'},
{name: 'Ten', img: '10.png'},
{name: 'Nine', img: '9.png'},
{name: 'Eight', img: '8.png'},
{name: 'Seven', img: '7.png'},
{name: 'Six', img: '6.png'},
{name: 'Five', img: '5.png'},
{name: 'Four', img: '4.png'},
{name: 'Three', img: '3.png'},
{name: 'Two', img: '2.png'},
];

然后，我們需要創(chuàng)建一個卡牌對象，它包含了每張卡牌的狀態(tài)和點擊事件。卡牌的狀態(tài)包括是否已經(jīng)翻轉(zhuǎn)和對應(yīng)的圖片和名稱：

function Card(name, img) {
this.name = name;
this.img = img;
this.isFlipped = false;
this.elem = $('
');
var self = this;
this.elem.click(function() {
if (!self.isFlipped) {
self.elem.addClass('flipped');
self.isFlipped = true;
}
});
}

這個對象包含了一個click方法，在點擊時判斷卡牌是否已經(jīng)翻轉(zhuǎn)，如果沒有，則添加一個flipped的CSS類來翻轉(zhuǎn)卡牌。 接下來，我們需要創(chuàng)建一個游戲?qū)ο螅?fù)責(zé)初始化游戲，洗牌和判斷卡牌是否匹配：

function Game() {
var self = this;
this.board = $('#board');
this.cards = [];
this.init = function() {
cards.forEach(function(card) {
var newCard = new Card(card.name, card.img);
self.cards.push(newCard);
});
self.cards = self.cards.concat(self.cards);
self.shuffle(self.cards);
self.cards.forEach(function(card) {
self.board.append(card.elem);
});
};
this.shuffle = function(arr) {
var currentIndex = arr.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = arr[currentIndex];
arr[currentIndex] = arr[randomIndex];
arr[randomIndex] = temporaryValue;
}
return arr;
};
this.checkMatch = function() {
var faceUpCards = self.cards.filter(function(card) {
return card.isFlipped === true;
});
if (faceUpCards.length === 2) {
if (faceUpCards[0].name === faceUpCards[1].name) {
faceUpCards.forEach(function(card) {
card.elem.addClass('matched');
card.isFlipped = false;
});
} else {
setTimeout(function() {
faceUpCards.forEach(function(card) {
card.elem.removeClass('flipped');
card.isFlipped = false;
});
}, 1000);
}
}
};
this.init();
setInterval(self.checkMatch, 500);
}

這個對象包含了三個方法，分別初始化游戲、洗牌和判斷卡牌是否匹配。在初始化游戲時，我們先將每張卡牌加入到一個cards數(shù)組中，并復(fù)制一次，然后洗牌并將卡牌添加到游戲面板中。 每當(dāng)有兩張卡牌被翻轉(zhuǎn)時，checkMatch方法就會判斷這兩張卡牌是否匹配。如果匹配，就添加一個matched的CSS類來標(biāo)記這兩張卡牌。如果不匹配，就等待一秒鐘后再將這兩張卡牌翻回去。 最后，我們只需要創(chuàng)建一個游戲?qū)ο螅纯蓡涌ㄅ朴螒颍?pre>$(function() { var newGame = new Game(); });以上就是一個簡單的卡牌游戲的HTML5代碼，希望對大家有所幫助。