<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragAndDropGame.aspx.cs"
Inherits="DragAndDropGame" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
#sortable
{
background-color: red;
list-style-type: none;
margin: 0;
padding: 0;
width: 422px;
position: absolute;
top: 48px;
left: 59px;
height: 295px;
border-radius: 15px;
}
#sortable li
{
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
background-color: Olive;
border-radius: 15px;
}
#sortable:hover
{
background-color: Green;
}
#maindiv
{
position: absolute;
top: 196px;
left: 351px;
width: 539px;
height: 403px;
}
.style3
{
font-size: large;
}
.style4
{
color: #FF0066;
font-size: large;
}
.style5
{
font-family: Arial, Helvetica, sans-serif;
}
.style6
{
text-decoration: underline;
}
.style7
{
color: #FF0000;
}
.style8
{
font-family: "Arial Black";
}
</style>
<script type="text/javascript">
$(document).ready(function () {
timer1.innerHTML = 60;
$("#btn1").click(function () {
alert("Game Starts Now...!");
var count = timer1.innerHTML.toString();
debugger;
function timer() {
count--;
timer1.innerHTML = count.toString();
setTimeout(function () { timer() }, 1000);
}
$(function () {
timer();
$("#sortable").sortable();
$("#sortable").disableSelection();
});
var item = new Array();
setInterval(function () {
var check = $(function () {
var flag = 0;
var test = 12;
var result = 0;
$('.c2').each(function () {
$(this).find("li").each(function () {
flag++;
item[flag] = $(this).text();
if (item[flag] == test) {
result++;
}
else {
result = 0;
}
test--;
});
if (result > 11) {
alert("you win the game");
window.location.reload();
}
else {
alert("you loose the game\n Please Try Again.");
window.location.reload();
}
});
});
}, 60000);
});
});
</script>
</head>
<body>
<div>
<img src="http://wallpoper.com/images/00/42/25/63/numbers_00422563.jpg" style="height: 674px;
width: 1350px;" />
<div class="c1" id="maindiv"><span></span>
<span id="timer1" style="position: absolute; top: 12px; left: 236px; width: 54px;
font-size: x-large; color: #FF0000; text-decoration: underline;
background-color: #FFCCFF; border-radius:15px; text-align: center;"></span>
<span id="Span1" style="position: absolute; top: 11px; left: 283px; width: 172px;
height: 28px; font-size: x-large; color: #FF0000; text-decoration: underline;
background-color: #FFCCFF; border-radius:15px; text-align: center;">Secs Remaining.</span>
<ul class="c2" id="sortable">
<li class="style8"><strong style="color: #FF0000">1</strong></li>
<li><strong style="font-family: 'Arial Black'">2</strong></li>
<li><strong style="font-family: 'Arial Black'">3</strong></li>
<li class="style8"><strong>4</strong></li>
<li><strong style="font-family: 'Arial Black'">5</strong></li>
<li><strong style="font-family: 'Arial Black'">6</strong></li>
<li><strong style="font-family: 'Arial Black'">7</strong></li>
<li><strong style="font-family: 'Arial Black'">8</strong></li>
<li><strong style="font-family: 'Arial Black'">9</strong></li>
<li><strong style="font-family: 'Arial Black'">10</strong></li>
<li><strong style="font-family: 'Arial Black'">11</strong></li>
<li class="style7"><strong style="font-family: 'Arial Black'">12</strong></li>
</ul>
</div>
<div style="position: absolute; top: 36px; left: 26px; height: 98px; width: 194px;">
<strong><span class="style3">
<br />
</span></strong><span class="style4"><strong><em><span class="style5">Arrange the numbers
in reverse order with </span>
<br class="style5" />
</em></strong><span style="color: #FF0000" class="style5"><strong><em>
<span class="style6">1 Minute.</span></em></strong></span></span>
</div>
<input type="button" id="btn1" style="position: absolute; border-radius: 15px; top: 50px;
left: 242px; font-weight: 700; font-size: x-large; text-decoration: underline;
color: #FF0000; background-color: #002661; width: 275px; height: 50px; right: 436px;"
value="Click to Start the Game" />
</div>
</body>
</html>
No comments:
Post a Comment