Checkpoint

diff --git a/css/lttl.css b/css/lttl.css
index 087032c..fb3d778 100644 (file)
--- a/css/lttl.css
+++ b/css/lttl.css
@@ -10,11 +10,12 @@ ul, ol, li { list-style: none ! important; margin:0; padding:0; }
     padding:0.5em; background-color:rgba(0,0,0, 0.1); color:#787878;
     border-radius:1em; -moz-border-radius:1em; -webkit-border-radius:1em; }
 
-#controls { position:fixed; top:1em; left:1em; width:250px; }
-    #controls > div { position:relative; }
-    #controls label { position:relative; width:30%; display:inline-block; }
-    #controls input { position:absolute; width:40%; top:0; right:0; text-align:center;
+#config { position:fixed; top:1em; left:1em; 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; }

diff --git a/img/pathmap-bg.png b/img/pathmap-bg.png
new file mode 100644 (file)
index 0000000..b20a3d5
Binary files /dev/null and b/img/pathmap-bg.png differ

diff --git a/index.php b/index.php
index 2476c6c..66277c1 100644 (file)
--- a/index.php
+++ b/index.php
@@ -9,9 +9,11 @@
     <h1>The Littlest Battletank</h1>
 
 
-<div id="controls" class="box">
+<div id="config" class="box">
     <h3>config</h3>
     <div><label for="bullets">bullets</label> <input id="bullets" name="bullets" value="10" type="text"></div>
+    <div><label for="pathmap">overlay pathmap</label> <input id="pathmap" name="pathmap" value="1" type="checkbox"></div>
+    <div><label for="trajectories">trace trajectories</label> <input id="trajectories" name="trajectories" value="1" type="checkbox"></div>
 </div>
 
 <div id="viewport"></div>

diff --git a/lib/uki b/lib/uki
new file mode 120000 (symlink)
index 0000000..4a30323
--- /dev/null
+++ b/lib/uki
@@ -0,0 +1 @@
+/Users/dsc/dev/projects/uki/pkg
\ No newline at end of file

diff --git a/notes.md b/notes.md
index b8e3471..fcc68f9 100644 (file)
--- a/notes.md
+++ b/notes.md
@@ -1,4 +1,10 @@
+- use unit vectors for trajectories
+--> use matrix math for reflections
+- incremental calls to move
+- collision object for recalculating pathing
+
 # Bugs
+- Have move() do incremental calls (consuming elapsed time? distance?) if a push results in a move of x or y larger than the bounding box.
 
 # TODOs
 - Move game objects into namespace `tanks`
@@ -6,5 +12,5 @@
 
 
 # Notes
-- Clipping is going to suck
 - TODO Replace *2 and /2 with shifts at compile-time
+- Clipping will suck (masking is easy -- overflow:hidden)

diff --git a/src/tanks/config.js b/src/tanks/config.js
new file mode 100644 (file)
index 0000000..b1b958f
--- /dev/null
+++ b/src/tanks/config.js
@@ -0,0 +1,6 @@
+tanks.config = {
+    pathing : { 
+        overlayPathmap    : false,
+        traceTrajectories : false
+    }
+};
\ No newline at end of file

diff --git a/src/tanks/game/game-map.js b/src/tanks/game/game-map.js
index bc4015b..5986158 100644 (file)
--- a/src/tanks/game/game-map.js
+++ b/src/tanks/game/game-map.js
@@ -1,5 +1,5 @@
 
