JS Small game of the legend of the source code detailed _javascript tips

This example describes the JS small game of the Paladin flop Source, is a very good source of the game. Share to everyone for your reference. Specifically as follows:

First, Introduction to the game:

This is a flop pairing game with a total of 10 off.

1. The game randomly extracts 9 cards from 42 cards for the game, each group is 2 identical cards, a total of 18 cards.
2. Turn to two consecutive victories for the same, when all the 9 groups turned over to the clearance. If you do not turn to the same two consecutive, you need to turn back.
3. The game has a total of 10, in the specified time through for the challenge of success.
4. If a certain level does not pass within the specified time, the game will continue from the current shutdown.
5. The card in the game picture and music are all Daewoo Company.
6. Browsers that support HTML5, Chrome and Firefox have the best results.

Game Picture:

Full instance code click here to download the site.

Second, the JavaScript part:

/** Paladin Flop Game * 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];//per game time                 var turntime = 8;                  Watch card time var level = 1;                Current checkpoint var carddata = [];                The data of the record card var leveldata = [];                 Current checkpoint card data var is_lock = 0;                 Whether to lock var is_over = 0;                  Game over Var-1;                 The first opened card var matchnum = 0; Paired success//Initialization init = function () {tips (' show ');
      $ (' startgame '). onclick = function () {Tips (' hide ');
    Start ();
    }//Begin Game 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)}//randomly extracting n card create = function (n) {carddata = [];
    
    Leveldata = [];
    Create all cards for (var i=1; i<=total; i++) {Carddata.push (i); //Pull token 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});
  ///Generate random sequential game card leveldata = Shuffle (leveldata); }

  //Generate Card 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 ' ></div
      > ';
      cardhtml + = ' <div class= ' list flip ' ></div> ';
      cardhtml + = ' </div> ';

    cardhtml + = ' </div> ';
  } sethtml (' Gameplane ', cardhtml);
    ///Flip Turnall = function () {for (var i=0; i<leveldata.length; i++) {turn_animate (i);
    }//Flip Animation 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 Click event 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 = Funct
        Ion () {Turn (this.id);

    //Timer START 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);

    }//game messages Animated 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);
    }//Flop turn = function (ID) {if (is_lock==1) {return;
  
    The var key = parseint (Id.replace (' card ', ') ");
        if (leveldata[key][' turn ']==0) {//Not open if (first==-1) {//First turn turn_animate (key);
        A-key;
      leveldata[key][' turn '] = 1;
        }else{//Second turn turn_animate (key);
        leveldata[key][' turn '] = 1;
      Check_turn (key);

    Check if the flop succeeds Check_turn = function (key) {is_lock = 1;

      if (leveldata[first][' Cardno ']==leveldata[key][' Cardno ']) {//paired successfully matchnum + +;
        if (matchnum==cardnum) {var et = settimeout (function () {message (' success ', LevelUp);
      }, 225);
      -1;

    Is_lock = 0;
          }else{//Pairing fails, turn on the cards to flip var et = settimeout (function () {turn_animate (a) (a);
          leveldata[first][' turn '] = 0;
          Turn_animate (key); leveldata[key][' Turn '] = 0;
          
          i =-1;
          if (is_over==0) {is_lock = 0;
    }, 300);
      }///Clearance LevelUp = function () {if (level<gametime.length-1) {level + +;
      Sethtml (' Level ', level);
    Start ();
    }else{Clear ();
    }//All Clearance clear = function () {level = 1;
    Disp (' Levelplane ', ' hide ');
    Disp (' process ', ' hide ');
    sethtml (' Gameplane ', ');
  Message (' Clear ', init);

    //Music Playback 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);
  }//Game play Method tips = function (type) {disp (' tips ', type);
  //Get the total number of cards get_total = function () {return totals; }//Reset parameter reset =function () {disp (' Levelplane ', ' Show ');
    Sethtml (' Level ', level);
    Disp (' process ', ' show ');
    sethtml (' Livetime ', ');
    sethtml (' Gameplane ', ');
    Is_lock = 1;
    Is_over = 0;
    i =-1;
  Matchnum = 0;

return to this;

 }) (42,9);

I believe that this article describes the learning of JavaScript game design for a certain reference value.