Barand Posted June 24, 2018 Share Posted June 24, 2018 Here's a simple puzzle for you to pass away a few minutes. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Lang" content="en"> <meta name="author" content="Barand"> <meta name="generator" content="PhpED 18.0"> <meta name="description" content="5x5 puzzle"> <meta name="keywords" content="Five by five, 5x5, puzzle"> <meta name="creation-date" content="09/06/2018"> <title>Five by Five</title> <style type="text/css"> body { font-family: verdana; } #title { background-color: #000; color: #FFF; padding: 15px; text-align: center; font-family: verdana; font-size: 25px; } #wrapper { width: 310px; margin-top: 50px; margin-left: auto; margin-right: auto; text-align: center; } .cell { width:60px; height: 60px; float: left; border: 1px solid #888; } .vert { background-color: #000; } .invert { background-color: #FFF; } .timedout { background-color: #F00; } .solved { background-color: #0F0; } #timer { float: right; height: 20px; display: inline; width: 40%; text-align: right; } #counter { width: 40%; height: 20px; float: left; display: inline; text-align: left; } #btnReset { margin-top: 10px; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var clicks=0 var cumtime=0 var interval var timelimit = 180 function invertCell(cid) { var c = $("#"+cid); if (c.hasClass("vert")) { c.removeClass("vert"); c.addClass("invert"); } else { c.removeClass("invert"); c.addClass("vert"); } } function tickTock() { var t="" cumtime++ if (cumtime >= timelimit) { clearInterval(interval) $(".cell").addClass("timedout") } if (cumtime>=60) { m = parseInt(cumtime/60) s = cumtime % 60 if (s < 10) s = "0"+s t = m +":"+s } else { t = cumtime + " seconds" } $("#timer").html(t) } function startClock() { clearInterval(interval) interval = setInterval("tickTock()", 1000) } function checkComplete() { res = 1 $(".cell").each( function(k,e) { if ($(e).hasClass("vert")) { res = 0 } }) return res; } $().ready( function() { startClock() $("#counter").html("Clicks: "+clicks) $(".cell").click( function() { if (cumtime >= timelimit) return var i = parseInt($(this).prop("id")); invertCell(i); if (i%5 != 0) invertCell(i-1) if (i%5 != 4) invertCell(i+1) invertCell(i-5) invertCell(i+5) clicks++ $("#counter").html("Clicks: "+clicks) if (checkComplete()) { $(".cell").addClass("solved") clearInterval(interval) } }) $("#btnReset").click( function() { $(".cell").removeClass("timedout") $(".cell").removeClass("solved") $(".cell").removeClass("invert") $(".cell").addClass("vert") invertCell(7) invertCell(11) invertCell(12) invertCell(13) invertCell(17) clicks=0 cumtime=0 startClock() $("#counter").html("Clicks: "+clicks) }) }) </script> </head> <body> <div id='title'>Five By Five</div> <div id='wrapper'> <div> <div id='timer'></div> <div id='counter'></div> <div style="clear:both"></div> </div> <div class='cell vert' id='0'> </div> <div class='cell vert' id='1'> </div> <div class='cell vert' id='2'> </div> <div class='cell vert' id='3'> </div> <div class='cell vert' id='4'> </div> <div class='cell vert' id='5'> </div> <div class='cell vert' id='6'> </div> <div class='cell invert' id='7'> </div> <div class='cell vert' id='8'> </div> <div class='cell vert' id='9'> </div> <div class='cell vert' id='10'> </div> <div class='cell invert' id='11'> </div> <div class='cell invert' id='12'> </div> <div class='cell invert' id='13'> </div> <div class='cell vert' id='14'> </div> <div class='cell vert' id='15'> </div> <div class='cell vert' id='16'> </div> <div class='cell invert' id='17'> </div> <div class='cell vert' id='18'> </div> <div class='cell vert' id='19'> </div> <div class='cell vert' id='20'> </div> <div class='cell vert' id='21'> </div> <div class='cell vert' id='22'> </div> <div class='cell vert' id='23'> </div> <div class='cell vert' id='24'> </div> <div style="clear:both"></div> <p> Your mission, should you accept,<br>is to clear the black cells </p> <button id='btnReset'>Reset</button> </div> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.