Mini-jeu JS Fairy Sword Flop code source explication détaillée_compétences javascript

L'exemple de cet article décrit le code source du mini-jeu JS Fairy Sword Flop, qui est un très excellent code source de jeu. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

1. Présentation du jeu :

Il s'agit d'un jeu d'association de cartes avec dix niveaux au total.

1. Le jeu sélectionne au hasard 9 cartes parmi 42 cartes à jouer. Chaque groupe dispose de 2 cartes identiques, soit un total de 18 cartes.
2. Si vous retournez deux groupes identiques d'affilée, vous gagnez. Lorsque les 9 groupes sont retournés, vous passez le niveau. Si vous n'en trouvez pas deux identiques consécutifs, vous devez les retourner à nouveau.
3. Il y a 10 niveaux dans le jeu. Réussir le niveau dans le temps imparti signifie que le défi est réussi.
4. Si un niveau n'est pas réussi dans le délai spécifié, le jeu continuera à partir du niveau actuel.
5. Les images des cartes et la musique du jeu appartiennent à Daewoo Corporation.
6. Un navigateur prenant en charge HTML5 est requis. Chrome et Firefox fonctionnent mieux.

Photos du jeu :

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

2. Partie 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);

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour l'apprentissage par chacun de la conception de jeux javascript.