JS小游戏之仙剑翻牌源码详解

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

一、游戏介绍:

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

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

游戏图片：

完整实例代码点击此处本站下载。

二、Javascript部分：

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);
}


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=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

相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。