本文實例講述了JS小游戲的仙劍翻牌源碼，是一款非常優秀的游戲源碼。分享給大家供大家參考。具體如下：

一、游戲介紹:

這是一個翻牌配對游戲，共十關。

1.游戲隨機從42張牌中抽取9張進行游戲，每組為2張相同的牌，共18張牌。
2.連續翻到兩張相同的為勝利，當9組全部翻到則過關。如不是翻到連續兩張相同的，則需要重新翻。
3.游戲共有10關，在規定時間內通過為挑戰成功。
4.如果某關在規定時間內沒有通過，則會從當前關繼續游戲。
5.游戲中的卡牌圖片與音樂均為大宇公司所有。
6.需要支持html5的瀏覽器，chrome與firefox效果最好。

游戲圖片：

完整實例代碼點擊此處本站下載。

二、Javascript部分：

/** 仙劍翻牌游戲* Date: 2013-02-24* Author: fdipzone* Ver 1.0*/window.onload = function(){ var gameimg = ['images/start.png','images/success.png','images/fail.png','images/clear.png','images/cardbg.jpg','images/sword.png'];for(var i=1; i<=card.get_total(); i++){gameimg.push('images/card' + i + '.jpg'); }var callback = function(){card.init(); }img_preload(gameimg, callback);}/** card class */var card = (function(total,cardnum){var gametime = [0,65,60,55,50,45,40,35,30,25,20]; // 每關的游戲時間 var turntime = 8;// 觀看牌時間 var level = 1;// 當前關卡 var carddata = [];// 記錄牌的數據 var leveldata = [];// 當前關卡牌數據 var is_lock = 0;// 是否鎖定 var is_over = 0;// 游戲結束 var first = -1;// 第一次翻開的卡 var matchnum = 0;// 配對成功次數// 初始化 init = function(){tips('show');$('startgame').onclick = function(){tips('hide');start();} }// 開始游戲 start = function(){reset();create(cardnum);show();var curtime = turntime;setHtml('livetime', curtime);var et = setInterval(function(){if(curtime==0){clearInterval(et);turnall();set_event();message('start', process);return ;}if(curtime==turntime){turnall();}curtime--;setHtml('livetime', curtime);}, 1000) }// 隨機抽取N張牌 create = function(n){carddata = [];leveldata = [];// 創建所有牌for(var i=1; i<=total; i++){carddata.push(i);}// 抽取牌for(var i=0; i<n; i++){var curcard = carddata.splice(Math.random()*carddata.length, 1).pop();leveldata.push({'cardno':curcard,'turn':0}, {'cardno':curcard,'turn':0});}// 生成隨機順序游戲牌leveldata = shuffle(leveldata); }// 生成牌 show = function(){var cardhtml = '';for(var i=0; i<leveldata.length; i++){cardhtml += '<div>';cardhtml += '<div>';cardhtml += '<div><img src="images/card' + leveldata[i]['cardno'] + '.jpg"></div>';cardhtml += '<div><img src="images/cardbg.jpg"></div>';cardhtml += '</div>';cardhtml += '</div>';}setHtml('gameplane', cardhtml); }// 全部翻轉 turnall = function(){for(var i=0; i<leveldata.length; i++){turn_animate(i);} }// 翻轉動畫 turn_animate = function(key){var obj = $_tag('div', 'card' + key);var cardfont, cardback;if(getClass(obj[0]).indexOf('out')!=-1){cardfont = obj[0];cardback = obj[1];}else{cardfont = obj[1];cardback = obj[0];}setClass(cardback, 'list flip out');var et = setTimeout(function(){setClass(cardfont, 'list flip in');}, 225); }// 設置點擊事件 set_event = function(){var o = $_tag('div', 'gameplane');for(var i=0,count=o.length; i<count; i++){if(getClass(o[i])=='card viewport-flip'){o[i].onclick = function(){turn(this.id);}}} }// 計時開始 process = function(){is_lock = 0;var curtime = gametime[level];setHtml('livetime', curtime);var et = setInterval(function(){if(matchnum==cardnum){clearInterval(et);return ;}curtime--;setHtml('livetime', curtime);if(curtime==0){clearInterval(et);is_over = 1;message('fail', start);}}, 1000); }// 游戲訊息動畫 message = function(type, callback){is_lock = 1;var message = $('message');var processed = 0;var opacity = 0;var soundtime = {'start': 1500,'success': 4000,'fail': 6000,'clear': 4000};disp('message','show');setClass(message,'message_' + type);setOpacity(message, opacity);setPosition(message, 'left', 0);setPosition(message, 'top', 390);if(type=='start'){bgsound(type, true);}else{bgsound(type);}var et = setInterval(function(){var message_left = getPosition(message,'left');processed = processed + 25;if(processed>=500 && processed<=750){opacity = opacity+10;setPosition(message, 'left', message_left + 30);setOpacity(message, opacity);}else if(processed>=soundtime[type] && processed<=soundtime[type]+250){opacity = opacity-10;setPosition(message, 'left', message_left + 35);setOpacity(message, opacity);}else if(processed>soundtime[type]+250){disp('message','hide');clearInterval(et);if(typeof(callback)!='undefined'){callback();}}},25); }// 翻牌 turn = function(id){if(is_lock==1){return ;}var key = parseInt(id.replace('card',''));if(leveldata[key]['turn']==0){ // 未翻開if(first==-1){ // 第一次翻turn_animate(key);first = key;leveldata[key]['turn'] = 1;}else{ // 第二次翻turn_animate(key);leveldata[key]['turn'] = 1;check_turn(key);}} }// 檢查是否翻牌成功 check_turn = function(key){is_lock = 1;if(leveldata[first]['cardno']==leveldata[key]['cardno']){ // 配對成功matchnum ++;if(matchnum==cardnum){var et = setTimeout(function(){message('success', levelup);}, 225);}first = -1;is_lock = 0;}else{ // 配對失敗,將翻開的牌翻轉var et = setTimeout(function(){turn_animate(first);leveldata[first]['turn'] = 0;turn_animate(key);leveldata[key]['turn'] = 0;first = -1;if(is_over==0){is_lock = 0;}}, 300);} }// 過關 levelup = function(){if(level<gametime.length-1){level ++;setHtml('level', level);start();}else{clear();} }// 全部通關 clear = function(){level = 1;disp('levelplane','hide');disp('process', 'hide');setHtml('gameplane','');message('clear',init); }// 音樂播放 bgsound = function(file, loop){var id = 'audioplayer';if(typeof(file)!='undefined'){if(typeof(loop)=='undefined'){loop = false;}var audiofile = [];audiofile['mp3'] = 'music/' + file + '.mp3';audiofile['ogg'] = 'music/' + file + '.ogg';audioplayer(id, audiofile, loop);}else{audioplayer(id);} }// 游戲玩法 tips = function(type){disp('tips', type); }// 獲取牌總數 get_total = function(){return total; }// 重置參數 reset = function(){disp('levelplane','show');setHtml('level', level);disp('process', 'show');setHtml('livetime', '');setHtml('gameplane', '');is_lock = 1;is_over = 0;first = -1;matchnum = 0; }return this;})(42,9);

相信本文所述對大家javascript游戲設計的學習有一定的借鑒價值。