[goatsy]

I am trying to create a simple matching game for my online chemistry classroom, where you match elements with their appropriate ion. I found some great matching games written with jquery, however, I'm not sure if this is possible: I'd like to have the .png images match within the game, using separate images. The original code matches the image with itself. I need it to match with another image. I am experienced in html, html5, css, and a little bit of javascript, however, I'm not sure where to begin with this, or if it's possible. I'm thinking it may be something I might change here:

			/* 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');
			}
		},

Here is the original game I am trying to implement: http://www.slashc.co...game/index.html

http://www.slashc.co...game/index.html

I know it may seem as if I'm asking a lot, but I'm really just asking where to begin. Is this going to be a quick/easy change? or will I need to start from square one?

[goatsy]

Or maybe there's a simple way to assign the same matching object to two different images, rather than it only matching with itself?

[Dormilich]

just a stab into the blue, wouldn’t it suffice to look for a matching property of the image (however you like to name that property)?

[goatsy]

Dormilich, on 19 August 2012 - 10:55 PM, said:

just a stab into the blue, wouldn’t it suffice to look for a matching property of the image (however you like to name that property)?

Hello! Thank you for your reply! I have searched everywhere for the id tag (labeled "ID01"), however, I can't seem to find it. Also, what I've done is made the "drop veil" over the images clear, so students can see what element to match to what ion. I've been looking all over the internet for a jquery or html5 game that is more "matching" rather than "memory". Or a "connect to correct answer" style game. If you have any more suggestions, it would be of great help. Much appreciated!

		<!-- start: MEMORY GAME -->
		<div class="slashc-memory-game">
			<ul>
				<!-- back image (must be the first item) -->
				<li><img title="Click to reveal" src="img/back.png" /></li>
				<!-- match image (must be the second item) -->
				<li><img title="Match made" src="img/matched.jpg" /></li>				
				<!-- image figures (add as many as you want) -->
				<li><img id="ID01" title="Figure 01" src="img/fig01.jpg" /></li>
				<li><img id="ID02" title="Figure 02" src="img/fig02.jpg" /></li>
				<li><img id="ID03" title="Figure 03" src="img/fig03.jpg" /></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>
			</ul>
		</div>
		<!-- end: MEMORY GAME -->
		
	</div>

[Dormilich]

hm, more matching than memory? how about drag&drop? ( example at http://www.elated.co.../card-game.html )

This post has been edited by Dormilich: 20 August 2012 - 12:50 AM

[baavgai]

If you look at the actual source code (jquery.slashc.memory-game.js) , you'll find that it loads all the images into an array called "datFigs" and then does:

datFigs = datFigs.concat(datFigs);

You should be able to simply remove that line. Then, in the HTML, put two images with the same ID. It's crappy HTML, but it's ultimately what the game itself does.

That's really all it would take. Good luck.

[Dormilich]

but remember not to wonder, why the IDs won’t work (if you need them).

[goatsy]

baavgai, on 20 August 2012 - 05:46 AM, said:

If you look at the actual source code (jquery.slashc.memory-game.js) , you'll find that it loads all the images into an array called "datFigs" and then does:

datFigs = datFigs.concat(datFigs);

You should be able to simply remove that line. Then, in the HTML, put two images with the same ID. It's crappy HTML, but it's ultimately what the game itself does.

That's really all it would take. Good luck.

Thank you so much! This worked perfectly. Now I just need to somehow remove the duplicates... hmmmmmmm

Dormilich, on 20 August 2012 - 12:47 AM, said:

hm, more matching than memory? how about drag&drop? ( example at http://www.elated.co.../card-game.html )

Thank you! This game is exactly what I was looking for. I will use this for another game with the same style, but with drag/drop format instead.