<!DOCTYPE html>
<html>
<head>
<title>Find INDIA Game - Sibeesh Passion</title>
<script
src="https://code.jquery.com/jquery-2.0.2.min.js"
integrity="sha256-TZWGoHXwgqBP1AF4SZxHIBKzUdtMGk0hCQegiR99itk="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<style>
#body {
background: url("http://sibeeshpassion.com/content/images/indian%20flag%20banner.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.dropDiv {
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 10px;
display: inline;
position: absolute;
margin-left: 5px;
min-height: 265px;
}
.dragDiv {
border: 1px solid #ccc;
width: 27%;
height: auto;
padding: 10px;
float: left;
margin-left: 5px;
min-height: 265px;
}
#parent {
/*border: 1px solid #ccc;*/
height: 307px;
width: 70%;
padding: 20px;
}
.droppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: green;
margin: 3px;
float: left;
cursor: move;
}
.Notdroppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: red;
margin: 3px;
float: left;
}
#countdiv {
margin-top: 10px;
float: left;
}
#gamerules {
border: 1px solid #ccc;
width: 250px;
height: 280px;
padding: 5px;
float: right;
margin-left: 5px;
}
.caption {
list-style: none;
color: green;
padding: 5px;
font-weight: bold;
}
#gameSettings {
width: auto;
}
</style>
<script>
var count = 0;
var maxTrial = 25;
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
$(function () {
$(document).on("contextmenu", function (e) {
return false;
});
var parent = $("#dragDivInner");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
$("#selectGameLevel").change(function (e) {
var selected = $("#selectGameLevel option:selected").val();
if (selected == "Easy") {
maxTrial = 25;
} else if (selected == "Medium") {
maxTrial = 15;
} else if (selected == "Hard") {
maxTrial = 10;
}
});
$('.Notdroppable,.droppable').draggable({
connectToSortable: '.dropDiv',
containment: "#dropDiv",
helper: 'clone',
revert: 'invalid'
});
$(".dropDiv").sortable({
connectWith: '.dropDiv',
forcePlaceholderSize: true,
forceHelperSize: true,
opacity: 0.60,
placeholder: 'placeholder',
tolerance: 'touch',
scroll: false,
cancel: '.dropDiv',
start: function (event, ui) {
if (count > maxTrial) {
$('#countdiv').show().html('Sorry, you have no more chances left!!!. Please refresh to start the game again');
} else {
}
},
stop: function (event, ui) {
++count;
if (ui.item.attr('myval')) {
$('#draggedContent').show().append(ui.item.attr('myval'));
}
$(".dragDiv div[myid=" + ui.item.attr('myid') + "]").remove();
var res = maxTrial - count;
if (res == 0) {
$('#countdiv').show().html('Sorry, you have no more chances left!!!. Please refresh to start the game again');
$('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
} else {
$('#countdiv').show().html('You still have ' + res + ' tries');
}
$('.dropDiv .droppable, .dropDiv .Notdroppable').remove();
if ($('#draggedContent').html().length == 5) {
alert('You have won the game!!!. Please collect the prize from somewhere ;)');
$('#countdiv').show().html('You have won the game!!!. Please collect the prize from somewhere ;)!. Please refresh to start the game again');
$('.dragDiv .droppable, .dragDiv .Notdroppable').remove();
}
},
update: function (event, ui) {
},
receive: function (event, ui) {
}
});
});
</script>
</head>
<body id="body">
<div id="gameSettings">
<br />
Select Game Level :
<select id="selectGameLevel">
<option value="Easy">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
</select>
</div>
<div id="parent" style="float: left;">
<div class="dragDiv">
<div id="dragDivInner">
<div myid="1" class="droppable" myval="I"></div>
<div myid="2" class="droppable"></div>
<div myid="3" class="Notdroppable"></div>
<div myid="6" class="droppable"></div>
<div myid="7" class="droppable"></div>
<div myid="8" class="Notdroppable"></div>
<div myid="9" class="droppable" myval="N"></div>
<div myid="10" class="Notdroppable"></div>
<div myid="11" class="droppable"></div>
<div myid="12" class="droppable"></div>
<div myid="17" class="droppable"></div>
<div myid="18" class="Notdroppable"></div>
<div myid="19" class="droppable"></div>
<div myid="20" class="Notdroppable" myval="A"></div>
<div myid="21" class="droppable"></div>
<div myid="22" class="droppable"></div>
<div myid="23" class="Notdroppable"></div>
<div myid="24" class="droppable"></div>
<div myid="25" class="Notdroppable" myval="I"></div>
<div myid="26" class="droppable"></div>
<div myid="27" class="droppable"></div>
<div myid="28" class="Notdroppable"></div>
<div myid="29" class="droppable"></div>
<div myid="30" class="Notdroppable"></div>
<div myid="31" class="Notdroppable" myval="D"></div>
<div myid="32" class="droppable"></div>
<div myid="33" class="droppable"></div>
<div myid="34" class="Notdroppable"></div>
<div myid="35" class="droppable"></div>
<div myid="40" class="Notdroppable"></div>
</div>
<div id="countdiv" style="display: none;"></div>
</div>
<div class="dropDiv">
<div id="draggedContent" style="display: none;"></div>
</div>
<div id="gamerules">
<ul>
<li class="caption">Find "INDIA" Game Rules </li>
<li>You can drag and drop any boxes. </li>
<li>We have set each letters from "INDIA" in the boxes. It is hidden</li>
<li>The game is, you need to find out the letters of "INDIA" by drag and drop the boxes to nearest box</li>
<li>Let us play the game now...</li>
</ul>
</div>
</div>
</body>
</html>