diff options
author | Carlo Zancanaro <carlo@clearboxsystems.com.au> | 2013-09-05 14:35:10 +1000 |
---|---|---|
committer | Carlo Zancanaro <carlo@clearboxsystems.com.au> | 2013-09-05 14:35:10 +1000 |
commit | 04459f540bd462d979b02cb946087ce02b9bbb55 (patch) | |
tree | 317a6e1e8b1e46fd667d675058368e9ebd48be7c | |
parent | 73ff39dbdd23179728a510b30ba65a3d242b84f0 (diff) |
-rw-r--r-- | game.js | 112 | ||||
-rw-r--r-- | index.html | 8 | ||||
-rw-r--r-- | style.css | 10 |
3 files changed, 105 insertions, 25 deletions
@@ -18,28 +18,42 @@ }; $.fn.fullclick = function(callback) { - var mousedown = false; - this.mousedown(function() { - mousedown = true; - }); - this.mouseup(function() { - if (mousedown) { - callback.apply(this, arguments); - } - mousedown = false; - }); + var callbacks = this.data("fullclick-callbacks"); + if (callbacks == null) { + callbacks = $.Callbacks(); + this.data("fullclick-callbacks", callbacks); + + var mousedown = false; + this.mousedown(function() { + mousedown = true; + }); + this.mouseup(function() { + if (mousedown) { + callbacks.fireWith(this, arguments); + } + mousedown = false; + }); + } + callbacks.add(callback); + return function() { + callbacks.remove(callback); + }; }; })(jQuery); var startGame = (function () { - return function(source, target, message) { + var timer; + var clickHandlers = []; + var sortableActive = false; + return function startGame(source, target, message) { var $message = $(message); var $source = $(source); var $target = $(target); var $both = $source.add($target); + $source.append($both.find("li")); $source.randomize("li"); var areAllOver = function() { @@ -53,37 +67,91 @@ var startGame = (function () { }); return success; }; + var gameWon = function() { + return areAllOver() && areInOrder(); + }; + + + var startTime = new Date().getTime(); + var elapsedTimeString = function() { + var currentTime = new Date().getTime(); + var elapsedMillis = currentTime - startTime; + var elapsedSeconds = elapsedMillis / 1000; + var elapsedMinutes = elapsedSeconds / 60; + var elapsedHours = elapsedMinutes / 60; + var portion = function(value, base, sep) { + if (value < 1) return ""; + value = Math.floor(value); + var modVal = "" + value; + var baseLen = 0; + if (base) { + baseLen = ("" + (base - 1)).length; + modVal = "" + (value % base); + } + while (modVal.length < baseLen) + modVal = "0" + modVal; + return modVal + sep; + }; + return "" + + portion(elapsedHours, null, ":") + + portion(elapsedMinutes + 60, 60, ":") + + portion(elapsedSeconds + 60, 60, ".") + + portion(elapsedMillis, 1000, ""); + }; + + var cleanUp = function() { + $message.text(""); + $target.removeClass("success"); + if (timer) + window.clearInterval(timer); + if (sortableActive) + $both.sortable("destroy"); + sortableActive = false; + $both.removeClass("playing"); + $.each(clickHandlers, function(index, item) { + if (item) + item(); + }); + clickHandlers = []; + }; var checkGameResult = function() { - if (areAllOver() && areInOrder()) { - $message.text("Well done!"); + if (gameWon()) { + cleanUp(); + $message.html(elapsedTimeString() + "<br>" + "Well done!<br>"); $target.addClass("success"); - } else { - $message.text(null); - $target.removeClass("success"); } }; - $source.fullclick(function(event) { - if (event.target != $(source)[0]) { + cleanUp(); + + timer = window.setInterval(function() { + $message.text(elapsedTimeString()); + }, 10); + + + clickHandlers.push($source.fullclick(function(event) { + if (event.target != $(source)[0] && !gameWon()) { $target.append(event.target); checkGameResult(); } - }); - $target.fullclick(function(event) { - if (event.target != $(target)[0]) { + })); + clickHandlers.push($target.fullclick(function(event) { + if (event.target != $(target)[0] && !gameWon()) { $source.append(event.target); checkGameResult(); } - }); + })); + $both.addClass("playing"); $both.sortable({ connectWith: ".bible-game", update: function (event) { checkGameResult(); } }); + sortableActive = true; }; })(); @@ -7,6 +7,9 @@ </head> <body> <h1>History Bible Game</h1> + <div id="go-button"> + <button>Start</button> + </div> <div class="container"> <ul class="bible-game sortable" id="source"> <li data-index="0">Genesis</li> @@ -34,9 +37,12 @@ <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="game.js"></script> - <script> + <script> $(function() { + $("#go-button button").click(function() { + $(this).text("Restart"); startGame("#source", "#target", "#message"); + }); }); </script> </body> @@ -20,10 +20,12 @@ ul li { padding: 4px; border: 1px solid #000; margin-top: -1px; - cursor: pointer; background: white; } -ul li:hover { +ul.playing li { + cursor: pointer; +} +ul.playing li:hover { background: gray; } ul li:first-child, ul li.ui-sortable-helper { @@ -44,4 +46,8 @@ ul li:first-child, ul li.ui-sortable-helper { } #target.success li { background: green; +} + +#go-button { + text-align: center; }
\ No newline at end of file |