Feeling bored?

Barand · 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'>&nbsp;</div>
    <div class='cell vert' id='1'>&nbsp;</div>
    <div class='cell vert' id='2'>&nbsp;</div>
    <div class='cell vert' id='3'>&nbsp;</div>
    <div class='cell vert' id='4'>&nbsp;</div>
    
    <div class='cell vert' id='5'>&nbsp;</div>
    <div class='cell vert' id='6'>&nbsp;</div>
    <div class='cell invert' id='7'>&nbsp;</div>
    <div class='cell vert' id='8'>&nbsp;</div>
    <div class='cell vert' id='9'>&nbsp;</div>
    
    <div class='cell vert' id='10'>&nbsp;</div>
    <div class='cell invert' id='11'>&nbsp;</div>
    <div class='cell invert' id='12'>&nbsp;</div>
    <div class='cell invert' id='13'>&nbsp;</div>
    <div class='cell vert' id='14'>&nbsp;</div>
    
    <div class='cell vert' id='15'>&nbsp;</div>
    <div class='cell vert' id='16'>&nbsp;</div>
    <div class='cell invert' id='17'>&nbsp;</div>
    <div class='cell vert' id='18'>&nbsp;</div>
    <div class='cell vert' id='19'>&nbsp;</div>
    
    <div class='cell vert' id='20'>&nbsp;</div>
    <div class='cell vert' id='21'>&nbsp;</div>
    <div class='cell vert' id='22'>&nbsp;</div>
    <div class='cell vert' id='23'>&nbsp;</div>
    <div class='cell vert' id='24'>&nbsp;</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>

Sign In

Feeling bored?

Recommended Posts

Barand

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information