$(function () {
$.timer = function (func, time, autostart) {
this.set = function (func, time, autostart) {
this.init = true;
if (typeof func == 'object') {
var paramList = ['autostart', 'time'];
for (var arg in paramList) { if (func[paramList[arg]] != undefined) { eval(paramList[arg] + " = func[paramList[arg]]"); } };
func = func.action;
}
if (typeof func == 'function') { this.action = func; }
if (!isNaN(time)) { this.intervalTime = time; }
if (autostart && !this.active) {
this.active = true;
this.setTimer();
}
return this;
};
this.once = function (time) {
var timer = this;
if (isNaN(time)) { time = 0; }
window.setTimeout(function () { timer.action(); }, time);
return this;
};
this.play = function (reset) {
if (!this.active) {
if (reset) { this.setTimer(); }
else { this.setTimer(this.remaining); }
this.active = true;
}
return this;
};
this.pause = function () {
if (this.active) {
this.active = false;
this.remaining -= new Date() - this.last;
this.clearTimer();
}
return this;
};
this.stop = function () {
this.active = false;
this.remaining = this.intervalTime;
this.clearTimer();
return this;
};
this.toggle = function (reset) {
if (this.active) { this.pause(); }
else if (reset) { this.play(true); }
else { this.play(); }
return this;
};
this.reset = function () {
this.active = false;
this.play(true);
return this;
};
this.clearTimer = function () {
window.clearTimeout(this.timeoutObject);
};
this.setTimer = function (time) {
var timer = this;
if (typeof this.action != 'function') { return; }
if (isNaN(time)) { time = this.intervalTime; }
this.remaining = time;
this.last = new Date();
this.clearTimer();
this.timeoutObject = window.setTimeout(function () { timer.go(); }, time);
};
this.go = function () {
if (this.active) {
this.action();
this.setTimer();
}
};
if (this.init) {
return new $.timer(func, time, autostart);
} else {
this.set(func, time, autostart);
return this;
}
};
function pad(number, length) {
var str = '' + number;
while (str.length < length) { str = '0' + str; }
return str;
}
function formatTime(time) {
time = time / 10;
var min = parseInt(time / 6000),
sec = parseInt(time / 100) - (min * 60),
hundredths = pad(time - (sec * 100) - (min * 6000), 2);
return (min > 0 ? pad(min, 2) : "00") + ":" + pad(sec, 2) + ":" + hundredths;
}
(function ($) {
var Memory = {
init: function (cards) {
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards);
this.shuffleCards(this.cardsArray);
this.setup();
},
shuffleCards: function (cardsArray) {
this.$cards = $(this.shuffle(this.cardsArray));
},
setup: function () {
this.html = this.buildHTML();
this.$game.html(this.html);
this.$memoryCards = $(".card");
this.binding();
this.paused = false;
this.guess = null;
this.showModal();
},
binding: function () {
var self = this;
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
$('.play-btn').on("click", function () {
self.$overlay.hide();
self.$modal.hide();
self.startTimer();
});
},
startTimer: function Stopwatch () {
// Stopwatch element on the page
var $stopwatch;
// Timer speed in milliseconds
var incrementTime = 70;
// Current timer position in milliseconds
var currentTime = 0;
$(function () {
$stopwatch = $('#stopwatch');
Stopwatch.Timer = $.timer(updateTimer, incrementTime, true);
});
// Output time and increment
function updateTimer() {
var timeString = formatTime(currentTime);
$stopwatch.html(timeString);
currentTime += incrementTime;
}
// Reset timer
this.resetStopwatch = function () {
currentTime = 0;
Stopwatch.Timer.stop().once();
};
},
// kinda messy but hey
cardClicked: function () {
var _ = Memory;
var $card = $(this);
if (!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")) {
$card.find(".inside").addClass("picked");
if (!_.guess) {
_.guess = $(this).attr("data-id");
} else if (_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")) {
$(".picked").addClass("matched");
_.guess = null;
} else {
_.guess = null;
_.paused = true;
setTimeout(function () {
$(".picked").removeClass("picked");
Memory.paused = false;
}, 600);
}
if ($(".matched").length == $(".card").length) {
_.win();
}
}
},
win: function () {
this.paused = true;
var timeWon = $('#stopwatch').html();
console.log(timeWon);
$('#TimeTaken').val(timeWon);
$('#GameWon').val(true);
setTimeout(function () {
$('form').submit();
}, 1000); //y u no werk??????
},
showModal: function () {
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function () {
this.$overlay.hide();
this.$modal.hide();
},
reset: function () {
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
shuffle: function (array) {
var counter = array.length, temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
buildHTML: function () {
var frag = '';
var randomBack = 1 + Math.floor(Math.random() * 3);
this.$cards.each(function (k, v) {
frag += '<div class="card" data-id="' + v.id + '"><div class="inside">\
<div class="front"><img src="'+ v.img + '"\
alt="'+ v.name + '" /></div>\
<div class="back"><img src="/Content/mobile/images/card-unflipped' + randomBack + '.png"\
alt="Unflipped" /></div></div>\
</div>';
});
return frag;
}
};
var cards = [
{
name: "dolphins",
img: "/Content/mobile/images/cards/dolphins.gif",
id: 1
},
{
name: "fire-dancer",
img: "/Content/mobile/images/cards/fire-dancer.gif",
id: 2
},
{
name: "flower",
img: "/Content/mobile/images/cards/flower.gif",
id: 3
},
{
name: "hula",
img: "/Content/mobile/images/cards/hula.gif",
id: 4
},
{
name: "package",
img: "/Content/mobile/images/cards/package.gif",
id: 5
},
{
name: "surfer",
img: "/Content/mobile/images/cards/surfer.gif",
id: 6
}
];
var cards2 = [
{
name: "surfer",
img: "/Content/mobile/images/cards/surfer.gif",
id: 1,
},
{
name: "package",
img: "/Content/mobile/images/cards/package.gif",
id: 2
},
{
name: "swimming",
img: "/Content/mobile/images/cards/swimming.gif",
id: 3
},
{
name: "turtle",
img: "/Content/mobile/images/cards/turtle.gif",
id: 4
},
{
name: "waterfall",
img: "/Content/mobile/images/cards/waterfall.gif",
id: 5
},
{
name: "wind-surfer",
img: "/Content/mobile/images/cards/wind-surfer.gif",
id: 6
}
];
var randomNum = 1 + Math.floor(Math.random() * 2);
if (randomNum < 2) {
Memory.init(cards);
} else {
Memory.init(cards2);
}
//console.log(randomNum);
})(jQuery);
});
Memory game with a timer attached.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.