From 0ee97c620524b448a7bfaeba112e29fcf9ca0923 Mon Sep 17 00:00:00 2001 From: dsc Date: Sun, 21 Nov 2010 17:36:50 -0800 Subject: [PATCH] Adds new howto screen. --- css/lttl.css | 56 +++++++++++++++++++-------- index.php | 68 ++++++++++++++++++++------------ src/tanks/main.js | 111 +++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 173 insertions(+), 62 deletions(-) diff --git a/css/lttl.css b/css/lttl.css index 9717a2b..1cb208d 100644 --- a/css/lttl.css +++ b/css/lttl.css @@ -1,10 +1,18 @@ -html, body { width:100%; height:100%; - font-family:Geogrotesque,Helvetica; font-size:12pt; color:#fff; - background-color:#3F3F3F; } -h1 { position:fixed; top:0; right:0; margin:0; padding:0; font-size:3em; color:#000; opacity:0.25; z-index:100; } -h2, h3, h4, h5 { margin:0; margin-bottom:0.5em; } +html { width:100%; height:100%; top:0; left:0; margin:0; padding:0; background-color:#3F3F3F; } +body { position:absolute; width:100%; top:0; left:0; margin:0; padding:0; + font-family:Geogrotesque,Helvetica; font-size:12pt; color:#fff; } +h1, h2, h3, h4, h5 { margin:0.75em 0; font-weight:normal; } ul, ol, li { list-style: none ! important; margin:0; padding:0; } +.clearer { clear:both !important; float:none !important; + margin:0 !important; padding:0 !important; } +.rounded { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; } +.box { + padding:0.5em; background-color:rgba(0,0,0, 0.1); color:#787878; + border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; } + +body > h1 { position:fixed; top:0; right:0; margin:0; padding:0; font-size:3em; color:#000; opacity:0.25; z-index:100; } + table { border-spacing:0; } td { text-align:center; vertical-align:middle; } @@ -15,27 +23,43 @@ table.grid td { /* outline:1px solid rgba(255,255,255,0.1); */ margin:0; padding:0; white-space:nowrap; overflow:hidden; } .gridShowCoords table.grid td:hover { color:rgba(255,255,255,0.1); } -.rounded { border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; } -.box { - padding:0.5em; background-color:rgba(0,0,0, 0.1); color:#787878; - border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; } +#viewport { position:relative; width:500px; height:500px; margin:1em auto; /* overflow:hidden; */ } + + +#overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.5; z-index:100; } + +.bigblue { position:fixed; width:100%; top:50%; margin-top:-200px; z-index:101; } + .bigblue .box { width:400px; margin:0 auto; padding:1em; color:#000; background-color:#2992C5; + box-shadow:7.5px 7.5px 15px #000; -moz-box-shadow:7.5px 7.5px 15px #000; -webkit-box-shadow:7.5px 7.5px 15px #000; } + .bigblue h1 { text-align:center; font-size:2em; letter-spacing:2px; } + .bigblue h2 { font-size:1.1em; letter-spacing:2px; } + .bigblue .start { margin:1.5em 0 0.5em; text-align:center; border:0; } + + #notes { /* position:fixed; top:4em; right:1em; color:#BFBFBF;*/ } + #notes ul, #notes ol, #notes li { list-style:circle ! important; } + #notes li { margin-left:1em; } -#config { position:fixed; top:1em; left:1em; width:250px; } + +/* +#welcome fieldset { border:1px solid #182B53; padding:1em; } +#welcome legend { padding:0.5em; text-transform:uppercase; } +*/ + +#debug { position:relative; top:1em; right:1em; } + #debug .inner { position:absolute; top:0; right:0; padding:1em; } + #debug .inner > * { float:right; margin-right:1em; } + +#config { position:relative; width:250px; } #config > div { position:relative; line-height:1.5em; } #config label { position:relative; width:69%; display:inline-block; } #config input { position:absolute; width:30%; top:0; right:0; text-align:center; border:0; background-color:rgba(0,0,0, 0.1) ! important; color:#5c5c5c; } #config input[type=checkbox] { top:0.33em; } -#viewport { position:relative; top:1em; width:500px; height:500px; margin:0 auto; /* overflow:hidden; */ } -#info { position:fixed; bottom:10px; right:1em; } +#info { position:relative; width:250px; } #info #state { font-weight:bold; } #info label { display:block; float:left; width:3em; margin-right:0.5em; color:#787878; } #info input { border:0; background-color:transparent; min-width:5em; width:5em; color:#5c5c5c; } #info .sep { opacity:0.1; background-color:#999; margin:5px 0; height:1px; } #info .fps-sparkline { width:100%; height:1.5em; margin-top:0.5em; } -#notes { position:fixed; top:4em; right:1em; color:#BFBFBF; width:300px; } - #notes ul, #notes ol, #notes li { list-style:circle ! important; } - #notes li { margin-left:1em; } - diff --git a/index.php b/index.php index 9dc4ce9..0f8add7 100644 --- a/index.php +++ b/index.php @@ -6,37 +6,53 @@ -

The Littlest Battletank

- +
-
-

config

- -
-
-
-
+
+
+

The Littlest Battletank

+ +

How To Play

+ +
    +
  • Move your tank with wasd or the arrow keys.
    • +
  • Use the mouse to aim; click to shoot (or press spacebar).
    • +
  • Press enter to pause.
    • +
  • For now, refresh the page to play again. :)
    • +
