Splitting of css, js, html in file
parent
5ddfee50cd
commit
8f04a04c4e
487
index.html
487
index.html
|
@ -5,203 +5,8 @@
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<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" />
|
<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" />
|
<link rel="icon" type="image/png" href="assets/icon.png" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="main.css" />
|
||||||
<meta name="author" content="ambc">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
@ -245,294 +50,6 @@ var mapOptions = {
|
||||||
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
|
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript" src="main.js"></script>
|
||||||
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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,195 @@
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
|
@ -0,0 +1,288 @@
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue