From: dsc Date: Wed, 17 Nov 2010 23:03:49 +0000 (-0800) Subject: Adds support for firing! X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=2258b3da62bfc8a9aae6f83cec3d6de34f1328ff;p=tanks.git Adds support for firing! --- diff --git a/src/portal/layer.js b/src/portal/layer.js index bc8bf6c..bd61600 100644 --- a/src/portal/layer.js +++ b/src/portal/layer.js @@ -161,7 +161,7 @@ Layer = new Y.Class('Layer', { this.boundingBox = this.boundingBox.resize(w, this.layerHeight); var nb = this.negBleed.x - , v = this.canvasWidth = w + nb + this.posBleed.x; + , v = this.canvasWidth = Math.ceil(w + nb + this.posBleed.x); this.layer.width(w).css('margin-left', (-nb)+'px') this.canvas.width(v); // this.canvas.css({ @@ -182,7 +182,7 @@ Layer = new Y.Class('Layer', { this.boundingBox = this.boundingBox.resize(this.layerWidth, h); var nb = this.negBleed.y - , v = this.canvasHeight = h + nb + this.posBleed.y; + , v = this.canvasHeight = Math.ceil(h + nb + this.posBleed.y); this.layer.height(h).css('margin-top', (-nb)+'px') this.canvas.height(v); // this.canvas.css({ @@ -332,7 +332,7 @@ Layer = new Y.Class('Layer', { ['', '-moz-', '-webkit-'].reduce( function(values, prefix){ values[prefix+'transform'] = trans; - values[prefix+'origin'] = origin; + values[prefix+'transform-origin'] = origin; return values; }, {}) ); return this; diff --git a/src/portal/shape/circle.js b/src/portal/shape/circle.js index 10e824f..16c9c6a 100644 --- a/src/portal/shape/circle.js +++ b/src/portal/shape/circle.js @@ -2,18 +2,20 @@ Circle = new Y.Class('Circle', Shape, { _cssClasses : 'portal layer shape circle', - init : function initCircle(radius){ + init : function initCircle(radius, centerTL){ Layer.init.call(this); var d = radius * 2; - this.radius = this.negBleed.x = this.negBleed.y = radius; + this.radius = radius; + if (!centerTL) + this.negBleed.x = this.negBleed.y = radius; this.width(d).height(d); // .origin(radius,radius); }, drawShape : function drawShape(ctx){ - var r = this.radius; - ctx.arc(0,0, r, 0, Math.PI*2, false); + var r = this.radius, nb = this.negBleed; + ctx.arc(r-nb.x,r-nb.y, r, 0, Math.PI*2, false); ctx.fill(); ctx.stroke(); } diff --git a/src/tanks/main.js b/src/tanks/main.js index c51174f..e715777 100644 --- a/src/tanks/main.js +++ b/src/tanks/main.js @@ -25,7 +25,7 @@ function main(){ setupUI(); // B = bullets.attr(0); - // T = B.trajectory; + // R = B.trajectory; } @@ -133,10 +133,14 @@ function updateBullets(n){ function rand(a,b){ return a + Math.random()*(b-a); } function randOpenLoc(){ + var BP = Bullet.prototype + , w = BP.width, h = BP.height + , offX = BP.offsetX, offY = BP.offsetY + ; do { - var x = rand(0,COLUMNS*REF_SIZE) - , y = rand(0,ROWS*REF_SIZE); - } while ( LBT.pathmap.get(x,y, x+6,y+6).size() ); + var x = rand(-offX, COLUMNS*REF_SIZE-w) + , y = rand(-offY, ROWS*REF_SIZE-h); + } while ( LBT.pathmap.get(x+offX,y+offY, x+w,y+h).size() ); return new math.Vec(x,y); } diff --git a/src/tanks/map/pathmap.js b/src/tanks/map/pathmap.js index 6d43b88..44151fb 100644 --- a/src/tanks/map/pathmap.js +++ b/src/tanks/map/pathmap.js @@ -38,11 +38,11 @@ PathMap = new Y.Class('PathMap', QuadTree, { return obj; }, - moveBlocked : function moveBlocked(agent, trj, to){ + moveBlocked : function moveBlocked(agent, trj, to, bb){ + bb = bb || agent.boundingBox; var blockers, blocker, msg , side = null - , bb = agent.boundingBox , bw = bb.width, bh = bb.height , offX = agent.offsetX, offY = agent.offsetY @@ -67,22 +67,22 @@ PathMap = new Y.Class('PathMap', QuadTree, { msg = blocker+' on the '; var B = blocker.boundingBox; - if (bb.x2 <= B.x1 && x2 > B.x1) { + if (bb.x2 <= B.x1 && x2 >= B.x1) { msg += 'left'; side = B.sides.left; to = trj.pointAtX(B.x1-bw-offX-1); - } else if (bb.x1 >= B.x2 && x1 < B.x2) { + } else if (bb.x1 >= B.x2 && x1 <= B.x2) { msg += 'right'; side = B.sides.right; to = trj.pointAtX(B.x2-offX+1); - } else if (bb.y2 <= B.y1 && y2 > B.y1) { + } else if (bb.y2 <= B.y1 && y2 >= B.y1) { msg += 'top'; side = B.sides.top; to = trj.pointAtY(B.y1-bh-offY-1); - } else if (bb.y1 >= B.y2 && y1 < B.y2) { + } else if (bb.y1 >= B.y2 && y1 <= B.y2) { msg += 'bottom'; side = B.sides.bottom; to = trj.pointAtY(B.y2-offY+1); diff --git a/src/tanks/map/trajectory.js b/src/tanks/map/trajectory.js index 546354b..01cdaa2 100644 --- a/src/tanks/map/trajectory.js +++ b/src/tanks/map/trajectory.js @@ -60,7 +60,7 @@ Trajectory = new Y.Class('Trajectory', math.Line, { this.elapsed += t; _to = to = this.parametric(this.elapsed); - test = this.pathmap.moveBlocked(o, this, to); + test = this.pathmap.moveBlocked(o, this, to, bb); // Blocked! Reflect trajectory if ( test ) { @@ -68,15 +68,23 @@ Trajectory = new Y.Class('Trajectory', math.Line, { side = test.side; blockers = test.blockers; + if (!side) { + console.error('Null side! Something horrible has occurred!'); + continue; + } + if ( blockers.length > 1 ) { to = loc; ng = this.p1; // XXX: recalculate? + console.log('corner!', this, 'to:', to, 'ng:', ng); } else { ng = math.reflect(this.p2, side); } - var og = this.p2; - this.reset(to.x,to.y, ng.x,ng.y); + var x = to.x, y = to.y + , og = this.p2 + ; + this.reset(x,y, ng.x,ng.y); if (this.depth) { console.log([ @@ -93,7 +101,7 @@ Trajectory = new Y.Class('Trajectory', math.Line, { ].join('\n')); } - bb = new Loc.Rect(to.x,to.y, ng.x,ng.y); + bb = new Loc.Rect(x,y, x+bw,y+bh); ng = null; this.owner.render(this.game.level); diff --git a/src/tanks/thing/bullet.js b/src/tanks/thing/bullet.js index 3711d74..3b59033 100644 --- a/src/tanks/thing/bullet.js +++ b/src/tanks/thing/bullet.js @@ -11,9 +11,8 @@ Bullet = new Y.Class('Bullet', Thing, { this.owner = owner; this.game = owner.game; Thing.init.call(this, owner.align); - var loc = owner.loc - , x1 = loc.x - , y1 = loc.y; + var loc = owner.getTurretLoc() + , x1 = loc.x, y1 = loc.y; this.setLocation(x1,y1); this.trajectory = new Trajectory(this, x1,y1, x2,y2, this.stats.move*REF_SIZE/1000); diff --git a/src/tanks/thing/tank.js b/src/tanks/thing/tank.js index 697ceac..c65ab5c 100644 --- a/src/tanks/thing/tank.js +++ b/src/tanks/thing/tank.js @@ -4,8 +4,8 @@ Tank = new Y.Class('Tank', Thing, { blocking : true, // Bounding box size - width : REF_SIZE*0.7, - height : REF_SIZE*0.6, + width : REF_SIZE*0.55, + height : REF_SIZE*0.55, // Attributes stats: { @@ -44,6 +44,18 @@ Tank = new Y.Class('Tank', Thing, { return p; }, + getTurretLoc : function getTurretLoc(){ + var loc = this.loc + , barrel = this.barrel, bb = barrel.boundingBox + , theta = barrel.transform.rotate, sin = Math.sin(theta), cos = Math.cos(theta) + , x0 = bb.x2-bb.x1, y0 = (bb.y2-bb.y1)/2 + , x = loc.x + bb.x1 + x0*cos - y0*sin + , y = loc.y + bb.y1 + x0*sin + y0*cos + ; + // console.log('getTurretLoc()', 'loc:', loc, 'bb.(x2,y2):', [bb.x2,bb.y2], '(x,y):', [x,y]); + return new math.Vec(x,y); + }, + /// Rendering Methods /// @@ -55,24 +67,33 @@ Tank = new Y.Class('Tank', Thing, { render : function render( parent ){ if (this.shape) this.shape.remove(); - var w = this.width - , h = this.height - , tw = w / 4 - , th = h * 0.9 - , sw = w * 0.05 + var w = this.width, w2 = w/2 + , h = this.height, h2 = h/2 + + , r = w / 4 + , cw = w * 0.75 + , ch = h / 6 ; this.shape = new Rect(w,h) .position(this.loc.x, this.loc.y) - .attr('fillStyle', '#E73075') - .append( - new Triangle(0,th, tw,th/2) - .position(w-tw-sw, (h-th)/2) - .attr('fillStyle', '#980011') - ) + .fill('#E73075') .appendTo( parent ); + this.cannon = new Circle(r, true) + .position(w2-r+1, h2-r+1) + .fill('#A72F5B') + .appendTo( this.shape ) + ; + + this.barrel = new Rect(cw,ch) + .position(w2-2, h2-ch/2) + .origin(2, ch/2) + .fill('#2E62C9') + .appendTo( this.shape ) + ; + return this; } diff --git a/src/tanks/thing/thing.js b/src/tanks/thing/thing.js index 79aff1c..391627f 100644 --- a/src/tanks/thing/thing.js +++ b/src/tanks/thing/thing.js @@ -141,6 +141,9 @@ Thing = new Evt.Class('Thing', { return this; }, + getTurretLoc : function getTurretLoc(){ + return this.loc; + }, /// Rendering Methods /// diff --git a/src/tanks/ui/player.js b/src/tanks/ui/player.js index e945e7e..6db2f20 100644 --- a/src/tanks/ui/player.js +++ b/src/tanks/ui/player.js @@ -1,4 +1,6 @@ Key = { + fire : 32, + _dirFromKey : { 37: "left", 38: "up", 39: "right", 40: "down", 65: "left", 87: "up", 68: "right", 83: "down" @@ -18,19 +20,22 @@ Key = { } }; + + Player = new Y.Class('Player', { activeKeys : null, shift : false, ctrl : false, meta : false, alt : false, leftMouse : false, middleMouse : false, rightMouse : false, - action : null, - target : null, + queue : null, + init : function init(game, tank){ Y.bindAll(this); this.activeKeys = new Y.YArray(); + this.queue = []; this.tank = tank; this.game = game; @@ -42,7 +47,9 @@ Player = new Y.Class('Player', { .bind('keydown', this.keydown) .bind('keyup', this.keyup) .bind('mousedown', this.mousedown) - .bind('mouseup', this.mouseup); + .bind('mouseup', this.mouseup) + .bind('mousemove', this.mousemove) + ; }, updateMeta : function updateMeta(evt){ @@ -71,7 +78,14 @@ Player = new Y.Class('Player', { mousedown : function mousedown(evt){ switch (evt.which) { - case 1: evt.leftMouse = true; break; + case 1: evt.leftMouse = true; + var off = this.game.viewport.offset(); + this.queue.push({ + type : 'fire', + x : evt.pageX - off.left, + y : evt.pageY - off.top + }); + break; case 2: evt.rightMouse = true; break; case 3: evt.middleMouse = true; break; } @@ -87,28 +101,43 @@ Player = new Y.Class('Player', { this.updateMeta(evt); }, + mousemove : function mousemove(evt){ + var shape = this.tank.shape + , cannon = this.tank.cannon + , barrel = this.tank.barrel + , off = shape.offset() + , w = shape.width(), h = shape.height() + , x = off.left + w/2 - evt.pageX + , y = off.top + h/2 - evt.pageY + , theta = Math.atan2(-y,-x); + + barrel.rotate(theta); + }, + + + act : function act(){ - if (this.tank.dead || !this.activeKeys.size() ) + if (this.tank.dead) return this.tank; + var action = this.queue.shift(); + + if (action && action.type === 'fire') + this.tank.fireProjectile(action.x, action.y); + else if ( this.activeKeys.size() ) + this.move(); + + return this.tank; + }, + + move : function move(){ var dir = this.activeKeys .unique() .sort() .join(' '); - if (dir) this.move(dir); + if (!dir) return; - // var active = this.activeKeys; - // for (var key in Key._dirFromKey) - // if ( active.has(key) ) { - // this.move( Key._dirFromKey[key] ); - // return this.tank; - // } - - return this.tank; - }, - - move : function move(dir){ var tank = this.tank , toLoc = tank.loc.moveByDir(dir, (tank.stats.move * SQUARETH))