https://www.tmurot.org.il/game/memory_game/memory_game.js

1var cardPositions = []; //an array of the cells of each card. is filled up on document load. [[cardID, column, row]]
2var mousePos = [0, 0];
3
4var isGame = false; // is there are game currently running
5var currentGame = null; //the object of the current chosen game
6var currentGameTime = 0;
7
8var isDoubleRandom = false;
9
10var scrollInterval = 10;
11var scrollLengthPerSecond = 1000; // the pixel amount to auto scroll with draggable per second
12var scrollLength = scrollLengthPerSecond / (1000 / scrollInterval);
13
14var isMobile = false; //is the browser mobile
15
16var textSizeOutOfCard = 0.26;
17
18var currentlyDragging = false; //is the user currently dragging a draggable card
19
20var mouseEdgeRange = 30; //the range of detection for the mouse being at the edge of the screen
21
22var noGameYet = true; //used to decide if needs to make updates, assuming the user has already changed them in a game
23
24var canDragAnswer = true; //determines if answer window draggable is enabled. true if the mouse is over the answer_bar
25
26$(function(){
27	updateTimer(0);
28	
29	// using the fastclick lib to solve click delay on mobile
30	$(function() {
31		FastClick.attach(document.body);
32	});
33});
34
35//will fire once user clicked on card
36var clickedOnCardDynamic = function() {
37	currentlyDragging = true;
38};
39
40//will fire once user clicked off card
41var clickedOffCardDynamic = function(){
42	currentlyDragging = false;
43	setCardDraggable(this);
44};
45
46function initialize(){
47	isMobile = checkIfMobile();
48	
49	if(isMobile){
50		$("#stylesheet").attr("href", "memory_game_mobile.css");
51		
52		//workaround to compensate for flexbox on devices that don't support it
53		if(document.createElement("p").style.flex == null)
54			$("#title").css("margin-top", "5%");
55	}else{
56		//setting answer window to be draggable on desktop
57		$("#answer_div").draggable();
58			
59		$("#answer_bar").hover(function(){
60			$("#answer_div").draggable('enable');
61		}, function(){
62			$("#answer_div").draggable('disable');
63		});
64	}
65	
66	unloadGame();
67	$("#timer").css("display", "none");
68	
69	$("#button_answer").css("display", "none");
70	$("#button_mode").css("display", "none");
71	$("#answer_div").css("display", "none");
72	
73	/*
74	for(var i=0; i<cellsToAddImagesTo.length; i++){
75		var cell = getCellByID(cellsToAddImagesTo[i][0]);
76		var card = $(cell).children();
77		$(card).css("background-image", "url("+cellsToAddImagesTo[i][1]+")");
78	}
79	*/
80	
81	document.onmousemove = function(e){
82		updateMousePos(e);
83	}
84	
85	// hiding all visible tree view categories, to start the tree view closed
86	$("#tree_view").children(".tree_view_category").each(hideCategory);
87	
88	// toggling (opening/closing) tree view category on mouse click event
89	$(".tree_view_category").click(toggleCategory);
90	
91	updateSizes();
92}
93
94// toglges (opens/closes) tree view category with animation
95var toggleCategory = function() {
96	// the list of the category to toggle
97	var ulToToggle = $(this).next(".tree_view_list");
98	
99	// continuing if found a list
100	if (ulToToggle.length == 1) {
101		// this category's drop down image
102		var dropDownImg = $(this).children('.tree_view_image');
103
104		// opening if list is hidden
105		if (ulToToggle.css("display") == "none") {
106			// hiding all of this category's sub-categories
107			ulToToggle.children(".tree_view_category").each(hideCategory);
108			
109			// rotating drop down image downwards
110			dropDownImg.css("transform", "rotate(-90deg)");
111			
112			// un-hiding the list with jquery animation
113			ulToToggle.slideDown();
114		} else {
115			// rotating drop down image sideways
116			dropDownImg.css("transform", "rotate(0deg)");
117		
118			// hiding the list with jquery animation
119			ulToToggle.slideUp();
120		}
121	}
122}
123
124// hides (closes) a tree view category
125var hideCategory = function() {
126	// rotating this category's drop down image sideways
127	var dropDownImg = $(this).children(".tree_view_image");
128	dropDownImg.css("transform", "rotate(0deg)");
129	
130	// hiding all the lists in the category
131	$(this).next(".tree_view_list").hide();
132}
133
134function updateMousePos(e){
135	mousePos[0] = e.pageX;
136	mousePos[1] = e.pageY;
137}
138
139function setCardPositionsAndDraggables(){
140	cardPositions = [];
141	
142	//setting up event for user clicking on card_dynamic object
143	var cardArray = getLoadedDynamicCards();
144
145	//for each card_dynamic object
146	for(var i=0;i<cardArray.length;i++){
147		var currentCard = cardArray[i];
148
149		//registering card_dynamic's cell in cardPositions
150		var cardID = getCardDynamicID(currentCard);
151		var cardCell = getCellID($(currentCard).parent());
152		cardPositions.push([cardID, cardCell[0], cardCell[1]]);
153		
154		//binding draggable and draggable events to card_dynamic object
155		$(currentCard).draggable({
156			disabled: isGame ? false : true,
157			containment: "#game_table",
158			start: clickedOnCardDynamic,
159			stop: clickedOffCardDynamic,
160			scroll: false
161		});
162	}
163}
164

