From 8f04a04c4e745df88d8bdc4c635a96e968ab3542 Mon Sep 17 00:00:00 2001 From: Ambrose Chua Date: Fri, 1 Mar 2013 17:17:22 +0800 Subject: [PATCH] Splitting of css, js, html in file --- index.html | 487 +---------------------------------------------------- main.css | 195 +++++++++++++++++++++ main.js | 288 +++++++++++++++++++++++++++++++ 3 files changed, 485 insertions(+), 485 deletions(-) create mode 100644 main.css create mode 100644 main.js diff --git a/index.html b/index.html index e515074..857338b 100644 --- a/index.html +++ b/index.html @@ -5,203 +5,8 @@ + - @@ -245,294 +50,6 @@ var mapOptions = { var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); - + diff --git a/main.css b/main.css new file mode 100644 index 0000000..de57ef6 --- /dev/null +++ b/main.css @@ -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; +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..14216db --- /dev/null +++ b/main.js @@ -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); +} +