本文实例讲述了JS实现的仙剑翻牌记忆力小游戏源码，是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下：
一、游戏介绍:
这是一个翻牌配对游戏，共十关。
1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。3.游戏共有10关，在规定时间内通过为挑战成功。4.如果某关在规定时间内没有通过，则会从当前关继续游戏。5.游戏中的卡牌图片与音乐均为大宇公司所有。6.需要支持HTML5的浏览器，Chrome与Firefox效果最好。
JS实现仙剑翻牌记忆力小游戏在线演示网址：http://linux.xuebuyuan.com/html5/fanpai/index.html
游戏图片：
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 += '<p class="cardplane">'; cardhtml += '<p class="card viewport-flip" id="card' + i + '">'; cardhtml += '<p class="list flip out"><img src="images/card' + leveldata[i]['cardno'] + '.jpg"></p>'; cardhtml += '<p class="list flip"><img src="images/cardbg.jpg"></p>'; cardhtml += '</p>'; cardhtml += '</p>';
} setHtml('gameplane', cardhtml); }
// 全部翻转 turnall = function(){ for(var i=0; i<leveldata.length; i++){ turn_animate(i); } }
// 翻转动画 turn_animate = function(key){ var obj = $_tag('p', '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('p', '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);
JS实现仙剑翻牌记忆力小游戏源码可以到Linux公社资源站下载：
------------------------------------------分割线------------------------------------------
免费下载地址在 http://linux.xuebuyuan.com/
用户名与密码都是www.xuebuyuan.com
具体下载目录在 /2017年资料/2月/5日/JS实现仙剑翻牌记忆力小游戏/
下载方法见 http://www.xuebuyuan.com/Linux/2013-07/87684.htm
------------------------------------------分割线------------------------------------------
本文永久更新链接地址：http://www.xuebuyuan.com/Linux/2017-02/140212.htm
以上就上有关JS实现仙剑翻牌记忆力小游戏的相关介绍，要了解更多JS游戏源码,仙剑翻牌游戏源码,JS实现仙剑翻牌记忆力小游戏,编程,Linux编程,Linux Shell,Android,Android教程,JAVA,C语言,Python,HTML5内容请登录学步园。