-Y(Game.prototype).extend({
+Y(tanks.Game.prototype).extend({
     
     initMap : function initMap(){
         var self = this;
@@ -97,7 +97,7 @@ Y(Game.prototype).extend({
     
 });
 
-Y(Game.prototype).extend({
+Y(tanks.Game.prototype).extend({
     
     resize : function resize(){
         var ratio = COLUMNS / ROWS

diff --git a/src/tanks/game/game.js b/src/tanks/game/game.js
index 5c8bf94..aefec21 100644 (file)
--- a/src/tanks/game/game.js
+++ b/src/tanks/game/game.js
@@ -1,5 +1,4 @@
-Game = new Y.Class('Game', {
-    showOverlay : true,
+tanks.Game = new Y.Class('Game', {
     
     init : function init(viewport){
         this.loop = new EventLoop(this, FRAME_RATE);
@@ -19,7 +18,7 @@ Game = new Y.Class('Game', {
     draw : function draw(){
         this.root.draw();
         this.pathmap.removeOverlay(this.viewport);
-        if (this.showOverlay)
+        if (tanks.config.pathing.overlayPathmap)
             this.pathmap.overlay(this.viewport);
     },
     

diff --git a/src/tanks/main-ui.js b/src/tanks/main-ui.js
index d06a31d..c0f014e 100644 (file)
--- a/src/tanks/main-ui.js
+++ b/src/tanks/main-ui.js
@@ -3,6 +3,9 @@
 function setupUI(){
     spark = LBT.loop.spark = new FpsSparkline(LBT.loop, '.fps-sparkline', 0,0);
     
+    initConfig();
+    $('#config input').bind('change', updateConfig);
+    
     btank = new Tank(0);
     btank.act = function(){ return this; };
     LBT.addUnit(btank, 0,0);
@@ -33,6 +36,17 @@ function setupUI(){
     // $(window).bind('resize', resizeGame);
 }
 
+function initConfig(){
+    var p = tanks.config.pathing;
+    $('#config [name=pathmap]').attr('checked', p.overlayPathmap);
+    $('#config [name=trajectories]').attr('checked', p.traceTrajectories);
+}
+
+function updateConfig(evt){
+    var p = tanks.config.pathing;
+    p.overlayPathmap = $('#config [name=pathmap]').attr('checked');
+    p.traceTrajectories = $('#config [name=trajectories]').attr('checked');
+}
 
 var BULLETS = new Y.YArray();
 

diff --git a/src/tanks/main.js b/src/tanks/main.js
index c55ecda..5ed561d 100644 (file)
--- a/src/tanks/main.js
+++ b/src/tanks/main.js
@@ -2,7 +2,7 @@ jQuery(main);
 
 function main(){
     v = $('#viewport');
-    LBT = new Game();
+    LBT = new tanks.Game();
     ctx = LBT.level.ctx;
     
     

diff --git a/src/tanks/map/pathmap.js b/src/tanks/map/pathmap.js
index 19ead73..06f6927 100644 (file)
--- a/src/tanks/map/pathmap.js
+++ b/src/tanks/map/pathmap.js
@@ -6,13 +6,19 @@ PathMap = new Y.Class('PathMap', QuadTree, {
         
         var w = this.width, h = this.height;
         this.walls = {
-            top    : new Wall(0,0, w,1),
-            bottom : new Wall(0,h, w,1),
-            left   : new Wall(0,0, 1,h),
-            right  : new Wall(w,0, 1,h)
+            top    : new math.Line(0,0, w,0),
+            bottom : new math.Line(0,h, w,h),
+            left   : new math.Line(0,0, 0,h),
+            right  : new math.Line(w,0, w,h)
         };
         
-        Y(this.walls).forEach(this.addBlocker, this);
+        // this.walls = {
+        //     top    : new Wall(0,0, w,1),
+        //     bottom : new Wall(0,h, w,1),
+        //     left   : new Wall(0,0, 1,h),
+        //     right  : new Wall(w,0, 1,h)
+        // };
+        // Y(this.walls).forEach(this.addBlocker, this);
     },
     
     addBlocker : function addBlocker(obj){
@@ -35,12 +41,43 @@ PathMap = new Y.Class('PathMap', QuadTree, {
         var wall, blocker, what
         ,   clamp = math.clamp
         ,   bb = obj.boundingBox
-        ,   maxW = this.width,  maxH = this.height
-        ,   w  = bb.width,      h  = bb.height
-        ,   x1 = to.x,          y1 = to.y
-        ,   x2 = x1+w,          y2 = y1+h
+        ,   minW = 2,            minH = 2
+        ,   maxW = this.width-2, maxH = this.height-2
+        ,   w  = bb.width,       h  = bb.height
+        ,   x1 = to.x,           y1 = to.y
+        ,   x2 = x1+w,           y2 = y1+h
         ;
         
+        // Check for collision with the walls to prevent teleporting units
+        if (x1 < minW || x2 > maxW || y1 < minH || y2 > maxH){
+            blocker = this.game.level;
+            what = 'LevelWall on the ';
+            
+            if (x1 < minW) {
+                what = 'left';
+                wall = this.walls.left;
+                to = trj.pointAtX(minW);
+            
+            } else if (x2 > maxW) {
+                what = 'right';
+                wall = this.walls.right;
+                to = trj.pointAtX(maxW-w);
+            
+            } else if (y1 < minH) {
+                what = 'top';
+                wall = this.walls.top;
+                to = trj.pointAtY(minH);
+            
+            } else if (y2 > maxH) {
+                what = 'bottom';
+                wall = this.walls.bottom;
+                to = trj.pointAtY(maxH-h);
+            }
+            
+            what += ' at '+wall;
+            return { 'ok':!wall, 'to':to, 'wall':wall, 'blocker':blocker, 'what':what };
+        }
+        
         // Check for pathmap collisions
         var blockers = this.get(x1,y1, x2,y2).remove(obj);
         if (blockers.size() > 1){
@@ -72,9 +109,9 @@ PathMap = new Y.Class('PathMap', QuadTree, {
             }
         }
         
-        to.setXY(
-            clamp(to.x, 2,maxW-2),
-            clamp(to.y, 2,maxH-2) );
+        // to.setXY(
+        //     clamp(to.x, 2,maxW-2),
+        //     clamp(to.y, 2,maxH-2) );
         
         what += ' at '+wall;
         return { 'ok':!wall, 'to':to, 'wall':wall, 'blocker':blocker, 'what':what };
@@ -82,7 +119,7 @@ PathMap = new Y.Class('PathMap', QuadTree, {
     
     
     
-    
+    _overlayBG : $('<img src="img/pathmap-bg.png" />')[0],
     overlay : function overlay(gridEl){
         var w = this.width  *SCALE
         ,   h = this.height *SCALE
@@ -100,11 +137,10 @@ PathMap = new Y.Class('PathMap', QuadTree, {
         
         // Clear the canvas
         ctx.beginPath();
-        // ctx.fillStyle = 'rgba(0,0,0,0)';
-        // ctx.lineWidth = 0;
         ctx.clearRect(this.x,this.y, w,h);
         ctx.closePath();
         
+        // ctx.fillStyle   = ctx.createPattern(this._overlayBG, 'repeat');
         ctx.fillStyle   = 'rgba(255,255,255,0.1)';
         ctx.lineWidth   = 1;
         ctx.strokeStyle = 'rgba(255,255,255,0.2)';
@@ -117,11 +153,10 @@ PathMap = new Y.Class('PathMap', QuadTree, {
             acc[r.id] = r;
             
             ctx.beginPath();
-            // ctx.fillStyle   = 'rgba(255,255,255,0.1)';
-            // ctx.lineWidth   = 1;
-            // ctx.strokeStyle = 'rgba(255,255,255,0.2)';
+            // ctx.globalAlpha = 0.1;
             ctx.rect(r.x1,r.y1, r.width,r.height);
             ctx.fill();
+            // ctx.globalAlpha = 1;
             ctx.stroke();
             ctx.closePath();
             

diff --git a/src/tanks/tanks.js b/src/tanks/tanks.js
new file mode 100644 (file)
index 0000000..89d6359
--- /dev/null
+++ b/src/tanks/tanks.js
@@ -0,0 +1 @@
+tanks = {};

diff --git a/src/tanks/thing/bullet.js b/src/tanks/thing/bullet.js
index 542ef09..425b086 100644 (file)
--- a/src/tanks/thing/bullet.js
+++ b/src/tanks/thing/bullet.js
@@ -140,8 +140,8 @@ Bullet = new Y.Class('Bullet', Thing, {
         if (this.tline) this.tline.remove();
         if (this.shape) this.shape.remove();
         
-        if (this.traceTrajectories) {
-        var t = this.trajectory;
+        if (tanks.config.pathing.traceTrajectories) {
+            var t = this.trajectory;
             this.tline = Line.fromPoints(t.x1,t.y1, t.x2,t.y2)
                 .attr('drawDefinitionPoints', true)
                 .stroke('rgba(255,246,174, 0.05)')

diff --git a/tanks.php b/tanks.php
index 14caf8e..15f8e17 100644 (file)
--- a/tanks.php
+++ b/tanks.php
@@ -16,7 +16,9 @@ class Tanks {
     );
     
     static $srcScripts = array(
+        "src/tanks/tanks.js",
         "src/tanks/globals.js",
+        "src/tanks/config.js",
         "src/tanks/calc.js",
         
         "src/tanks/map/loc.js",