+ +

Click anywhere to start!

+
+
- + +
diff --git a/src/tanks/main.js b/src/tanks/main.js index d4c5efa..0779141 100644 --- a/src/tanks/main.js +++ b/src/tanks/main.js @@ -1,10 +1,6 @@ (function(){ jQuery(main); -var btank = null -, bullets = new Y.YArray() -; - this.main = main; function main(){ var v = $('#viewport'); @@ -34,27 +30,24 @@ function main(){ function setupUI(){ LBT.loop.spark = new FpsSparkline(LBT.loop, '.fps-sparkline', 0,0); - // btank = new Tank(1); - // btank.act = function(){ return this; }; - // btank.stats.shots = Infinity; - // LBT.addUnit(btank, 0,0); - // LBT.pathmap.removeBlocker(btank); - // btank.shape.hide(); - initConfig(); $('#config').bind('mousedown', Y.op.K(false)); $('#config input').bind('change', updateConfig); LBT.root.draw(); + $(document).bind('keydown', 'ctrl+c', toggleConfig); + // Start button (click or return key) - $(document).bind('keydown', 'return', toggleGame); - $(document).bind('keydown', 'ctrl+o', toggleOverlay); + $(document).bind('keydown', 'return', startGame); + $(document).bind('click', startGame); + + $('#welcome').clone() + .attr('id', 'pause') + .hide() + .appendTo( $('body') ) + .find('.box').html('

Paused!

'); - // $('#bullets').bind('blur', function(evt){ - // var n = parseInt($('#bullets').val() || 0); - // updateBullets(n); - // }); LBT.root.draw(); setInterval(updateInfo, 1000); @@ -64,6 +57,84 @@ function setupUI(){ } +function startGame(evt){ + $(document).unbind('click', startGame); + $(document).unbind('keydown', startGame); + + $('#welcome').hide(); + countdownToStart(3); +} + +function onGameStart(){ + $('#overlay').hide(); + toggleGame(); + $(document).bind('keydown', 'return', pauseGame); +} + +function countdownToStart(n){ + var el + , showFor = 750 + , pauseFor = 500 + + , body = $('body') + , sizeRatio = 0.6 + , values = new Y(1,n+1).unshift('GO').end() + , colors = [ '#E73075', '#2992C5', '#2992C5', '#2992C5' ] + ; + + function tickDown(){ + var bw = body.width() + , bh = body.height() + , size = bh*sizeRatio + + , el = $('
') + .width(bh*0.75).height(bh*0.75) + .text( values.pop() ) + .css({ + 'position' : 'fixed', + 'top' : ((bh - size)/2)+'px', + 'left' : (bw/2 - bh*0.375)+'px', + 'overflow' : 'hidden', + 'z-index' : 1000, + + 'text-align' : 'center', + 'font-size' : size+'px', + 'color' : '#000000', + 'background-color' : colors.pop(), + }) + ; + + ' -moz- -webkit-' + .split(' ') + .forEach(function(prefix){ + // el.css(prefix+'border-radius', (size*0.25)+'px'); + el.css(prefix+'border-radius', (bh/2)+'px'); + }); + + body.append(el); + + setTimeout(function(){ + el.remove(); + + if ( values.length ) { + setTimeout(tickDown, pauseFor); + } else { + onGameStart(); + } + }, showFor); + } + + tickDown(); +} + +function pauseGame(evt){ + toggleOverlay(); + $('#pause').toggle(); + toggleGame(); +} + + + function toggleGame(evt){ if (LBT.loop.running) @@ -74,9 +145,9 @@ function toggleGame(evt){ updateInfo(); } -function toggleOverlay(evt){ - LBT.showOverlay = !(LBT.showOverlay); -} +function toggleConfig(evt){ $('#debug').toggle(); } +function toggleOverlay(evt){ $('#overlay').toggle(); } +function togglePathingOverlay(evt){ LBT.showOverlay = !(LBT.showOverlay); } function resizeGame(evt){ LBT.resize(evt); -- 1.7.0.4