From 3a6a65721497c0623a80dd75ba5650b4586926c9 Mon Sep 17 00:00:00 2001 From: dsc Date: Mon, 15 Nov 2010 20:09:20 -0800 Subject: [PATCH] Checkpoint --- css/lttl.css | 9 +++-- img/pathmap-bg.png | Bin 0 -> 2856 bytes index.php | 4 ++- lib/uki | 1 + notes.md | 8 ++++- src/tanks/config.js | 6 ++++ src/tanks/game/game-map.js | 4 +- src/tanks/game/game.js | 5 +-- src/tanks/main-ui.js | 14 ++++++++ src/tanks/main.js | 2 +- src/tanks/map/pathmap.js | 71 ++++++++++++++++++++++++++++++++----------- src/tanks/tanks.js | 1 + src/tanks/thing/bullet.js | 4 +- tanks.php | 2 + 14 files changed, 99 insertions(+), 32 deletions(-) create mode 100644 img/pathmap-bg.png create mode 120000 lib/uki create mode 100644 src/tanks/config.js create mode 100644 src/tanks/tanks.js diff --git a/css/lttl.css b/css/lttl.css index 087032c..fb3d778 100644 --- 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 index 0000000000000000000000000000000000000000..b20a3d581378485401e1382a589c6b63e4dd13bd GIT binary patch literal 2856 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 Littlest Battletank -
+

config

+
+
diff --git a/lib/uki b/lib/uki new file mode 120000 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 --- 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 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 --- 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 --- 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 --- 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 --- 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 --- 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 : $('')[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 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 --- 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 --- 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", -- 1.7.0.4