539 lines
9.6 KiB
HTML
539 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>The Bunnies, Inc. </title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
|
<link rel="icon" type="image/png" href="assets/icon.png" />
|
|
<meta name="author" content="ambc">
|
|
<style type="text/css">
|
|
@import url(http://fonts.googleapis.com/css?family=Londrina+Solid|Londrina+Shadow);
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
font-family: "Londrina Solid";
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
body {
|
|
background-color: #aaa;
|
|
color: #eee;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
}
|
|
#map_canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#dpf, #dpb, #dpl, #dpr {
|
|
width: 50px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 20px;
|
|
border: 1px solid #999;
|
|
border-radius: 10px;
|
|
background-color: #bbb;
|
|
color: #333;
|
|
opacity: 0.8;
|
|
z-index: 3;
|
|
}
|
|
#dpf:active, #dpb:active, #dpl:active, #dpr:active {
|
|
background-color: #aaa;
|
|
border: 1px solid #888;
|
|
}
|
|
#dpf {
|
|
position: absolute;
|
|
bottom: 130px;
|
|
right: 60px;
|
|
}
|
|
#dpb {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 60px;
|
|
}
|
|
#dpl {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
right: 110px;
|
|
}
|
|
#dpr {
|
|
position: absolute;
|
|
bottom: 80px;
|
|
right: 10px;
|
|
}
|
|
|
|
#bar {
|
|
background-color: rgba(0, 0, 0, 0.0);
|
|
z-index: 1;
|
|
color: #eee;
|
|
padding: 10px 0px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
vertical-align: middle;
|
|
border: 1px solid rgba(0, 0, 0, 0.0);
|
|
}
|
|
#you {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#menu, #tgpm {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 6;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
#menu h1 {
|
|
font-family: "Londrina Shadow";
|
|
padding: 30px 10px;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
word-spacing: 20px;
|
|
background: transparent url("assets/the-bunnies.png") center center no-repeat;
|
|
background-size: 250px 40px;
|
|
color: transparent;
|
|
}
|
|
h1 {
|
|
font-family: "Londrina Shadow";
|
|
padding: 30px 10px;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.btn {
|
|
color: #fff;
|
|
padding: 5px 10px;
|
|
margin: 10px auto;
|
|
box-shadow: -5px -5px 1px rgba(255, 255, 255, 0.25);
|
|
border: 1px dashed #fff;
|
|
font-size: 20px;
|
|
display: block;
|
|
width: 200px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
text-decoration: none;
|
|
}
|
|
.btn:hover {
|
|
box-shadow: -3px -3px 1px rgba(255, 255, 255, 0.25);
|
|
position: relative;
|
|
top: -2px;
|
|
left: -2px;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
#dir {
|
|
width: 2px;
|
|
height: 100px;
|
|
background-color: #fff;
|
|
}
|
|
#dirh {
|
|
width: 2px;
|
|
height: 200px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 2;
|
|
margin: -100px 0 0 -1px;
|
|
transform: rotate(0deg);
|
|
}
|
|
#tgp {
|
|
margin: 0;
|
|
width: auto;
|
|
padding: 10px 5px;
|
|
z-index: 4;
|
|
line-height: 20px;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
font-size: 20px;
|
|
display: none;
|
|
/* box-shadow: -5px 5px 1px rgba(255, 255, 255, 0.25); */
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
background: transparent url("assets/pauseplay.png") no-repeat right top;
|
|
width: 42px;
|
|
background-size: 42px 84px;
|
|
color: transparent;
|
|
}
|
|
#tgp:hover {
|
|
/* box-shadow: -3px 3px 1px rgba(255, 255, 255, 0.25); */
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 2px;
|
|
}
|
|
#tgpm {
|
|
display: none;
|
|
}
|
|
h1 sup {
|
|
font-size: 13px;
|
|
line-height: 13px;
|
|
font-weight: 400;
|
|
color: red;
|
|
}
|
|
#sec {
|
|
float: center;
|
|
display: inline-block;
|
|
}
|
|
#kills {
|
|
float: left;
|
|
display: inline-block;
|
|
margin-left: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="tgp">Pause</div>
|
|
|
|
<div id="bar"><div id="sec"></div><div id="kills"></div></div>
|
|
<div id="dirh"><div id="dir"> </div></div>
|
|
<div id="tgpm"><h1>Paused</h1><div id="cont" class="btn">▶ Continue playing</div></div>
|
|
<div id="menu">
|
|
<h1>The Bunnies, Inc. <sup>ALPHA</sup></h1>
|
|
<div id="play" class="btn" onClick="getready();">Play</div>
|
|
<div id="high" class="btn" onClick="alert('The bunnies have not made this work yet! ');">Highscores</div>
|
|
<!-- <div id="about" class="btn" onClick="alert('The bunnies have not made this work yet! ');">About</div> -->
|
|
<a class="btn" href="http://ambrosechua.github.com/thebunniesinc">About</a>
|
|
</div>
|
|
|
|
<canvas id="you"><h1>Aww, snap! </h1><p>Please use a updated browser to play. </p></canvas>
|
|
|
|
<div id="map_canvas"></div>
|
|
|
|
<div id="dpf">▲</div>
|
|
<div id="dpb">▼</div>
|
|
<div id="dpl">◀</div>
|
|
<div id="dpr">▶</div>
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTw2l8fjcXamgL0HasFr0CLPe54qFl_AA&sensor=true">
|
|
</script>
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
|
|
</script>
|
|
<script type="text/javascript">
|
|
|
|
pos = new google.maps.LatLng(1.312548, 103.825548);
|
|
var mapOptions = {
|
|
center: pos,
|
|
zoom: 18,
|
|
disableDefaultUI: true,
|
|
draggable: false,
|
|
scrollwheel: false,
|
|
disableDoubleClickZoom: true,
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
};
|
|
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
step=3;
|
|
stti=10;
|
|
interf=0;
|
|
interb=0;
|
|
interl=0;
|
|
interr=0;
|
|
|
|
function angle(x, y, bx, by) {
|
|
return Math.atan2(bx-x, by-y)/Math.PI*-180;
|
|
}
|
|
|
|
function dpf() {
|
|
map.panBy(0, -step);
|
|
}
|
|
function dpb() {
|
|
map.panBy(0, step);
|
|
}
|
|
function dpl() {
|
|
map.panBy(-step, 0);
|
|
}
|
|
function dpr() {
|
|
map.panBy(step, 0);
|
|
}
|
|
function setin(dir) {
|
|
//functorun=functor;
|
|
//functorun();
|
|
if (dir==0 && !interf) {
|
|
interf=setInterval(function() {
|
|
dpf();
|
|
}, stti);
|
|
}
|
|
if (dir==1 && !interb) {
|
|
interb=setInterval(function() {
|
|
dpb();
|
|
}, stti);
|
|
}
|
|
if (dir==2 && !interl) {
|
|
interl=setInterval(function() {
|
|
dpl();
|
|
}, stti);
|
|
}
|
|
if (dir==3 && !interr) {
|
|
interr=setInterval(function() {
|
|
dpr();
|
|
}, stti);
|
|
}
|
|
}
|
|
function clrin(dir) {
|
|
if (dir==0) {
|
|
clearInterval(interf);
|
|
interf=0;
|
|
}
|
|
if (dir==1) {
|
|
clearInterval(interb);
|
|
interb=0;
|
|
}
|
|
if (dir==2) {
|
|
clearInterval(interl);
|
|
interl=0;
|
|
}
|
|
if (dir==3) {
|
|
clearInterval(interr);
|
|
interr=0;
|
|
}
|
|
}
|
|
|
|
if (!(("ontouchstart" in window) || ("onmsgesturechange" in window))) {
|
|
$("#dpf, #dpb, #dpl, #dpr").css("display", "none");
|
|
}
|
|
|
|
//stackoverflow
|
|
function getPosition(e) {
|
|
var targ;
|
|
if (!e)
|
|
e = window.event;
|
|
if (e.target)
|
|
targ = e.target;
|
|
else if (e.srcElement)
|
|
targ = e.srcElement;
|
|
if (targ.nodeType == 3)
|
|
targ = targ.parentNode;
|
|
var x = e.pageX - $(targ).offset().left;
|
|
var y = e.pageY - $(targ).offset().top;
|
|
$("#dirh").css("transform", "rotate("+angle(x, y, $("#you").width()/2, $("#you").height()/2)+"deg)");
|
|
|
|
}
|
|
|
|
function start() {
|
|
|
|
$("#tgpm").fadeOut();
|
|
|
|
counter=setInterval(function() {
|
|
timenow=new Date().getTime();
|
|
sec=timenow-timebefore;
|
|
$("#sec").html(sec+"ms");
|
|
}, 1);
|
|
|
|
|
|
$("#you").on("mousedown", function(event) {
|
|
getPosition(event);
|
|
});
|
|
$("#you").on("mousemove", function(event) {
|
|
getPosition(event);
|
|
});
|
|
$("#you").on("mouseup", function(event) {
|
|
getPosition(event);
|
|
});
|
|
|
|
|
|
if (("ontouchstart" in window) || ("onmsgesturechange" in window)) {
|
|
$("#dpf").on("touchstart", function() {
|
|
setin(0);
|
|
});
|
|
$("#dpb").on("touchstart", function() {
|
|
setin(1);
|
|
});
|
|
$("#dpl").on("touchstart", function() {
|
|
setin(2);
|
|
});
|
|
$("#dpr").on("touchstart", function() {
|
|
setin(3);
|
|
});
|
|
$("#dpf").on("touchend", function() {
|
|
clrin(0);
|
|
});
|
|
$("#dpb").on("touchend", function() {
|
|
clrin(1);
|
|
});
|
|
$("#dpl").on("touchend", function() {
|
|
clrin(2);
|
|
});
|
|
$("#dpr").on("touchend", function() {
|
|
clrin(3);
|
|
});
|
|
}
|
|
else {
|
|
|
|
$("#dpf").on("mousedown", function() {
|
|
setin(0);
|
|
});
|
|
$("#dpb").on("mousedown", function() {
|
|
setin(1);
|
|
});
|
|
$("#dpl").on("mousedown", function() {
|
|
setin(2);
|
|
});
|
|
$("#dpr").on("mousedown", function() {
|
|
setin(3);
|
|
});
|
|
$("#dpf").on("mouseup", function() {
|
|
clrin(0);
|
|
});
|
|
$("#dpb").on("mouseup", function() {
|
|
clrin(1);
|
|
});
|
|
$("#dpl").on("mouseup", function() {
|
|
clrin(2);
|
|
});
|
|
$("#dpr").on("mouseup", function() {
|
|
clrin(3);
|
|
});
|
|
}
|
|
|
|
$(document).off("keydown");
|
|
|
|
wasdown=0;
|
|
$(document).on("keydown", function(eve) {
|
|
w=eve.which;
|
|
if (w==87) {
|
|
setin(0);
|
|
}
|
|
else if (w==83) {
|
|
setin(1);
|
|
}
|
|
else if (w==65) {
|
|
setin(2);
|
|
}
|
|
else if (w==68) {
|
|
setin(3);
|
|
}
|
|
else if (w==38) {
|
|
setin(0);
|
|
}
|
|
else if (w==40) {
|
|
setin(1);
|
|
}
|
|
else if (w==37) {
|
|
setin(2);
|
|
}
|
|
else if (w==39) {
|
|
setin(3);
|
|
}
|
|
else if (w==27 || w==81) {
|
|
end();
|
|
}
|
|
});
|
|
$(document).on("keyup", function(eve) {
|
|
w=eve.which;
|
|
if (w==87) {
|
|
clrin(0);
|
|
}
|
|
else if (w==83) {
|
|
clrin(1);
|
|
}
|
|
else if (w==65) {
|
|
clrin(2);
|
|
}
|
|
else if (w==68) {
|
|
clrin(3);
|
|
}
|
|
else if (w==38) {
|
|
clrin(0);
|
|
}
|
|
else if (w==40) {
|
|
clrin(1);
|
|
}
|
|
else if (w==37) {
|
|
clrin(2);
|
|
}
|
|
else if (w==39) {
|
|
clrin(3);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function end() {
|
|
clrin(0);
|
|
clrin(1);
|
|
clrin(2);
|
|
clrin(3);
|
|
clearInterval(counter);
|
|
$("#you").off("mousedown").off("mousemove").off("mouseup");
|
|
if (("ontouchstart" in window) || ("onmsgesturechange" in window)) {
|
|
$("#dpf").off("touchstart").off("touchend");
|
|
$("#dpb").off("touchstart").off("touchend");
|
|
$("#dpl").off("touchstart").off("touchend");
|
|
$("#dpr").off("touchstart").off("touchend");
|
|
}
|
|
else {
|
|
$("#dpf").off("mousedown").off("mouseup");
|
|
$("#dpb").off("mousedown").off("mouseup");
|
|
$("#dpl").off("mousedown").off("mouseup");
|
|
$("#dpr").off("mousedown").off("mouseup");
|
|
}
|
|
wasdown=0;
|
|
$(document).off("keyup").off("keydown");
|
|
$(document).on("keydown", function(eve) {
|
|
if (eve.which==27 || eve.which==81) {
|
|
start();
|
|
}
|
|
});
|
|
$("#tgpm").fadeIn();
|
|
}
|
|
|
|
|
|
|
|
function getready() {
|
|
$("#menu").fadeOut();
|
|
$("#bar").css("background-color", "rgba(0, 0, 0, 0.5)");
|
|
$("#sec").html("Ready");
|
|
setTimeout(function() {
|
|
$("#sec").html("Set");
|
|
}, 2000);
|
|
setTimeout(function() {
|
|
$("#sec").html("Go! ");
|
|
}, 4000);
|
|
setTimeout(function() {
|
|
$("#kills").html("0 kills");
|
|
|
|
$("#tgp").fadeIn().click(function() {
|
|
end();
|
|
});
|
|
$("#cont").click(function() {
|
|
start();
|
|
});
|
|
|
|
|
|
timebefore=new Date().getTime();
|
|
start();
|
|
}, 4500);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|