JS小遊戲之仙劍翻牌源碼詳解，js小遊戲翻牌源碼

JS小遊戲之仙劍翻牌源碼詳解，js小遊戲翻牌源碼

本文執行個體講述了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 class="cardplane">';      cardhtml += '<div class="card viewport-flip" id="card' + i + '">';      cardhtml += '<div class="list flip out"><img src="images/card' + leveldata[i]['cardno'] + '.jpg"></div>';      cardhtml += '<div class="list flip"><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遊戲設計的學習有一定的借鑒價值。

對於仙劍奇俠傳3小遊戲

LZ前面有引發劇情的必須支線任務沒完成哦

安溪重新開始哈~

1 在民居丁對方的房子的後方,可找到雪見。和花楹對話後可換得青瓷薰爐真品及得到5400文.對話有等待時間棒，在時間棒跑完前按下滑鼠(或空格)雪見好感度+2，任時間棒跑完則+0。

2 在民居戊旁邊可找到紫萱,她就站在一個墳墓前面，對話有等待時間棒，在時間棒跑完前按下滑鼠(或空格)紫瑄好感度+0，任時間棒跑完則+5。

3 在客棧客房甲中調查茶壺會睡夢，花楹好感度+3。

4 城左上方小屋中可救活當時在鬼界遇到的那人，紫萱好感度+6。

最後，在南方的海邊找到想去海底城的龍葵,雪見、紫萱加入,就可以出發了~~

樓主加油~~~
 
仙劍三小遊戲問題

是在草海~
草海地圖左上方，偏右一點點就是“山洞初體驗”
在遊戲開始雪見不在隊伍的時候，景天去到那個山洞（有石頭擋著，需要龍葵去開）會說這個洞是空空的，等雪見複活後再來到這裡，龍葵會建議玩這個遊戲，，可以獲得4樣物品，綠襆頭、元寶靴、左利、右利,雖然看似沒用，但實際上是最強裝備的4個組件
Q:山洞初體驗(抓迷藏遊戲)在那裡玩？
A:在草海內有一個被大石（由龍葵解機關）檔著的山洞，當沒有雪見或龍葵在要進入時會顯示說山洞內空空的而不能進入。但如果雪見與龍葵同時在場的話就可以進入並玩山洞初體驗這個小遊戲，因此等後期人齊後再回來玩即可。從小遊戲中可獲得4件破財裝。