Boxpuzzle - Cross browser by John Chacko
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)