Boxpuzzle - Cross browser by John Chacko | JavaScriptSource

Boxpuzzle - Cross browser by John Chacko

John Chacko Mar 21, 2012

Abstract

Cross browser and mobile compatible boxpuzzle. Dependency to jquery and jquerymobile.

Description

Cross browser and mobile compatible boxpuzzle. Dependency to jquery and jquerymobile. This is a newer version of my boxpuzzle http://www.javascriptsource.com/games/box-puzzle.html.

Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>           <script>             var _startTime = -1, _indexes = [] , _actTimer = null;               var _styles = ["ui-block-a", "ui-block-b", "ui-block-c", "ui-block-d"];             $('#home').live('pagebeforecreate', function (event) {                 var h = $(window).height();                 $(".timer").css("height", h * (3 / 100) + "px");                 $(".timer").css("font-size", h * (2 / 100) + "px");                 h = h * (75 / 100);                 h = h / 4;                 // manipulate this page before its widgets are auto-initialized                  for (var i = 0; i <= 15; i++) {                     _indexes[i] =  i ;                 }                 _indexes.sort(randomSort2);                  var _styleIndex;                 $.each(_indexes, function (index, value) {                     _styleIndex = index - (parseInt(index / 4) * 4);                     _dv = $("<div class='" + _styles[_styleIndex] + "'  id='_box" + value + "' style='height:" + h + "px'><div class='ui-bar ui-bar-b box' style='height:" + h + "px'><a href='#' data-role='button' data-inline='true' data-theme='b'>" + (value+1) + "</a></div></div>");                       if (value === 15) {                         _dv.addClass("_empty");                         _dv.find("div").text("");                         _dv.find("div").removeClass("ui-bar-b");                         _dv.find("div").addClass("ui-bar-d");                     }                       _dv.jqmData("_actIndex",  value  );                     _dv.jqmData("_index", index);                     $(".ui-grid-c").append(_dv);                 });             });                 $('#home').live('pagebeforeshow', function (event, ui) {                 var _boxes = $(".ui-grid-c").children();                  _boxes.each(function (index) {                     var _this = $(this);                     if (!_this.hasClass("._empty")) {                         _this.on("tap", _moveMe);                     }                 });             });             var _moveMe = function () {                 var _this = $(this);                 var _index = _this.jqmData("_index");                 var _empty = $("._empty");                 var _emptyIndex = _empty.jqmData("_index");                     var _actIndex = _this.jqmData("_actIndex");                   var _actEmptyIndex = _empty.jqmData("_actIndex");                     //now decide whther they can move or not.                 //can it go down? || right || up || left                   if (((_index + 4) === _emptyIndex) || ((_index + 1) === _emptyIndex) || ((_index - 4) === _emptyIndex) || ((_index - 1) === _emptyIndex)) {                     _styleIndex = _index - (parseInt(_index / 4) * 4);                       _this.removeClass(_styles[_styleIndex]);                     _styleIndex = _emptyIndex - (parseInt(_emptyIndex / 4) * 4);                     _this.addClass(_styles[_styleIndex]);                       _empty.removeClass(_styles[_styleIndex]);                     _styleIndex = _index - (parseInt(_index / 4) * 4);                     _empty.addClass(_styles[_styleIndex]);                       _this.addClass("_tempClass");                     var _emptyClone = _empty.clone();                       _empty.replaceWith(_this.clone());                       _this.replaceWith(_emptyClone);                       var _newThis = $("._tempClass");                       _newThis.jqmData("_index", _emptyIndex);                     _newThis.jqmData("_actIndex", _actIndex);                     _empty = $("._empty");                       _empty.jqmData("_index", _index);                     _empty.jqmData("_actIndex", _actEmptyIndex);                       _newThis.on("tap", _moveMe);                     _newThis.removeClass("_tempClass");                       if (_startTime === -1) {                         _timer();                     }                     _indexes[_index] = _actEmptyIndex;                     _indexes[_emptyIndex] = _actIndex;                     _checkWin();                 }             }               var _checkWin = function () {                 //loop through                 var _rightPlace = 0;                 $.each(_indexes, function (index, value) {                     if (index !== value) {                         return false;                     }                     _rightPlace++;                 });                 if (_rightPlace == 16) {                     clearTimeout(_actTimer);                     alert("Congratulations \nYou took "+ $("#_timer").text());                 }             }             var _timer = function () {                 _startTime++;                  $("#_timer").text(_startTime + " secs");                 _actTimer = setTimeout(_timer, 1000);             }             var randomSort2= function(a, b) {                 // Get a random number between 0 and 10                 var temp = parseInt(Math.random() * 10);                   // Get 1 or 0, whether temp is odd or even                 var isOddOrEven = temp % 2;                   // Get +1 or -1, whether temp greater or smaller than 5                 var isPosOrNeg = temp > 5 ? 1 : -1;                   // Return -1, 0, or +1                 return (isOddOrEven * isPosOrNeg);             }           </script>   <style>  .box  {       font-weight:bold;      text-align:center;      vertical-align:middle;      font-size:20px;       padding-topx:50px;  }  .timer  {      font-weight:bold;      text-align:center;      vertical-align:middle;       color:#0B0101;  }  </style> </head> <body >     <div id="home" data-role="page" data-transition="pop"> 	<div data-role='header' data-theme='a'> 		<h3>Boxpuzzle</h3> 	</div> 	<div data-role='content'>          <div data-role="navbar" > 	        <ul  data-theme="g"> 		        <li><a href="#" class="timer" id="_timer"></a></li>  	        </ul>         </div>         <br />     <div class="ui-grid-c">  		</div>    	</div>  <div data-role="navbar"> 	<ul> 		<li><a href="#" class="ui-btn-active"></a></li>  	</ul> </div>     Courtesy:jQueryMobile </div>   </body>   </html>

newer version of my boxpuzzle http://www.javascriptsource.com/games/box-puzzle.html

Leave a Response

(0 comments)