165//clock used to autoscroll the window up/down when the mouse is near the top/bottom when dragging
166setInterval(function(){
167	if(currentlyDragging){
168		barHeight = $("#bar").height();
169		verticalScroll = window.scrollY;
170		windowInnerHeight = window.innerHeight
171		
172		if(mousePos[1] <= (verticalScroll + barHeight + mouseEdgeRange)){
173			window.scrollBy(0, -scrollLength);
174			mousePos[1] -= scrollLength;
175		}else if(mousePos[1] >= (windowInnerHeight + verticalScroll - mouseEdgeRange)){
176			window.scrollBy(0, scrollLength);
177			mousePos[1] += scrollLength;
178		}
179	}
180}, scrollInterval);
181
182function setCardIsDraggable(isDraggable){
183	var cardArray = getLoadedDynamicCards();
184
185	//for each card_dynamic object
186	for(var i=0;i<cardArray.length;i++){
187		$(cardArray[i]).draggable(
188			isDraggable ? "enable" : "disable"
189		);
190	}
191}
192
193//load a game
194function loadGame(gameID){
195	currentGame = loadGameHtml(gameID);
196	
197	resetCardPositions();
198	
199	if (isDoubleRandom)
200		randomizeStaticCards();
201
202	randomizeDynamicCards();
203
204	$("#answer_table").html(generateAnswerHtml(currentGame));
205	
206	//unloading the logo
207	$("#logo").css("display", "none");
208	
209	//loading the bar buttons
210	$("#button_game_start").css("display", "");
211	$("#button_game_choose").css("display", "");
212	$("#button_mode").css("display", "");
213	
214	//setting the tbody of the chosen game to be visible
215	$("#game_div").css("display", "");
216	
217	//set title text
218	$("#game_name").html(currentGame.name);
219	
220	//unloading the game select menu and title text
221	$("#tree_view_div").css("display", "none");
222	$("#title_text").css("display", "none");
223	$("#instructions").css("display", "none");
224	
225	noGameYet = true;
226	
227	updateSizes();
228	
229	$('body').scrollTop(0);
230}
231
232//unload current game
233function unloadGame(){
234	if(!isGame){
235		$("#game_div").css("display", "none");
236		
237		//loading the logo
238		$("#logo").css("display", "");
239		
240		//unloading the bar buttons and score
241		$("#button_game_start").css("display", "none");
242		$("#button_game_choose").css("display", "none");
243		$("#button_answer").css("display", "none");
244		$("#button_mode").css("display", "none");
245		closeAnswer();
246		unloadScore();
247		
248		//loading the game select menu and title text
249		$("#tree_view_div").css("display", "");
250		$("#title_text").css("display", "");
251		$("#instructions").css("display", "");
252		
253		currentGame = null;
254		
255		$('body').scrollTop(0);
256	}
257}
258
259function toggleMode() {
260	if (isDoubleRandom)
261		$("#button_mode").html("אקראיות כפולה");
262	else
263		$("#button_mode").html("אקראיות רגילה");
264	
265	isDoubleRandom = !isDoubleRandom;
266}
267
268//display the answer table, set its initial absolute position if browser isn't mobile
269function openAnswer(){
270	$("#answer_div").css("display", "");
271	
272	if(!isMobile) {
273		//centering the answer window for desktop
274		answerWidth = $("#answer_div").width();
275		viewportWidth = window.innerWidth;
276		viewportHeight = window.innerHeight;
277		
278		$("#answer_div").css("left", viewportWidth/2-answerWidth/2);
279		$("#answer_div").css("top", viewportHeight/100*2.5);
280	} else {
281		//hiding the main container (contains all main game elements)
282		$("#main_container").css("display", "none");
283		
284		$('body').scrollTop(0);
285	}
286}
287
288//hide the answer table
289function closeAnswer(){
290	$("#answer_div").css("display", "none");
291	
292	//shwoing the main container (contains all main game elements) if it was hidden
293	$("#main_container").css("display", "");
294}
295
296function checkIfCardIsLoaded(card){
297	var tbody = $(card).closest("Tbody");
298	
299	if(tbody)
300		return tbody.css("display") != "none";
301}
302
303//randomizing card_statics in current loaded game from an array
304function randomizeStaticCards(){
305	cards = getLoadedStaticCards();
306	
307	for (var i = cards.length - 1; i > 0; i--) {
308		var j = Math.floor(Math.random() * (i + 1));
309		
310		swapCardsInCells([i, 0], [j, 0]);
311	}
312}
313
314//randomizing card_dynamics in current loaded game from an array
315function randomizeDynamicCards() {
316	cards = getLoadedDynamicCards();
317	
318	for (var i = cards.length - 1; i > 0; i--) {
319		var j = Math.floor(Math.random() * (i + 1));
320		
321		swapCardsInCells([i, 2], [j, 2]);
322	}
323}
324
325//get all card_statics in the loaded game (tbody)
326function getLoadedStaticCards(){
327	return $("#game_tbody").find(".card_static");
328}
329
330//get all card_dynamics in the loaded game (tbody)
331function getLoadedDynamicCards(){
332	return $("#game_tbody").find(".card_dynamic");
333}
334
335//return all card_dynamics in current loaded game to cell 2
336function resetCardPositions(){
337	var dynamicCardsArray = getLoadedDynamicCards();
338	
339	for(var i=0; i<dynamicCardsArray.length; i++){
340		var currentCard = dynamicCardsArray[i];
341		
342		setCardInCell(currentCard, [getCardDynamicID(currentCard), 2]);
343	}
344}
345
346//workaround to be able to stop and restart gameClock from inside startGame
347var gameClock = setInterval(function(){}, 0);
348
349function startGame(){
350	if(currentGame != null){
351		if(!isGame){
352			isGame = true;
353			
354			currentGameTime = currentGame.time;
355			updateTimer(currentGameTime);
356			currentGameTime-=1;
357			
358			if(gameClock)
359				clearInterval(gameClock);
360			
361			gameClock = setInterval(function() {
362				updateTimer(currentGameTime);
363
364				if(currentGameTime>0 && isGame)
365					currentGameTime-=1;
366				else
367					clearInterval(gameClock);
368			}, 1000);
369			
370			if(!noGameYet){
371				resetCardPositions();
372				
373				if (isDoubleRandom)
374					randomizeStaticCards();
375				
376				randomizeDynamicCards();
377			}
378			
379			setCardPositionsAndDraggables();
380			setCardIsDraggable(true);
381			
382			if(noGameYet)
383				noGameYet = false;

384			
385			$("#button_game_start").html("סיימו");
386			$("#button_answer").css("display", "none");
387			$("#button_mode").css("display", "none");
388			$("#button_game_choose").css("display", "none");
389			$(".card_dynamic").addClass("unselectable");
390			$(".card_dynamic").addClass("card_hover");
391			$(".card_dynamic").css("cursor", "pointer");
392			closeAnswer();
393			unloadScore();
394			$("#timer").css("display", "");
395		}else{
396			stopGame();
397		}
398	}
399}
400
401function stopGame(){
402	if(isGame){
403		isGame = false;
404		currentGameTime = 0;
405		setCardIsDraggable(false);
406		
407		$("#button_game_start").html("התחילו");
408		$("#timer").css("display", "none");
409		$("#button_answer").css("display", "");
410		$("#button_mode").css("display", "");
411		$("#button_game_choose").css("display", "");
412		$(".card_dynamic").removeClass("unselectable");
413		$(".card_dynamic").removeClass("card_hover");
414		$(".card_dynamic").css("cursor", "auto");
415		
416		showScore(Math.round(checkScore()));
417	}
418}
419
420//displays score in score p
421function showScore(score){
422	if (!isMobile)
423		$("#score").html("תוצאה: " + score + "%");
424	else
425		$("#score").html(score + "%");
426}
427
428//clears text in score p
429function unloadScore(){
430	$("#score").html("");
431}
432
433//returns the precentage of cards in the correct place
434function checkScore() {
435	var cards = getLoadedDynamicCards();
436	
437	var correctPairs = 0;
438	
439	for (var i = 0; i < cards.length; i++) {
440		var cardStaticID = getCardStaticID(getCellByID([i, 0]).children());
441		var cardDynamicID = getCardDynamicID(getCellByID([i, 1]).children());
442		
443		if (cardDynamicID != null && cardStaticID == cardDynamicID)
444			correctPairs++;
445	}
446	
447	return correctPairs * (100 / cards.length);
448}
449
450$(window).resize(function(){
451	updateSizes();
452});
453
454function updateSizes(){
455	updateCardTextSize();
456	updateAnswerCardSize();
457}
458
459//changing text size to fit card size, only if the browser isnt mobile
460function updateCardTextSize(){
461	if(!isMobile){
462		//getting card height, only if there is a normal card (not card_image) and not an answer card
463		var cardHeight = null;
464		var cardArray = $(".card, .answer_table_text");
465		
466		for(var i=0;i<cardArray.length;i++){
467			var currentCard = cardArray[i];
468			if($(currentCard).hasClass("card") && !$(currentCard).hasClass("card_image") && checkIfCardIsLoaded(currentCard)){
469				cardHeight = $(currentCard).outerHeight();
470				break;
471			}
472		}
473		
474		//changing size if found normal card height
475		if(cardHeight != null){
476			var textHeight = textSizeOutOfCard*cardHeight;
477			
478			for(var i=0;i<cardArray.length;i++){
479				$(cardArray[i]).children().first().css("font-size", textHeight);
480			}
481		}
482	}
483}
484
485// changing size of answer cards to fit regular cards in not on mobile
486function updateAnswerCardSize() {
487	if (!isMobile) {
488		// updating answer card size if there's a loaded card
489		if ($("#card_cell_0_0").length) {
490			$(".answer_table_cell").css("width", $("#card_cell_0_0").width());
491			$(".answer_table_cell").css("height", $("#card_cell_0_0").height());
492		}
493	}
494}
495
496function updateTimer(value){
497	var timerString = "";
498	
499	var minutes = Math.floor(value/60.0);
500	var seconds = (value-(Math.floor(value/60.0)*60));
501	
502	var minutesText;
503	var secondsText;
504	
505	if(minutes <= 9)
506		minutesText = "0"+minutes;
507	else
508		minutesText = minutes;
509	
510	if(seconds <= 9)
511		secondsText = "0"+seconds;
512	else
513		secondsText = seconds;
514	
515	timerString+=minutesText+":"+secondsText;
516	
517	$("#timer").html(timerString);
518}
519
520//returns the number id of a card_dynamic object
521function getCardDynamicID(card){
522	if ($(card).attr("id"))
523		return $(card).attr("id").replace("card_dynamic_", "");
524	else
525		return null;
526}
527
528//returns the number id of a card_static object
529function getCardStaticID(card){
530	return $(card).attr("id").replace("card_static_", "");
531}
532
533//returns the [column, row] of a cell
534function getCellID(cell){
535	var id = $(cell).attr("id");
536	var numbers = (id.replace("card_cell_", "")).split('_'); //looks like [column, row]
537	
538	return numbers;
539}
540
541function getCellByID(cellID){
542	return $("#card_cell_"+cellID[0]+"_"+cellID[1]);
543}
544
545//setting the card to its appropriate position, swapping cards if needed
546function setCardDraggable(card){
547	var bestCellID = null;
548	var bestCellOverlappingPercentage = 0;
549	
550	var cells = $("#game_tbody").find('.card_cell_dragInto, .card_cell_dynamic');
551	
552	for(var i = 0; i < cells.length; i++){
553		if(checkIfPointIsInObject(mousePos, cells[i])){
554			bestCellID = getCellID(cells[i]);
555			break;
556		}
557	}
558	
559	//reset relative card pos shift
560	$(card).css("left", 0);
561	$(card).css("top", 0);
562	
563	//check if need to swap
564	var cardOriginalCellID = getCellID($(card).parent());
565	if(bestCellID != null && !checkIfEqualArrays(bestCellID, cardOriginalCellID)){
566		swapCardsInCells(bestCellID, cardOriginalCellID);
567		setCardPositionsAndDraggables();
568	}
569}
570
571//input: ([pointX, pointY], obj)
572function checkIfPointIsInObject(point, obj){
573	var objminXminY = [$(obj).offset().left, $(obj).offset().top];
574	var objmaxXmaxY = [objminXminY[0]+$(obj).width(), objminXminY[1]+$(obj).height()];
575	
576	return checkIfPointInBox(point, [objminXminY, objmaxXmaxY]);
577}
578
579//swap 2 cards by the cellIDs
580function swapCardsInCells(cell1ID, cell2ID){
581	var cell1 = getCellByID(cell1ID);
582	var cell2 = getCellByID(cell2ID);
583	
584	var card1 = cell1.children();
585	var card2 = cell2.children();
586
587    card1Content = card1.clone();
588    card2Content = card2.clone();
589
590    card1.replaceWith(card2Content);
591    card2.replaceWith(card1Content);
592}
593
594function setCardInCell(card, cellID){
595	var cell = getCellByID(cellID);
596	var cardContent = $(card).clone();
597	var cardToReplace = cell.children();
598	
599	cardToReplace.replaceWith(cardContent);
600	$(card).replaceWith('<div class="card card_placeholder">');
601}
602
603//input: ([pointx, pointy], [[boxMinX, boxMinY], [boxMaxX, boxMaxY]])
604function checkIfPointInBox(point, box){
605	return (
606		point[0] >= box[0][0] &&
607		point[0] <= box[1][0] &&
608		point[1] >= box[0][1] &&
609		point[1] <= box[1][1]
610	);
611}
612
613//input: ([point1X, point1Y], [point2X, point2Y])
614function getBoxPixelCount(point1, point2){
615	var width = Math.abs(point1[0]-point2[0]);
616	var height = Math.abs(point1[1]-point2[1]);
617	
618	return width*height;
619}
620
621function checkIfEqualArrays(arr1, arr2){
622    if(arr1.length !== arr2.length)
623        return false;

624    for(var i = arr1.length; i--;) {
625        if(arr1[i] !== arr2[i])
626            return false;
627    }
628
629    return true;
630}
631
632//checks if the browser is a mobile browser
633function checkIfMobile(){
634	if( navigator.userAgent.match(/Android/i) || //Android
635		navigator.userAgent.match(/BlackBerry/i) || //BlackBerry
636		navigator.userAgent.match(/iPhone|iPad|iPod/i) || //IOS
637		navigator.userAgent.match(/Opera Mini/i) || //Opera
638		navigator.userAgent.match(/IEMobile/i) || //Windows
639		navigator.userAgent.match(/WPDesktop/i) ) //Windows
640		return true;
641	else
642		return false;
643}