jQuery fun #1: Number puzzle   Leave a comment

jQuery is popular for the effects they produce. May be most web developers use the download and manipulate method to create the desired effect. Designers on the other hand are scared of terms like programming, coding, logic etc. In most cases it’s the ignorance of these people that blocks the creation of original code. From scratch designs are good when you go for tailoring your needs.

As usual to learn this we need to try it. The following will surely inspire you in getting interested for writing original codes.

Puzzle.html


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //Puzzlw logic
  var pCells = $('.pCell');
  var Cur16 = [3, 3];
  pCells.bind('click', function(){
	  var x = parseInt($(this).attr('id')) - 1;
	  var now = [Math.floor(x/4), x % 4];

	  if(!cmpArrays(Cur16, now)){
		  var lCell = [now[0], now[1]];
		  lCell[0]++;
		  if(cmpArrays(Cur16, lCell) || 
				  cmpArrays(Cur16, [now[0] - 1, now[1]]) || 
				  cmpArrays(Cur16, [now[0], now[1]+1]) || 
				  cmpArrays(Cur16, [now[0], now[1]-1])){
			  pCells[Cur16[0]*4 + Cur16[1]].src = pCells[now[0]*4+now[1]].src;
			  pCells[now[0]*4+now[1]].src = "/no/16.png";

		  	  Cur16 = now;
		  }
	  }
	});
  function cmpArrays(a, b) {
	   if (a == b) {
	       return true;
	   }   
	   for (key in a) {
	     if (a[key] != b[key]) {
	         return false;
	     }
	   }
	   return true;
	}
  //puzzle end
</script>
</head>
<body>
<table width="100%" height="100%">>
<tr><td align="center" height="600px" valign="middle">
<table>
	<tr>
	<td><img class="pCell" id="1" src="/no/1.png" /></td>
	<td><img class="pCell" id="2" src="/no/2.png" /></td>
	<td><img class="pCell" id="3" src="/no/3.png" /></td>
	<td><img class="pCell" id="4" src="/no/4.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="5" src="/no/5.png" /></td>
	<td><img class="pCell" id="6" src="/no/6.png" /></td>
	<td><img class="pCell" id="7" src="/no/7.png" /></td>
	<td><img class="pCell" id="8" src="/no/8.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="9" src="/no/9.png" /></td>
	<td><img class="pCell" id="10" src="/no/10.png" /></td>
	<td><img class="pCell" id="11" src="/no/11.png" /></td>
	<td><img class="pCell" id="12" src="/no/12.png" /></td>
	</tr>
	<tr>
	<td><img class="pCell" id="13" src="/no/13.png" /></td>
	<td><img class="pCell" id="14" src="/no/14.png" /></td>
	<td><img class="pCell" id="15" src="/no/15.png" /></td>
	<td><img class="pCell" id="16" src="/no/16.png" /></td>
	</tr>
</table>
</td></tr>
</table>
</body>
</html>

Next step? Write the shuffle code for this

Advertisements

Posted February 25, 2012 by jsusmer in Lesson, mind waves

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: