Wednesday 2 August 2017

QUIZY MEMORY CARD GAME

https://devsnap.me/javascript-memory-games
  • utilize session + preserve game state on refresh
  • add single player mode + timer (duration) / timed game (countdown)
  • refactor 'game over' state
  • add 'start new game' button to game screen
  • add difficulty presets (board size)
  • code refactoring
  • design imporvements + browsers compatibility
  • add mobile support (touch/responsive)

Nice to have:

  • add ability to choose avatar
  • add option to load images from url/local folder
  • add sound FX
  • add match animations
  • add game options screen (difficulty level/deck pattern/enable sound)
  • add languages dictionary
  • add keyboard shortcuts
  • add pairs animations
  • Online features -
  • add login/users mechanism
  • add online multiplayer option
  • add chat
  • add in-game currency/achievemnents
  • add in-game store (buy patterns/ decks / avatars etc.)

REF:

CREDITS:

----------------------------------------------------------------------------------------------------------
CODE:
----------------------------------------------------------------------------------------------------------
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery memory card / concentration / pairs game</title>
<meta name="description" content="Quizy jquery plugin for creating memory game (concentration gaim, pairs game)">
<meta name="keywords" content="jquery plugin, memory game, concentration, pairs game, javascript, jquery" />
<!-- http://memorygame.quizyplugin.com/ -->
<!-- https://holifestival.de/3rd/quizy-memorygame/demo/ -->
<meta name="viewport" content="width=device-width">
<style type='text/css'>
/*
CSS for Memogry game plugin
Author: Yane Frenski
*/
/* the stle for the wrapper element */
.quizy-memorygame{
position:relative;
width:100%;
}
/* styles of the card to show */
.quizy-memorygame .mgcard-show{
width:156px;
height:156px;
background:url('http://goo.gl/ZaH355');
}
.quizy-memorygame .quizy-mg-item{
position:absolute;
cursor:pointer;
text-align:center;
}
.quizy-memorygame .quizy-mg-item .quizy-mg-item-bottom, .quizy-memorygame .quizy-mg-item .quizy-mg-item-top{
position:absolute;
top:0;
left:0;
text-align:center;
}
.quizy-mg-item .quizy-mg-item-top{
background:url('http://goo.gl/74FBAL');
}
/* styles for the popup notifications */
.quizy-mg-notification-fly{
width:90px;
height:90px;
position:absolute;
z-index:1000;
display:none;
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}
.quizy-mg-notification-fly-neg{
background:url('https://goo.gl/VBKGbj');
}
.quizy-mg-notification-fly-pos{
background:url('https://goo.gl/iYrKtw');
}
/* styles for the game summary */
#quizy-game-summary {
width:300px;
height:160px;
position:absolute;
z-index:1001;
background: #515b69;
box-shadow: rgba(0,0,0,0.7) 0 0 4px, inset 0 0 20px rgba(0, 0, 0, 0.4);;
border:1px solid #000;
display:none;
text-align: center;
}
#quizy-game-summary div.gs-column{
width:75px;
float:left;
padding:10px 0 10px 20px;
color:#fff;
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
text-align:center;
}
#quizy-game-summary #gs-column1{
font-size:16px;
padding-top:30px;
}
#quizy-game-summary #gs-column2{
font-size:12px;
padding-top: 65px;
background:url('https://goo.gl/qrYtup') no-repeat 70% 25%;
}
#quizy-game-summary #gs-column3{
font-size:12px;
padding-top: 65px;
background:url('https://goo.gl/ymBZgK') no-repeat 70% 25%;
}
#quizy-game-summary #gs-closebut,
#quizy-game-summary #gs-replaybut{
display: inline-block;
margin-top: 10px;
width: 70px;
padding: 10px;
text-align: center;
background: #D7EEF0;
cursor: pointer;
}
#quizy-game-summary #gs-closebut:hover,
#quizy-game-summary #gs-replaybut:hover{
background: #fff;
}
#quizy-game-summary #gs-replaybut{
margin-right: 20px;
}
.quizy-game-clear{
clear: both;
}
</style>
<style>
body{
font-family:Helvetica, Arial, Verdana;
text-align: center;
}
#tutorial-memorygame{
margin:auto;
width:780px;
}
.text-style1{
font-size:14pt;
color:#56605f;
font-weight:normal;
text-shadow: 1px 1px 1px #fff;
margin:0;
line-height:24pt;
}
.reset-button{
margin: 0 0 1.5em 0;
}
</style>
</head>
<body>
<h1>QuizY jQuery memory plugin</h1>
<div id="main" role="main">
<div id="tutorial-memorygame" class="quizy-memorygame">
<ul>
<li class="match1">
<img src="https://goo.gl/7pNigb">
</li>
<li class="match2">
<img src="https://goo.gl/vJasc9">
</li>
<li class="match3">
<img src="https://goo.gl/W5Fv1H">
</li>
<li class="match4">
<img src="https://goo.gl/qupnkd">
</li>
<li class="match5">
<img src="https://goo.gl/VBie51">
</li>
<li class="match6">
<img src="https://goo.gl/2veYo8">
</li>
<li class="match1">
<br><br><br><p class="text-style1">Bulgaria</p>
</li>
<li class="match2">
<br><br><br><p class="text-style1">Cuba</p>
</li>
<li class="match3">
<br><br><br><p class="text-style1">Sweden</p>
</li>
<li class="match4">
<br><br><br><p class="text-style1">New<br>Zealand</p>
</li>
<li class="match5">
<br><br><br><p class="text-style1">Uruguay</p>
</li>
<li class="match6">
<br><br><br><p class="text-style1">Tunisia</p>
</li>
</ul>
</div>
<div class="reset-button">
<a id="restart" href="">Reset game</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(5($){5 L(a){a.3x.1F[a.3r]=3o(a.3n,10)+a.3l}6 j=5(a){3k({3i:"1E.1d.3d 3c 3b",38:a})};6 k=5(){7(/*@2S!@*/19&&(2Q 2N.1w.1F.2K==="2F"))};6 l={2C:[0,4,4],2B:[1u,4,4],2y:[1s,1s,2v],2u:[0,0,0],2t:[0,0,4],2s:[1q,1p,1p],2o:[0,4,4],2n:[0,0,B],2m:[0,B,B],2l:[1b,1b,1b],2j:[0,1c,0],2i:[2h,2g,1o],2e:[B,0,B],2d:[2c,1o,2b],2a:[4,1n,0],27:[24,21,20],1Z:[B,0,0],1Y:[1R,1P,1O],1N:[3s,0,Y],2f:[4,0,4],1Q:[4,2z,0],2E:[0,t,0],22:[26,0,28],29:[1u,1z,1n],2p:[2r,2w,1z],2x:[1h,4,4],2A:[1i,2G,1i],2L:[Y,Y,Y],2M:[4,2O,2W],33:[4,4,1h],34:[0,4,0],35:[4,0,4],36:[t,0,0],39:[0,0,t],3e:[t,t,0],3j:[4,1q,0],3m:[4,W,3t],1H:[t,0,t],1I:[t,0,t],1J:[4,0,0],1K:[W,W,W],1L:[4,4,4],1M:[4,4,0],9:[4,4,4]};6 m=5(a){U(a&&a.1j("#")==-1&&a.1j("(")==-1){7"1S("+l[a].1T()+")"}1U{7 a}};$.1V($.1W.1X,{w:L,x:L,u:L,v:L});$.1k.23=5(){7 V.1l(5(){6 a=$(V);a.1d(a.F(\'1m\'))})};$.1k.1d=5(i){7 V.1l(5(){6 c=$(V),3,$8,C,11,1f,1e=k();U(c.F(\'S\')){7 19}6 e={R:(5(a){2k(a){X"T":7"Z";X"Z":7"T";X"15":7"14";X"14":7"15";2q:7"Z"}})(i.R),y:m(i.A)||"#H",A:m(i.y)||c.z("12-A"),1r:c.N(),D:i.D||1t,Q:i.Q||5(){},K:i.K||5(){},P:i.P||5(){}};c.F(\'1m\',e).F(\'S\',1).F(\'2D\',e);3={s:c.s(),p:c.p(),y:m(i.y)||c.z("12-A"),1v:c.z("2H-2I")||"2J",R:i.R||"T",E:m(i.A)||"#H",D:i.D||1t,o:c.1x().o,n:c.1x().n,1y:i.1r||2P,9:"9",18:i.18||19,Q:i.Q||5(){},K:i.K||5(){},P:i.P||5(){}};1e&&(3.9="#2R");$8=c.z("16","2T").8(2U).F(\'S\',1).2V("1w").N("").z({16:"1g",2X:"2Y",n:3.n,o:3.o,2Z:0,30:31,"-32-1A-1B":"G G G #1C","-37-1A-1B":"G G G #1C"});6 f=5(){7{1D:3.9,1v:0,3a:0,w:0,u:0,v:0,x:0,M:3.9,O:3.9,I:3.9,J:3.9,12:"3f",3g:\'3h\',p:0,s:0}};6 g=5(){6 a=(3.p/1c)*25;6 b=f();b.s=3.s;7{"q":b,"1a":{w:0,u:a,v:a,x:0,M:\'#H\',O:\'#H\',o:(3.o+(3.p/2)),n:(3.n-a)},"r":{x:0,w:0,u:0,v:0,M:3.9,O:3.9,o:3.o,n:3.n}}};6 h=5(){6 a=(3.p/1c)*25;6 b=f();b.p=3.p;7{"q":b,"1a":{w:a,u:0,v:0,x:a,I:\'#H\',J:\'#H\',o:3.o-a,n:3.n+(3.s/2)},"r":{w:0,u:0,v:0,x:0,I:3.9,J:3.9,o:3.o,n:3.n}}};11={"T":5(){6 d=g();d.q.w=3.p;d.q.M=3.y;d.r.x=3.p;d.r.O=3.E;7 d},"Z":5(){6 d=g();d.q.x=3.p;d.q.O=3.y;d.r.w=3.p;d.r.M=3.E;7 d},"15":5(){6 d=h();d.q.u=3.s;d.q.I=3.y;d.r.v=3.s;d.r.J=3.E;7 d},"14":5(){6 d=h();d.q.v=3.s;d.q.J=3.y;d.r.u=3.s;d.r.I=3.E;7 d}};C=11[3.R]();1e&&(C.q.3p="3q(A="+3.9+")");1f=5(){6 a=3.1y;7 a&&a.1E?a.N():a};$8.17(5(){3.Q($8,c);$8.N(\'\').z(C.q);$8.13()});$8.1G(C.1a,3.D);$8.17(5(){3.P($8,c);$8.13()});$8.1G(C.r,3.D);$8.17(5(){U(!3.18){c.z({1D:3.E})}c.z({16:"1g"});6 a=1f();U(a){c.N(a)}$8.3u();3.K($8,c);c.3v(\'S\');$8.13()})})}})(3w);',62,220,'|||flipObj|255|function|var|return|clone|transparent||||||||||||||left|top|height|start|second|width|128|borderLeftWidth|borderRightWidth|borderTopWidth|borderBottomWidth|bgColor|css|color|139|dirOption|speed|toColor|data|0px|999|borderLeftColor|borderRightColor|onEnd|int_prop|borderTopColor|html|borderBottomColor|onAnimation|onBefore|direction|flipLock|tb|if|this|192|case|211|bt||dirOptions|background|dequeue|rl|lr|visibility|queue|dontChangeColor|false|first|169|100|flip|ie6|newContent|visible|224|144|indexOf|fn|each|flipRevertedSettings|140|107|42|165|content|245|500|240|fontSize|body|offset|target|230|box|shadow|000|backgroundColor|jquery|style|animate|purple|violet|red|silver|white|yellow|darkviolet|122|150|gold|233|rgb|toString|else|extend|fx|step|darksalmon|darkred|204|50|indigo|revertFlip|153||75|darkorchid|130|khaki|darkorange|47|85|darkolivegreen|darkmagenta|fuchsia|183|189|darkkhaki|darkgreen|switch|darkgrey|darkcyan|darkblue|cyan|lightblue|default|173|brown|blue|black|220|216|lightcyan|beige|215|lightgreen|azure|aqua|flipSettings|green|undefined|238|font|size|12px|maxHeight|lightgrey|lightpink|document|182|null|typeof|123456|cc_on|hidden|true|appendTo|193|position|absolute|margin|zIndex|9999|webkit|lightyellow|lime|magenta|maroon|moz|message|navy|lineHeight|error|plugin|js|olive|none|borderStyle|solid|name|orange|throw|unit|pink|now|parseInt|filter|chroma|prop|148|203|remove|removeData|jQuery|elem'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
return -1;
}
}
(function($) {
var initData = '';
var initOpts = {}
var methods = {
init : function(options) {
initData = $(this).html();
initOpts = options;
var opts = $.extend({}, $.fn.quizyMemoryGame.defaults, options);
var itemsNum = $(this).children('ul').children('li').length;
var correctItems = new Array();
var matches = new Array();
var inHtml = new Array();
var itemsClass = 'quizy-mg-item';
var selItemClass = '';
var selItemId = -1;
var numClicks = 0;
var numTotalClicks = 0;
var numMatches = 0;
var numSeconds = 0;
var gameTimer;
var delayShow = opts.openDelay;
var w = opts.itemWidth;
var h = opts.itemHeight;
var m = opts.itemsMargin;
var rowNum = Math.ceil(itemsNum/opts.colCount);
var random = opts.randomised;
var handleClick = function(){
if(numTotalClicks==0) gameTimer = setInterval(incTime,1000);
numTotalClicks ++;
var tId = $(this).attr('id');
var tdIdNum = parseInt(tId.substring(itemsClass.length,tId.length));
var tClass = matches[tdIdNum];
unbindClick($(this));
showItem($(this),tdIdNum);
if(numClicks==0){
numClicks ++ ;
selItemClass = tClass;
selItemId = tId;
}else if(numClicks == 1){
numClicks = 0;
if(tClass == selItemClass){
showResIcon('correct');
unbindClick($('.'+tClass));
correctItems.push(tId);
correctItems.push(selItemId);
numMatches ++ ;
if(numMatches == itemsNum/2){
clearInterval(gameTimer);
if(opts.gameSummary){
$('div#quizy-game-summary').
children('div#gs-column2').
html(numSeconds+'<br>'+opts.textSummaryTime);
$('div#quizy-game-summary').
children('div#gs-column3').
html(numTotalClicks+'<br>'+opts.textSummaryClicks);
$('div#quizy-game-summary').delay(2000).fadeIn(1000);
}
if(opts.onFinishCall!=''){
opts.onFinishCall({ clicks: numTotalClicks, time: numSeconds } );
}
}
}else{
showResIcon('wrong');
unbindClick($('div.'+itemsClass));
hideItem($('div#'+selItemId));
hideItem($(this));
setTimeout( function(){
$('.'+itemsClass).each(function(){
var myId = $(this).attr('id');
if(correctItems.indexOf(myId) == -1){
bindClick($(this));
}
});
}, delayShow+opts.animSpeed+250);
}
}
}
var unbindClick = function(el){
el.unbind('click');
el.css('cursor','default');
}
var bindClick = function(el){
el.bind('click',handleClick);
el.css('cursor','pointer');
}
var showItem = function(el,id){
var topId = el.children('div.quizy-mg-item-top').attr('id');
switch(opts.animType){
default:
case 'fade':
addInFullHTML(el,id);
$('#'+topId).fadeOut(opts.animSpeed);
break;
case 'flip':
el.flip({
direction:opts.flipAnim,
speed: opts.animSpeed,
content: el.children('div.quizy-mg-item-bottom'),
color:'#777',
onEnd: function(){
addInHTML(el,id);
}
});
break;
case 'scroll':
addInFullHTML(el,id);
$('#'+topId).animate({height: 'toggle', opacity:0.3},opts.animSpeed);
break;
}
}
var hideItem = function(el){
var topId = el.children('div.quizy-mg-item-top').attr('id');
switch(opts.animType){
default:
case 'fade':
$('#'+topId).delay(delayShow).fadeIn(opts.animSpeed, function(){
removeInHTML(el);
});
break;
case 'flip':
setTimeout( function(){
el.revertFlip();
}, delayShow);
setTimeout( function(){
removeInHTML(el);
}, delayShow+opts.animSpeed*4);
break;
case 'scroll':
$('#'+topId).delay(delayShow).
animate({height: 'toggle', opacity:1},opts.animSpeed,
function(){
removeInHTML(el);
});
break;
}     
}
var showResIcon = function(type){
if(opts.resultIcons){
var el;
var time = Math.round(delayShow/3);
if(type=='wrong'){
el = $('div#quizy-mg-msgwrong');
}else if(type=='correct'){
el = $('div#quizy-mg-msgcorrect');
}
el.delay(time).fadeIn(time/2).delay(time/2).hide("explode", time/2);
}
}
var incTime = function(){
numSeconds ++;
}
var addInFullHTML = function(el,id){
el.children('.quizy-mg-item-bottom')
.children('.mgcard-show')
.html(inHtml[id]);
}
var addInHTML = function(el,id){
el.children('.mgcard-show')
.html(inHtml[id]);
}
var removeInHTML = function(el){
el.children('.quizy-mg-item-bottom').children('.mgcard-show').html('');
}
$(this).children('ul').hide();
$(this).css({height:rowNum*(h+m)+'px'});
if(random){
var ranArr = Array();
for(var j=0; j< itemsNum; j++){
inHtml[j] = '';
ranArr.push(j);
}
}
var j=0;
var i=0;
while(i<itemsNum){
if(random){
var pick = Math.floor(Math.random()*ranArr.length);
j = ranArr[pick];
ranArr.splice(pick,1);
}else{
j = i;
}
var inEl = $(this).children('ul').children('li').eq(j);
var xRatio = (i+opts.colCount)%opts.colCount;
var yRatio = Math.floor(i/opts.colCount);
var l = xRatio*(w+m);
var t = yRatio*(h+m);
inHtml[j] = inEl.html();
$(this).append('<div id="'+itemsClass+j+'" class="'+itemsClass+
'" style="width:'+
w+'px; height:'+h+'px; left:'+l+'px; top:'+t+'px">' +
'<div class="quizy-mg-item-bottom"><div class="mgcard-show">'+
'</div></div><div id="quizy-mg-item-top'+j+
'" class="quizy-mg-item-top" style="width:'+
w+'px; height:'+h+'px;"></div></div>');
i++;
matches[j] = inEl.attr('class');
}
$(this).children('ul').remove();
if(opts.resultIcons){
$(this).append('<div id="quizy-mg-msgwrong"'+
' class="quizy-mg-notification-fly quizy-mg-notification-fly-neg"></div>'+
'<div id="quizy-mg-msgcorrect" class="quizy-mg-notification-fly '+
' quizy-mg-notification-fly-pos"></div>');
var xMid = $(this).width()/2 -
$('div.quizy-mg-notification-fly').width()/2;
var yMid = $(this).height()/2 -
$('div.quizy-mg-notification-fly').height()/2 -
opts.itemsMargin/2;
$('div.quizy-mg-notification-fly').css({top:yMid+'px',left:xMid+'px'});
}
if(opts.gameSummary){
var gameEl = $(this);
gameEl.append('<div id="quizy-game-summary"><div class="gs-column" id="gs-column1">'+
opts.textSummaryTitle+
'</div><div class="gs-column" id="gs-column2"></div>'+
'<div class="gs-column" id="gs-column3"></div>'+
'<div class="quizy-game-clear"></div></div>');
var xMid = gameEl.width()/2 -
$('div#quizy-game-summary').width()/2;
var yMid = gameEl.height()/2 -
$('div#quizy-game-summary').height()/2 -
opts.itemsMargin/2;
$('div#quizy-game-summary').css({top:yMid+'px',left:xMid+'px'});
if(opts.replayButton){
$('#quizy-game-summary').append('<div id="gs-replaybut">'+
opts.replayButtonText+'</div>');
}
$('#quizy-game-summary').append('<div id="gs-closebut">'+
opts.closeButtonText+'</div>');
$('div#gs-closebut').click(function(){
$(this).parent().fadeOut();
});
$('div#gs-replaybut').click(function(){
gameEl.quizyMemoryGame('restart');
});
}
$('.quizy-mg-item').click(handleClick);
},
destroy : function( ) {
$(this).empty();
},
restart: function( ){
methods.destroy.apply( this );
$(this).append(initData);
methods.init.call( this, initOpts );
}
};
$.fn.quizyMemoryGame = function(optionsMethods) {
if ( methods[optionsMethods] ) {
return methods[ optionsMethods ].apply( this, arguments);
} else if ( typeof optionsMethods === 'object' || ! optionsMethods ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' +  optionsMethods + ' does not exist on jQuery.tooltip' );
}
}
$.fn.quizyMemoryGame.defaults = {itemWidth: 156, itemHeight: 156, itemsMargin:10, colCount:4, animType:'scroll', animSpeed:250, openDelay:2500, flipAnim:'rl', resultIcons:true, gameSummary:true, randomised:true, textSummaryTitle:'Your game summary', replayButton:true, replayButtonText:'Replay', closeButtonText:'Close', textSummaryClicks:'clicks', textSummaryTime:'seconds', onFinishCall:''}
})(jQuery);
//]]>
</script>
<script>
var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:4, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true };
$('#tutorial-memorygame').quizyMemoryGame(quizyParams);
$('#restart').click(function(){
$('#tutorial-memorygame').quizyMemoryGame('restart');
return false;
});
</script>
</body>
</html>



Posted by on Wednesday 2 August 2017 at 13:41
Labels: , , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets