Wednesday, 2 August 2017

QUIZY MEMORY CARD GAME

----------------------------------------------------------------------------------------------------------
READ MORE:
http://memorygame.quizyplugin.com
https://holifestival.de/3rd/quizy-memorygame/demo
HTML 5 MATCHING GAMES
concentration game javascript code
https://github.com/mmenavas/memory-game
https://github.com/manelpb/concentration-game
https://www.youtube.com/watch?v=ayxE3qrOdbc
https://year3french.wikispaces.com/number+pairs+game
https://www.google.co.uk/search?q=memory+game+html5&rlz=1C1_____enGB747GB747&ei=MTyDWeTPGuSYgAbfi5DoDQ&start=20&sa=N&biw=1164&bih=586
https://c9.io/loragil/memory-game
http://matchsan.com/match/bundle.js
https://gamejolt.com
http://html5games.com/

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
add ARIA support [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA]

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:

CSS3 Patterns Gallery - Lea Verou [http://lea.verou.me/css3patterns/]
Swirl - by Uday [http://subtlepatterns.com/swirl-2/]
//css eye - [http://codepen.io/sooba/pen/DGmba]

----------------------------------------------------------------------------------------------------------
CODE:
----------------------------------------------------------------------------------------------------------

<head>

<title>jQuery memory card / concentration / pairs game</title>

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>

<ul>

</li>

</li>

</li>

</li>

</li>

</li>

<br><br><br><p class="text-style1">Bulgaria</p>

</li>

</li>

<br><br><br><p class="text-style1">Sweden</p>

</li>

<br><br><br><p class="text-style1">New<br>Zealand</p>

</li>

<br><br><br><p class="text-style1">Uruguay</p>

</li>

<br><br><br><p class="text-style1">Tunisia</p>

</li>

</ul>

</div>

<a id="restart" href="">Reset game</a>

</div>

//<![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>

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>

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>