This article describes the source code of the Sword Flip of JS mini-game, which is a very excellent source code of the game. Share it for your reference. The details are as follows:
1. Game introduction:
This is a flop pairing game with a total of ten levels.
1. The game randomly draws 9 cards from 42 cards to play, each group is 2 same cards, with a total of 18 cards.
2. Turning to two identical ones in a row is a victory. When all 9 groups are turned, you will pass. If you don’t turn to two consecutive pictures, you need to turn them again.
3. The game has 10 levels, and it will be successful in the challenge within the specified time.
4. If a level does not pass within the specified time, the game will continue from the current level.
5. The card pictures and music in the game are owned by Daewoo.
6. Requires a browser that supports html5, chrome and firefox are the best.
Game pictures:
Click here to download the complete example code.
2. Javascript part:
/** Fairy Sword Flip 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]; // Play time per level var turntime = 8; // Watch card time var level = 1; // Current level var carddata = []; // Record card data var leveldata = []; // Current level card data var is_lock = 0; // Whether to lock var is_over = 0; // End of the game var first = -1; // var matchnum = 0; // Number of pairing successes// Initialization init = function(){ tips('show'); $('startgame').onclick = function(){ tips('hide'); start(); } } // Start the 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 draw N cards create = function(n){ carddata = []; leveldata = []; // Create all cards for(var i=1; i<=total; i++){ carddata.push(i); } // Draw cards 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 order game cards leveldata = shuffle(leveldata); } // Generate card show = function(){ var cardhtml = ''; for(var i=0; i<leveldata.length; i++){ cardhtml += '<div>'; cardhtml += '<div id="card' + i + '">'; cardhtml += '<div><img src="images/card' + leveldata[i]['cardno'] + '.jpg"></div>'; cardhtml += '<div><img src="images/cardbg.jpg"></div>'; cardhtml += '</div>'; cardhtml += '</div>'; } setHtml('gameplane', cardhtml); } // Flip all 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 = function(){ turn(this.id); } } } } // Time 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 message animation 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 ; } var key = parseInt(id.replace('card','')); if(leveldata[key]['turn']==0){ // Not opened if(first==-1){ // First turn_animate(key); first = key; leveldata[key]['turn'] = 1; }else{ // Second turn_animate(key); leveldata[key]['turn'] = 1; check_turn(key); } } } // Check whether the flop is successful check_turn = function(key){ is_lock = 1; if(leveldata[first]['cardno']==leveldata[key]['cardno']){ // Successful matchnum ++; if(matchnum==cardnum){ var et = setTimeout(function(){ message('success', levelup); }, 225); } first = -1; is_lock = 0; }else{ // Pairing failed, flip the opened card 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); } } // Pass level levelup = function(){ if(level<gametime.length-1){ level ++; setHtml('level', level); start(); }else{ clear(); } } // Pass all 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); } } // Gameplay tips = function(type){ disp('tips', type); } // Get the total number of cards get_total = function(){ return total; } // Reset parameter 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);I believe that the description in this article will have certain reference value for everyone's learning of JavaScript game design.