Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Memory Game Hang Up

    Not the best with javascript, but I am with HTML and CSS. Anyways I have this memory match game I have to figure out, and I have it to a pretty good point. The only issue is when a person makes a successful match, it flips to an image of an X and that is the same for every successful match that is received.
    What I am attempting to do is give each match a specific picture that reveals when the user correctly matches. For example a person would make two faces and the image that would stay visible would be a circle and on another match of two faces it would be a square. I hope that is descriptive enough?
    Any help is appreciated.


    Here is the JS
    Code:
     /* 
    SlashC jQuery Memory Game plugin
    hi@slashc.com, www.slashc.com
    */
    (function($)
    {	
    	/* plugin methods */
    	var methods =
    	{
    		/* intialization */
    		init : function(options)
    		{
    			/* settings */
    			var settings = 
    			{ 
    				spacing: 10, /* space between items */
    				columns: 8 /* number of columns */
    			};
    			
    			return this.each(function()
    			{
    				var self = $(this), data = self.data('data');
    				
    				if(!data)
    				{
    					/* overwrite default settings */
    					if (options && $.isPlainObject(options)) $.extend(settings, options);
    				
    					/* get unordered list */
    					var list = self.find('ul').first();
    					
    					/* get images data */
    					var datBack, datMatch, datFigs = [], numFigs, imgEl;
    					list.find('img').each(function(i)
    					{
    						imgEl = $(this);						
    						if (i == 0) { datBack = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
    						else if (i == 1) { datMatch = { src: imgEl.attr('src'), title: imgEl.attr('title') }; }
    						else { datFigs.push({ src: imgEl.attr('src'), id: imgEl.attr('id'), title: imgEl.attr('title') }); }
    					});
    					datFigs = datFigs.concat(datFigs);
    					numFigs = datFigs.length;
    					
    					/* init data */
    					self.data('data',
    					{
    						target: self, 
    						list: list,
    						settings: settings,						
    						datBack: datBack,
    						datMatch: datMatch,
    						datFigs: datFigs,
    						numFigs: numFigs,
    						itmData: null, 
    						busy: false,
    						events: { init: $.Event('init'), match: $.Event('match'), done: $.Event('done'), reveal: $.Event('reveal'), fail: $.Event('fail') },
    						stats: { numClicks: 0, time: 0 },
    						matchCount: 0
    					});
    					
    					/* generate items */
    					methods._generate.call(self, self.data('data'));
    				}
    			});
    		},
    		/* restart */
    		restart : function()
    		{
    			return this.each(function()
    			{
    				var self = $(this), data = self.data('data');				
    				if(data) methods._generate.call(self, data);
    			});
    		},
    		/* get statistics */
    		getStats : function(options)
    		{
    			var i = options ? $.extend({ index: 0 }, options).index : 0;
    			var stats = { numClicks: 0, time: 0 };
    			this.each(function(j)
    			{
    				if (i == j)
    				{
    					var self = $(this), data = self.data('data');
    					if (data) stats = { numClicks: data.stats.numClicks, time: (new Date).getTime() - data.stats.time };	
    				}
    			});
    			return stats;
    		},
    		/* dispose */
    		dispose : function()
    		{
    			return this.each(function()
    			{
    				var self = $(this), data = self.data('data');
    				if (data)
    				{
    					methods._clear.call(self, data);
    					self.removeData('data');	
    				}
    			});		
    		},
    		/* clear all items */
    		_clear : function(data)
    		{
    			/* remove current list items */
    			var liEl;
    			data.list.find('li').each(function()
    			{
    				liEl = $(this);
    				methods._disposeItem.call(liEl);
    				liEl.remove();
    			});
    			data.matchCount = data.numFigs * 0.5;
    			data.stats.numClicks = 0;
    		},
    		/* generate items */
    		_generate : function(data)
    		{
    			/* clear current items */
    			methods._clear.call(this, data);
    			
    			/* randomize items */
    			var i = data.numFigs, j, temp;
    			while (i)
    			{
    				j = parseInt(Math.random() * i);
    				temp = data.datFigs[--i];
    				data.datFigs[i] = data.datFigs[j];
    				data.datFigs[j] = temp;
    			}
    			
    			/* display items */
    			i = data.numFigs;
    			var prefix = '<img style="position:absolute;top:0;left:0; " ';
    			while (i--) 
    			{ 
    				data.list.append('<li>' + 
    					prefix + 'src="' + data.datMatch.src + '" title="' + data.datMatch.title + '" />' +
    					prefix + 'src="' + data.datFigs[i].src + '" id="' + data.datFigs[i].id + '" title="' + data.datFigs[i].title + '" />' +
    					prefix + 'src="' + data.datBack.src + '" title="' + data.datBack.title + '" />' +
    				'</li>');
    			}
    			var item, listW = 0, listH = 0, offsetX, offsetY, itemW, itemH, cols = data.settings.columns; 
    			i = j = 0;				
    			data.list.find('li').each(function()
    			{
    				item = $(this).css('float', 'none').css('position', 'absolute');
    				if (i == cols) { i = 0; j++; }
    				itemW = item.outerWidth(); 
    				itemH = item.outerHeight();
    				offsetX = i * (itemW + data.settings.spacing);
    				offsetY = j * (itemH + data.settings.spacing);
    				item.css('left', offsetX).css('top', offsetY);
    				listW = Math.max(listW, offsetX + itemW);
    				listH = Math.max(listH, offsetY + itemH);
    				methods._initItem.call(item, itemW, itemH, data);
    				i++;
    			});
    			data.list.css('width', listW).css('height', listH);
    			data.stats.time = (new Date).getTime();
    			this.trigger(data.events.init);
    		},
    		/* init item */
    		_initItem : function(w, h, gameData)
    		{
    			var data = this.data('data');
    			if (!data)
    			{
    				/* get item images */ 
    				var imgMatch, imgFig, imgBack;			
    				this.find('img').each(function(i)
    				{
    					if (i == 0) imgMatch = $(this);
    					else if (i == 1) imgFig = $(this);
    					else if (i == 2) imgBack = $(this);
    				});
    				
    				/* init item data */
    				this.data('data',
    				{
    					w: w, h: h,
    					target: this,
    					game: gameData.target,
    					gameData: gameData,
    					imgMatch: imgMatch,
    					imgFig: imgFig,
    					imgBack: imgBack,
    					matched: false,
    					busy: false,
    					id: imgFig.attr('id')
    				});
    				imgFig.removeAttr('id');
    				this.css('cursor', 'default');
    				imgBack.css('cursor', 'pointer');
    				
    				/* listen to mouse down */
    				this.bind('mousedown.slashcMemoryGame', $.proxy(methods._onItemMouseDown, this));
    			}
    		},
    		/* dispose of item */
    		_disposeItem : function()
    		{
    			var data = this.data('data');
    			if (data)
    			{
    				if (data.gameData.itmData) data.gameData.itmData = null;
    				this.unbind('mousedown.slashcMemoryGame');
    				this.removeData('data');
    			}
    		},
    		/* on item mouse down */
    		_onItemMouseDown : function(e)
    		{
    			var data = this.data('data');
    			if (data && !data.matched && !data.busy)
    			{
    				if (!data.gameData.busy) 
    				{
    					data.gameData.stats.numClicks++;
    					data.busy = true;
    				
    					if (data.gameData.itmData == null) data.gameData.itmData = data;
    					else data.gameData.busy = true;
    					
    					data.imgBack.animate({ top: -data.h, left: 0 }, 'fast', $.proxy(function()
    					{
    						var data = this.data('data');						
    						if (data != data.gameData.itmData)
    						{
    							if (data.gameData.itmData.id == data.id)
    							{
    								data.matched = data.gameData.itmData.matched = true;
    								data.imgFig.fadeOut('fast');
    								data.gameData.itmData.imgFig.fadeOut('fast');
    								data.gameData.matchCount --;
    								data.gameData.events.match.id = data.id;
    								data.game.trigger(data.gameData.events.match);
    							}
    							else
    							{
    								data.imgBack.delay(250).animate({ top: 0, left: 0 }, 'slow', 
    								$.proxy(function() { this.busy = false; }, data));								
    								data.gameData.itmData.imgBack.delay(250).animate({ top: 0, left: 0 }, 'slow', 
    								$.proxy(function() { this.busy = false; }, data.gameData.itmData));
    								data.gameData.events.fail.id = data.id;
    								data.game.trigger(data.gameData.events.fail);
    							}
    							data.gameData.busy = false;
    							data.gameData.itmData = null;
    							if (data.gameData.matchCount == 0)
    							{
    								data.game.trigger(data.gameData.events.done);
    							}
    						}
    					
    					}, this));
    					data.gameData.events.reveal.id = data.id;
    					data.game.trigger(data.gameData.events.reveal);
    				}				
    			}
    			e.preventDefault();
    		}
    	};
    	
    	/* Memory game plugin */
    	$.fn.slashcMemoryGame = function(p1, p2)
    	{
    		/* p1 - method name, p2 - method options */
    		/* p1 - options for init method, p2 - undefined */
    		if (p2 == undefined)
    		{
    			if (p1 == undefined) return methods.init.call(this);
    			else if (methods[p1]) return methods[p1].call(this);
    			else if ($.isPlainObject(p1)) return methods.init.call(this, p1);			
    		}
    		else if (methods[p1])
    		{
    			if ($.isPlainObject(p2)) return methods[p1].call(this, p2);
    			else return methods[p1].call(this);
    		}
    		return this;
    	};
    	
    	/* Attach plugin */
    	$(document).ready(function()
    	{
    		$('div.slashc-memory-game').slashcMemoryGame();
    	});
    	
    })(jQuery);
    Here is the HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>jQuery Memory Game</title>
    	<!-- this demo page style -->	
    	<style type="text/css">
    		
    	
    		
    		
    		html {
    			background: url(img/BST_GUESSWHO-background.png) no-repeat center top;
    			background-color: #050a0d;
    			background-size: 100%;
    			min-width:400px;
    			
    		}
    	
    	
    	
    	
    		body, html 
    		{ 
    			margin:0;
    			padding:0;
    			
    			font: 13px "Lucida Sans Unicode","Lucida Grande",arial,sans-serif;
    			
    		}
    		a{color:#669;text-decoration:underline}
    		div#sample, p#info
    		{ 
    			width:800px;
    			height: 600px;
    			margin: 40px auto 20px auto;
    			
    			padding:30px;
    		
    			
    			
    		
    			
    		}
    		p#info { margin: 0 auto 40px auto; }
    		
    		
    		#logo {
    			height: 200px;
    			background: url('img/BST_GUESSWHO-logo.png') no-repeat center top;
    			background-size: 200px;
    			overflow: visible;
    			text-indent: -999em;
    		}
    		
    	#logo a {
    		height: 20px;
    	}
    	
    
    		
    	</style>
    	
    	<!-- start: INCLUDES -->
    	<link type="text/css" href="css/slashc.memory-game.css" rel="stylesheet">
    	<script type="text/javascript" src="js/3rdparty/jquery-1.5.min.js"></script>
    	<script type="text/javascript" src="js/3rdparty/jquery.easing.1.3.js"></script>
    	<script type="text/javascript" src="js/jquery.slashc.memory-game.js"></script>
    	<!-- end: INCLUDES -->
    
    </head>
    <body>
    	<div id="sample">
    	
    		<!-- start: MEMORY GAME -->
    		<div class="slashc-memory-game">
    			<ul>
    				<!-- back image (must be the first item) -->
    				<li><img title="Click to reveal" src="img/BST_1_GUESSWHO-question.png" /></li>
    				<!-- match image (must be the second item) -->
    				
    							
    				<!-- image figures (add as many as you want) -->
    				<li><img id="ID01" title="Figure 01" src="img/BST_2_GUESSWHO-back.png"  /></li>
    				<li><img id="ID02" title="Figure 02" src="img/BST_2_GUESSWHO-back.png" /></li>
    				<li><img id="ID03" title="Figure 03" src="img/BST_2_GUESSWHO-back.png" /></li>
    				<li><img id="ID04" title="Figure 04" src="img/fig04.jpg" /></li>
    				<li><img id="ID05" title="Figure 05" src="img/fig05.jpg" /></li>
    				<li><img id="ID06" title="Figure 06" src="img/fig06.jpg" /></li>
    				<li><img id="ID07" title="Figure 07" src="img/fig07.jpg" /></li>
    				<li><img id="ID08" title="Figure 08" src="img/fig08.jpg" /></li>
    				<li><img id="ID09" title="Figure 09" src="img/fig09.jpg" /></li>
    				<li><img id="ID10" title="Figure 10" src="img/fig10.jpg" /></li>
    				<li><img id="ID11" title="Figure 11" src="img/fig10.jpg" /></li>
    				<li><img id="ID12" title="Figure 12" src="img/fig10.jpg" /></li>
    				<li><img id="ID13" title="Figure 13" src="img/fig10.jpg" /></li>
    				<li><img id="ID14" title="Figure 14" src="img/fig10.jpg" /></li>
    				<li><img id="ID15" title="Figure 15" src="img/fig10.jpg" /></li>
    				<li><img id="ID16" title="Figure 16" src="img/fig10.jpg" /></li>
    				<li><img id="ID17" title="Figure 17" src="img/fig10.jpg" /></li>
    				<li><img id="ID18" title="Figure 18" src="img/fig10.jpg" /></li>
    				<li><img id="ID19" title="Figure 19" src="img/fig10.jpg" /></li>
    				<li><img id="ID20" title="Figure 20" src="img/fig10.jpg" /></li>
    				<li><img id="ID20" title="Figure 20" src="img/fig10.jpg" /></li>
    			</ul>
    			
    		</div>
    		<!-- end: MEMORY GAME -->
    		
    	</div>
    	
    	<div id="logo">
    		<a href="http://www.broadstreet.com" alt="">Broadstreet.com</a> 
    	</div>
    	
    	<!-- for demo purposes we're going to listen when the game is done and display basic statistics -->
    	<p id="info"><span></span> <a id="play-again" href="#">Play Again</a></p>	
    	<script type="text/javascript">
    		// this script shows how you can get info about the game
    		var game = $('div.slashc-memory-game'); // get the game
    		var info = $('p#info').find('span'); // get the info box
    		var playAgain = $('a#play-again').css('visibility', 'hidden'); // get the play again link
    		// format time like hh:mm:ss
    		var formatTime = function(s)
    		{
    			var h = parseInt(s / 3600), m = parseInt((s - h * 3600) / 60); s = s % 60;
    			return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    		}
    		// listen for game 'done' event 
    		game.bind('done', function(e)
    		{
    			// show basic stats
    			var stats = game.slashcMemoryGame('getStats');
    			info.html('Success ! Number of clicks : ' + stats.numClicks + ', elapsed time : ' + formatTime(parseInt(stats.time / 1000)) + '.');
    			playAgain.css('visibility', 'visible'); // show link
    		});
    		// play again action
    		playAgain.click(function(e)
    		{
    			playAgain.css('visibility', 'hidden'); // hide link
    			info.html('Memory Game, click to reveal images'); // reset text
    			game.slashcMemoryGame('restart'); // restart game
    			e.preventDefault();
    		});
    	</script>
    	
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I'm a little lost.

    Surely you don't have MORE than TWO of the same image/face? The idea is to match pairs, yes?

    So why not simply LEAVE the flipped over matching pair *AS IS* on the board? That's what all variations of this game that I've ever seen do (even the one my 2-year-old granddaughter plays on her mom's iPad does it this way).

    If you really want to ensure that people understood that the still-displayed images are prior matches, you could simply indicate so by, perhaps, "fading" the images a bit? That is, just change their opacity? Or you could just put a big green border around them. Or or or. Why work harder than that?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well the way it goes the pictures are the back of peoples heads and my art director wants, when theres a match, them to turn into the front of the person matched.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Yes? That's what I said.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by bbart10 View Post
    Well the way it goes the pictures are the back of peoples heads and my art director wants, when theres a match, them to turn into the front of the person matched.
    The simplest way would be to make each object in your array of cards have two properties - one for the image displaying the back of the person's head and the socond for the image displaying their face. By setting up the array like that you keep the two images correctly associated when you shuffle the array.

    Then it becomes a simple image swap of one image for the other when there is a match.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Ahhh...I guess I missed that it's the back and fonts of heads. But then where is the challenge in the game??

    I'm missing something: If I see two heads with short blonde hair, it's trivial to flip both of them.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Old Pedant View Post
    I'm missing something: If I see two heads with short blonde hair, it's trivial to flip both of them.
    I read it as the backs of their heads show when you flip the cards to try to match them and that they only swap to show the faces after a match. Presumably they all look the same before you flipp any. Cards with two separate fronts to display in different situations.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Maybe we will never know. But yes, after re-reading his post I think you have it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •