本文实例讲述了JS实现的仙剑翻牌记忆力小游戏源码，是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下：

一、游戏介绍:

这是一个翻牌配对游戏，共十关。

1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。
2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。
3.游戏共有10关，在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过，则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持HTML5的浏览器，Chrome与Firefox效果最好。

游戏图片：

java script部分：

/** 仙剑翻牌游戏
*? 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? ? ? ? ? ? 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? ? ? ? ? ? cardhtml += '

';
? ? ? ? ? ? cardhtml += '

';
? ? ? ? ? ? cardhtml += '

';
? ? ? ? ? ? cardhtml += '

';
? ? ? ? ? ? cardhtml += '

';
? ? ? ? ? ? cardhtml += '

? ? ? ? }
? ? ? ? setHtml('gameplane', cardhtml);
? ? }

? ? // 全部翻转
? ? turnall = function(){
? ? ? ? for(var i=0; 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? ? ? ? ? ? if(getClass(o[i])=='card viewport-flip'){
? ? ? ? ? ? ? ? o[i].onclick = function(){
? ? ? ? ? ? ? ? ? ? turn(this.id);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }

? ? // 计时开始
? ? process = function(){

? ? ? ? is_lock = 0;