/* TILES GAME CREATED BY: VITRUVIAN APRIL 28, 2018 */ var colors = ["grey","yellow","purple","red","l_green","blue","l_blue","orange","green"]; var directions = ["panright","panleft","panup","pandown"]; var winner_array = [ 0,0,1,1,2,2,0,0,1,1,2,2, 3,3,4,4,5,5,3,3,4,4,5,5, 6,6,7,7,8,8,6,6,7,7,8,8 ]; var isDragging = false; var t,mc,clientX,clientY; var e_left,e_top; var playing = false; var n_shuffles; var moves; $(document).ready(function() { e_left = $("#tiles_div").offset().left; e_top = $("#tiles_div").offset().top; $("body").on("click","#menu",function() { menu_class = $("#menu").attr("class"); if (menu_class==="") { $("#menu").addClass("active"); $("#options").show(); $("#options").animate({ "opacity":"1", "height":"360px" },{ duration:(500), easing:"linear", complete: function() { } }); } else { $("#menu").removeClass("active"); $("#options").animate({ "opacity":"0", "height":"0px" },{ duration:(500), easing:"linear", complete: function() { $("#options").hide(); } }); } }); $("body").on("click",".btn",function() { playing = false; fill(); $("#winner").hide(); $("#moves").hide(); $("#menu").removeClass("active"); $("#options").animate({ "opacity":"0", "height":"0px" },{ duration:(500), easing:"linear", complete: function() { $("#options").hide(); } }); id = ($(this).attr("id")).substr(2); switch (id) { case "easy": n_shuffles = 10; break; case "medium": n_shuffles = 20; break; case "hard": n_shuffles = 30; break; } setTimeout(shuffle,600); }); $("body").on("mousedown","#tiles_div",function(ev) { clientX = ev.originalEvent.clientX; clientY = ev.originalEvent.clientY; }); $("body").on("touchstart","#tiles_div",function(ev) { clientX = parseInt(ev.touches[0].clientX); clientY = parseInt(ev.touches[0].clientY); }); t = document.getElementById("tiles_div"); mc = new Hammer(t,{ direction:Hammer.DIRECTION_ALL, threshold:30 }); mc.get('pan').set({ direction: Hammer.DIRECTION_ALL }); mc.on("panright panleft panup pandown",function(ev) { type = ev.type; isFinal = ev.isFinal; if (playing) { pan(type,isFinal); } }); fill(); }); function shuffle() { colrow = Math.floor(Math.random()*6)*60; clientX = colrow+e_left; clientY = colrow+e_top; direction = directions[Math.floor(Math.random()*4)]; pan(direction,true); n_shuffles--; if (n_shuffles>0) { setTimeout(shuffle,300); } else { $("#moves span").html("0"); $("#moves").show(); playing = true; } } function pan(type,isFinal) { if (!isDragging) { isDragging = true; moves = parseInt($("#moves span").html())+1; $("#moves span").html(moves); var tile_left = parseInt((clientX-e_left)/60)*60; var tile_top = parseInt((clientY-e_top)/60)*60; switch (type) { case "panright": max_left = 0; max_id = ""; $(".tiles").each(function() { this_top = parseInt($(this).css("top")); if (this_top==tile_top) { this_left = parseInt($(this).css("left")); if (this_left>max_left) { max_id = $(this).attr("id"); max_left = this_left; } } }); $("#"+max_id).clone().attr('id',uniqueId()).css("left","-60px").appendTo("#tiles"); moves = ""; $(".tiles").each(function() { this_top = parseInt($(this).css("top")); if (this_top==tile_top) { moves += (moves===""?"":",")+"#"+$(this).attr("id"); } }); move(moves,{"left":"+=60px"},max_id); break; case "panleft": min_left = 1000; min_id = ""; $(".tiles").each(function() { this_top = parseInt($(this).css("top")); if (this_top==tile_top) { this_left = parseInt($(this).css("left")); if (this_leftmax_top) { max_id = $(this).attr("id"); max_top = this_top; } } }); $("#"+max_id).clone().attr('id',uniqueId()).css("top","-60px").appendTo("#tiles"); moves = ""; $(".tiles").each(function() { this_left = parseInt($(this).css("left")); if (this_left==tile_left) { moves += (moves===""?"":",")+"#"+$(this).attr("id"); } }); move(moves,{"top":"+=60px"},max_id); break; } } if (isFinal) { isDragging = false; } } function move(moves,json,delete_id) { $(moves).animate(json,{ duration:(150), easing:"linear", complete: function() { } }).promise().done(function() { $("#"+delete_id).remove(); if (playing) { verify(); } }); } function verify() { var current_array = []; for (var i=0;i<36;i++) current_array.push(-1); $(".tiles").each(function() { this_top = parseInt($(this).css("top")); this_left = parseInt($(this).css("left")); this_class = $(this).attr("class"); this_class = this_class.replace("tiles ",""); this_class = colors.indexOf(this_class); array_pos = this_left/60 + (this_top/60)*6; current_array[array_pos] = this_class; }); if (current_array.join("")==winner_array.join("")) { ret = true; playing = false; $("#winner").show(); } else { ret = false; } } function fill() { $(".tiles").remove(); var c = 0; var top = 0; for (var i=0;i<3;i++) { var left = 0; for (var j=0;j<3;j++) { color = colors[c]; html = "

"; html += "

"; left += 60; html += "

"; html += "

"; left += 60; $("#tiles").prepend(html); c++; } top += 120; } } var uniqueId = function() { return "id_"+Math.random().toString(36).substr(2,16); };

Tiles Game