From cb4025bf28cee0c6b0c5573ed128684a50e697d5 Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 13:30:59 -0500 Subject: [PATCH 1/8] adding move containment --- .gitignore | 1 + index.html | 4 +- public/game.js | 49 +++++++++++++----------- public/move.js | 84 +++++++++++++++++++++++++++++++++++++++++ public/tools.js | 99 +++++++++++++++++++++++-------------------------- 5 files changed, 162 insertions(+), 75 deletions(-) diff --git a/.gitignore b/.gitignore index e43b0f9..f31b3e2 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .DS_Store +*.swp diff --git a/index.html b/index.html index 072a503..a0e9094 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -37,4 +37,4 @@
- \ No newline at end of file + diff --git a/public/game.js b/public/game.js index 25ec154..5c9a7d8 100644 --- a/public/game.js +++ b/public/game.js @@ -1,11 +1,10 @@ -var o = $ - , min = Math.min + var min = Math.min , max = Math.max; // cat -o(function(){ +$(function(){ function walk() { var dirx = ['sub', 'add'][Math.random() * 2 | 0] , diry = ['sub', 'add'][Math.random() * 2 | 0]; @@ -13,6 +12,10 @@ o(function(){ move('#cat') [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) + .contain({ + left : '300', + top : '600' + }) .duration('1s') .ease('out') .then() @@ -27,7 +30,7 @@ o(function(){ // bird sprites -o(function(){ +$(function(){ var birds = document.querySelectorAll('.bird'); birds.each = [].forEach; birds.each(function(bird){ @@ -40,7 +43,7 @@ o(function(){ // bird movement -o(function(){ +$(function(){ var birds = document.querySelectorAll('.bird'); birds.each = [].forEach; @@ -69,23 +72,23 @@ o(function(){ // hills -o(function(){ +$(function(){ // TODO: separate fences for different intensities - var hills = o('.hill') + var hills = $('.hill') , intensity = .005 , offsets = hills.map(function(i){ - off = o(this).offset(); + off = $(this).offset(); off.intensity = intensity / ++i; return off; }); - o(document).mousemove(function(e){ + $(document).mousemove(function(e){ var x = e.clientX , y = e.clientY; hills.each(function(i){ var off = offsets[i]; - o(this).css({ + $(this).css({ top: off.top , left: off.left - x * off.intensity }); @@ -95,19 +98,23 @@ o(function(){ // guy -o(function(){ - var guy = o('#guy') - , cat = o('#cat') - , hat = o('#guy-hat') - , leftEye = o('#guy-eye-left') - , rightEye = o('#guy-eye-right') - , leftEyeBounds = o('#guy-eye-left-bounds') - , rightEyeBounds = o('#guy-eye-right-bounds') +$(function(){ + var guy = $('#guy') + , cat = $('#cat') + , hat = $('#guy-hat') + , leftEye = $('#guy-eye-left') + , rightEye = $('#guy-eye-right') + , leftEyeBounds = $('#guy-eye-left-bounds') + , rightEyeBounds = $('#guy-eye-right-bounds') , min = Math.min , max = Math.max , dx = 10 , dy = 2; + cat.click(function() { + alert('mrrrrrow'); + }); + var go = guy.offset() , gox = go.left , goy = go.top; @@ -144,7 +151,7 @@ o(function(){ setInterval(function(){ if (!prev) { // TODO: transition - var off = o('#cat').offset(); + var off = $('#cat').offset(); lookat(off.left, off.top); } prev = null; @@ -152,8 +159,8 @@ o(function(){ // look at cursor var prev; - o(document).mousemove(function(e){ + $(document).mousemove(function(e){ prev = e; lookat(e.clientX, e.clientY); }); -}); \ No newline at end of file +}); diff --git a/public/move.js b/public/move.js index 0374e22..41a312b 100644 --- a/public/move.js +++ b/public/move.js @@ -413,6 +413,83 @@ return this; }; + Move.prototype.contain = function(container) + { + if( typeof container === 'string' ) + { + // selector containment + } + else if( typeof container === 'object' ) { + if( $.inArray('top',Object.keys(container)) ) + { + this.setContainment('top',container.top); + } + if( $.inArray('right',Object.keys(container)) ) + { + this.setContainment('right',container.right); + } + if( $.inArray('bottom',Object.keys(container)) ) + { + this.setContainment('bottom',container.top); + } + if( $.inArray('left',Object.keys(container)) ) + { + this.setContainment('left',container.left); + } + } + console.log(this.getContainment()); + // return for chaining + return this; + }; + + /* + * Containment constructor, class for containing moving objects + * + */ + Containment = function() { + // stub + } + + /* + * Set containment property + * + * @param {String} prop + * @param {String} val + */ + Containment.prototype.set = function(prop,val) { + var _prop = this._prop || {}; + _prop[prop] = val; + this._prop = _prop; + return this; + }; + + /** + * Get containment singleton + * + * @api public + */ + Move.prototype.getContainment = function() + { + if( 'undefined' === typeof this._containment ) + { + this._containment = new Containment; + } + return this._containment; + } + + /** + * Set containment property + * + * @param {String} prop + * @param {String} val + * @return {Containment} for chaining + */ + Move.prototype.setContainment = function(prop, val) + { + console.log(this.getContainment()); + return this.getContainment().set(prop,val); + }; + /** * Increment `prop` by `val`, deferred until `.end()` is invoked * and adds the property to the list of transition props. @@ -525,6 +602,12 @@ */ Move.prototype.then = function(fn){ + /* + if( $( this.el ).attr('id') === 'cat' ) + { + console.log(fn); + } + */ // invoke .end() if (fn instanceof Move) { this.on('end', function(){ @@ -536,6 +619,7 @@ // chain } else { var clone = new Move(this.el); + // inherit transforms, not sure why clone._transforms = this._transforms.slice(0); this.then(clone); clone.parent = this; diff --git a/public/tools.js b/public/tools.js index 7ec7002..462f756 100644 --- a/public/tools.js +++ b/public/tools.js @@ -1,53 +1,48 @@ - -var o = $; - // debug mode - -o(function(){ - o('body').addClass('debug'); -}); - -// draggable assets - -o(function(){ - var help = o('#help').hide(); - - var drag - , start; - - o('body *').mousedown(function(e){ - drag = o(this); - start = e; - help.find('.name').text(drag.attr('id') + ' - '); - }).hover(function(){ - o(this).css('-webkit-box-shadow', 'inset 0 0 0 1px rgba(255,0,0,.5)'); - }).mouseout(function(){ - o(this).css('-webkit-box-shadow', 'none'); - }); - - o(document).mousemove(function(e){ - if (!drag) return; - var x = e.clientX - start.offsetX - , y = e.clientY - start.offsetY; - - drag.css({ - left: x + 'px' - , top: y + 'px' - }); - - help.show(); - help.find('.pos').text('top: ' + y + 'px; left: ' + x + 'px;'); - - x += 5; - y += 5; - help.css({ - left: x + 'px' - , top: y + 'px' - }); - }); - - o(document).mouseup(function(){ - if (drag) drag.css('border', 'none'); - drag = null; - }); -}); \ No newline at end of file +(function($) { + $(function(){ + $('body').addClass('debug'); + + // draggable assets + var help = $('#help').hide(); + + var drag + , start; + + $('body *').mousedown(function(e){ + drag = $(this); + start = e; + help.find('.name').text(drag.attr('id') + ' - '); + }).hover(function(){ + $(this).css('-webkit-box-shadow', 'inset 0 0 0 1px rgba(255,0,0,.5)'); + }).mouseout(function(){ + $(this).css('-webkit-box-shadow', 'none'); + }); + + $(document).mousemove(function(e){ + if (!drag) return; + var x = e.clientX - start.offsetX + , y = e.clientY - start.offsetY; + + drag.css({ + left: x + 'px' + , top: y + 'px' + }); + + help.show(); + help.find('.pos').text('top: ' + y + 'px; left: ' + x + 'px;'); + + x += 5; + y += 5; + help.css({ + left: x + 'px' + , top: y + 'px' + }); + }); + + $(document).mouseup(function(){ + if (drag) drag.css('border', 'none'); + drag = null; + }); + }); +})( jQuery ); From 792199db9fdfd415b06cd6558246f0b2d5b68ece Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 13:42:11 -0500 Subject: [PATCH 2/8] added property accessors --- public/game.js | 7 +++---- public/move.js | 14 +++++++++++++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/public/game.js b/public/game.js index 5c9a7d8..cc456fe 100644 --- a/public/game.js +++ b/public/game.js @@ -10,12 +10,11 @@ $(function(){ , diry = ['sub', 'add'][Math.random() * 2 | 0]; move('#cat') - [dirx]('left', Math.random() * 30 | 0) - [diry]('top', Math.random() * 30 | 0) .contain({ - left : '300', - top : '600' + top : '+430' // maintain cat at least 430px from top }) + [dirx]('left', Math.random() * 30 | 0) + [diry]('top', Math.random() * 30 | 0) .duration('1s') .ease('out') .then() diff --git a/public/move.js b/public/move.js index 41a312b..161d91d 100644 --- a/public/move.js +++ b/public/move.js @@ -379,6 +379,16 @@ return this; }; + Move.prototype.hasProperty = function(prop) { + return typeof this._props[prop] !== 'undefined'; + }; + + Move.prototype.getProperty = function(prop) { + if( typeof this._props[prop] !== 'undefined' ) { + return this._props[prop]; + } + }; + /** * Set a vendor prefixed `prop` with the given `val`. * @@ -437,7 +447,9 @@ this.setContainment('left',container.left); } } - console.log(this.getContainment()); + this.on('start',function() { + this.getContainment().applyContainment(this) + }.bind(this)); // return for chaining return this; }; From 964eaafe8e54ae31b0009a958bd5596a6a7be458 Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 13:44:31 -0500 Subject: [PATCH 3/8] added property accessors --- public/move.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/public/move.js b/public/move.js index 161d91d..a7194a9 100644 --- a/public/move.js +++ b/public/move.js @@ -379,13 +379,23 @@ return this; }; + /* + * Checks if vendor property is set, vendor webkit is implied and hardcoded + * + * @param {String} prop + */ Move.prototype.hasProperty = function(prop) { - return typeof this._props[prop] !== 'undefined'; + return typeof this._props['-webkit-' + prop] !== 'undefined'; }; + /* + * Gets the value of a vendor property, vendor webkit is implied and hardcoded + * + * @param {String} prop + */ Move.prototype.getProperty = function(prop) { - if( typeof this._props[prop] !== 'undefined' ) { - return this._props[prop]; + if( typeof this._props['-webkit-' + prop] !== 'undefined' ) { + return this._props['-webkit-' + prop]; } }; From b193c3224a0ee3ef787483372025025aa0a760dd Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 14:18:55 -0500 Subject: [PATCH 4/8] finishing up containment --- public/game.js | 4 ++-- public/move.js | 62 +++++++++++++++++++++++++++++++------------------- 2 files changed, 41 insertions(+), 25 deletions(-) diff --git a/public/game.js b/public/game.js index cc456fe..b890563 100644 --- a/public/game.js +++ b/public/game.js @@ -10,11 +10,11 @@ $(function(){ , diry = ['sub', 'add'][Math.random() * 2 | 0]; move('#cat') + [dirx]('left', Math.random() * 30 | 0) + [diry]('top', Math.random() * 30 | 0) .contain({ top : '+430' // maintain cat at least 430px from top }) - [dirx]('left', Math.random() * 30 | 0) - [diry]('top', Math.random() * 30 | 0) .duration('1s') .ease('out') .then() diff --git a/public/move.js b/public/move.js index a7194a9..da059c0 100644 --- a/public/move.js +++ b/public/move.js @@ -380,22 +380,22 @@ }; /* - * Checks if vendor property is set, vendor webkit is implied and hardcoded + * Checks if position property is set * * @param {String} prop */ - Move.prototype.hasProperty = function(prop) { - return typeof this._props['-webkit-' + prop] !== 'undefined'; + Move.prototype.hasPositionProperty = function(prop) { + return 'undefined' !== typeof this._props[prop]; }; /* - * Gets the value of a vendor property, vendor webkit is implied and hardcoded + * Gets the value of a position property * * @param {String} prop */ - Move.prototype.getProperty = function(prop) { - if( typeof this._props['-webkit-' + prop] !== 'undefined' ) { - return this._props['-webkit-' + prop]; + Move.prototype.getPositionProperty = function(prop) { + if( typeof this._props[prop] !== 'undefined' ) { + return this._props[prop]; } }; @@ -440,20 +440,16 @@ // selector containment } else if( typeof container === 'object' ) { - if( $.inArray('top',Object.keys(container)) ) - { + if( typeof container.top !== 'undefined' ) { this.setContainment('top',container.top); } - if( $.inArray('right',Object.keys(container)) ) - { + if( typeof container.right !== 'undefined' ) { this.setContainment('right',container.right); } - if( $.inArray('bottom',Object.keys(container)) ) - { - this.setContainment('bottom',container.top); + if( typeof container.bottom !== 'undefined' ) { + this.setContainment('bottom',container.bottom); } - if( $.inArray('left',Object.keys(container)) ) - { + if( typeof container.left !== 'undefined' ) { this.setContainment('left',container.left); } } @@ -485,6 +481,33 @@ return this; }; + Containment.prototype.applyContainment = function(move) { + $.each(this._prop, function(prop, val) { + if (move.hasPositionProperty(prop)) { + var operator = val.split('')[0] + , value = parseInt(val.split('').slice(1).join('')) + , move_property = parseInt(move.getPositionProperty(prop).replace(/(.*)px$/,'$1')) + ; + if( operator === '+' ) + { + // apply greater than + if( move_property < value ) + { + move.set(prop,value); + } + } + else if( operator === '-' ) + { + // apply less than + if( move_property > value ) + { + move.set(prop,value); + } + } + } + }.bind(this)); + }; + /** * Get containment singleton * @@ -508,7 +531,6 @@ */ Move.prototype.setContainment = function(prop, val) { - console.log(this.getContainment()); return this.getContainment().set(prop,val); }; @@ -624,12 +646,6 @@ */ Move.prototype.then = function(fn){ - /* - if( $( this.el ).attr('id') === 'cat' ) - { - console.log(fn); - } - */ // invoke .end() if (fn instanceof Move) { this.on('end', function(){ From 972d394cadd0119311549e5025cacc21728434be Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 15:44:43 -0500 Subject: [PATCH 5/8] added support for competing values on single containment property --- public/game.js | 2 +- public/move.js | 96 +++++++++++++++++++++++++++++++++++++----------- public/style.css | 2 +- 3 files changed, 77 insertions(+), 23 deletions(-) diff --git a/public/game.js b/public/game.js index b890563..775ff6f 100644 --- a/public/game.js +++ b/public/game.js @@ -13,7 +13,7 @@ $(function(){ [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) .contain({ - top : '+430' // maintain cat at least 430px from top + top : '+430-435' // maintain cat at least 430px from top }) .duration('1s') .ease('out') diff --git a/public/move.js b/public/move.js index da059c0..85e613a 100644 --- a/public/move.js +++ b/public/move.js @@ -433,11 +433,33 @@ return this; }; + /* + * Set containment for Move object + * + * @param {Object} container + */ Move.prototype.contain = function(container) { if( typeof container === 'string' ) { // selector containment + var container = $(container); + if( container.length > 0 ) + { + var offset = container.offset() + , left = offset.left + , top = offset.top + , right = left + container.width() + , bottom = top + container.height() + ; + + this.contain({ + left : '+' + left, + top : '+' + top, + right : '-' + right, + bottom : '-' + bottom + }); + } } else if( typeof container === 'object' ) { if( typeof container.top !== 'undefined' ) { @@ -466,7 +488,7 @@ */ Containment = function() { // stub - } + }; /* * Set containment property @@ -481,33 +503,63 @@ return this; }; + /* + * Apply containment for each containment property, allows for competing constraints for single properties, as well + * + * @param {Move} move + * TODO: Allow for competing, converse properties when only a single property is set for x and y + */ Containment.prototype.applyContainment = function(move) { $.each(this._prop, function(prop, val) { - if (move.hasPositionProperty(prop)) { - var operator = val.split('')[0] - , value = parseInt(val.split('').slice(1).join('')) - , move_property = parseInt(move.getPositionProperty(prop).replace(/(.*)px$/,'$1')) - ; - if( operator === '+' ) - { - // apply greater than - if( move_property < value ) - { - move.set(prop,value); - } - } - else if( operator === '-' ) + if( move.hasPositionProperty(prop) ) { + var operations = {}; + operations[val[0]] = { + value : parseInt(val.split('').slice(1).join('')), + prop : prop + }; + // two constraints + var split_vals = val.split(/[\+\-]/); + if( split_vals.length > 2 ) { - // apply less than - if( move_property > value ) - { - move.set(prop,value); - } + var second_attr = (val.indexOf('+') > val.indexOf('-')) ? '+' : '-'; + operations = {}; + operations[val[0]] = { + value : split_vals[1], + prop : prop + }; + operations[second_attr] = { + value : split_vals[2], + prop : prop + }; } + $.each(operations, function(operator, operation) { + this.applyPropertyContainment(move,operator,operation.prop,operation.value); + }.bind(this)); } }.bind(this)); }; + Containment.prototype.applyPropertyContainment = function(move,operator,prop,value) + { + var move_property = move_property = parseInt(move.getPositionProperty(prop).replace(/(.*)px$/,'$1')); + if( operator === '+' ) + { + // apply greater than + if( move_property < value ) + { + move.set(prop,value); + } + } + else if( operator === '-' ) + { + // apply less than + if( move_property > value ) + { + move.set(prop,value); + } + } + } + /** * Get containment singleton * @@ -691,7 +743,9 @@ // emit "start" event this.emit('start'); - + if( $(this.el).attr('id') === 'cat' && 'undefined' !== typeof this.parent ) { + console.log('transforming'); + } // transforms if (this._transforms.length) { this.setVendorProperty('transform', this._transforms.join(' ')); diff --git a/public/style.css b/public/style.css index e43d66c..fd5c757 100644 --- a/public/style.css +++ b/public/style.css @@ -183,4 +183,4 @@ body { } .grass { -webkit-animation: wind 5s alternate infinite; -} \ No newline at end of file +} From 0e7088d2c9510dafa3c56891fd19fd8e778320ec Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 15:47:47 -0500 Subject: [PATCH 6/8] reverted $ to o in game.js --- public/game.js | 41 +++++++++++++++++++++-------------------- public/move.js | 2 +- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/public/game.js b/public/game.js index 775ff6f..b1823e7 100644 --- a/public/game.js +++ b/public/game.js @@ -1,10 +1,11 @@ - var min = Math.min + var o = $ + , min = Math.min , max = Math.max; // cat -$(function(){ +o(function(){ function walk() { var dirx = ['sub', 'add'][Math.random() * 2 | 0] , diry = ['sub', 'add'][Math.random() * 2 | 0]; @@ -13,7 +14,7 @@ $(function(){ [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) .contain({ - top : '+430-435' // maintain cat at least 430px from top + top : '+430-460' // maintain cat at least 430px and no more than 460px from top }) .duration('1s') .ease('out') @@ -29,7 +30,7 @@ $(function(){ // bird sprites -$(function(){ +o(function(){ var birds = document.querySelectorAll('.bird'); birds.each = [].forEach; birds.each(function(bird){ @@ -42,7 +43,7 @@ $(function(){ // bird movement -$(function(){ +o(function(){ var birds = document.querySelectorAll('.bird'); birds.each = [].forEach; @@ -71,23 +72,23 @@ $(function(){ // hills -$(function(){ +o(function(){ // TODO: separate fences for different intensities - var hills = $('.hill') + var hills = o('.hill') , intensity = .005 , offsets = hills.map(function(i){ - off = $(this).offset(); + off = o(this).offset(); off.intensity = intensity / ++i; return off; }); - $(document).mousemove(function(e){ + o(document).mousemove(function(e){ var x = e.clientX , y = e.clientY; hills.each(function(i){ var off = offsets[i]; - $(this).css({ + o(this).css({ top: off.top , left: off.left - x * off.intensity }); @@ -97,14 +98,14 @@ $(function(){ // guy -$(function(){ - var guy = $('#guy') - , cat = $('#cat') - , hat = $('#guy-hat') - , leftEye = $('#guy-eye-left') - , rightEye = $('#guy-eye-right') - , leftEyeBounds = $('#guy-eye-left-bounds') - , rightEyeBounds = $('#guy-eye-right-bounds') +o(function(){ + var guy = o('#guy') + , cat = o('#cat') + , hat = o('#guy-hat') + , leftEye = o('#guy-eye-left') + , rightEye = o('#guy-eye-right') + , leftEyeBounds = o('#guy-eye-left-bounds') + , rightEyeBounds = o('#guy-eye-right-bounds') , min = Math.min , max = Math.max , dx = 10 @@ -150,7 +151,7 @@ $(function(){ setInterval(function(){ if (!prev) { // TODO: transition - var off = $('#cat').offset(); + var off = o('#cat').offset(); lookat(off.left, off.top); } prev = null; @@ -158,7 +159,7 @@ $(function(){ // look at cursor var prev; - $(document).mousemove(function(e){ + o(document).mousemove(function(e){ prev = e; lookat(e.clientX, e.clientY); }); diff --git a/public/move.js b/public/move.js index 85e613a..911cc70 100644 --- a/public/move.js +++ b/public/move.js @@ -1,4 +1,4 @@ - +var o = $; /*! * move * Copyright(c) 2011 TJ Holowaychuk From 812f09a34532ffea024ec4a38b9f2d193b8a01e3 Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 16:02:48 -0500 Subject: [PATCH 7/8] updated to support selector containment, illustrated in example --- index.html | 1 + public/game.js | 3 +++ public/move.js | 15 +++++---------- public/style.css | 19 +++++++++++++++++++ 4 files changed, 28 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index a0e9094..63badec 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,7 @@
+
diff --git a/public/game.js b/public/game.js index b1823e7..e235c1e 100644 --- a/public/game.js +++ b/public/game.js @@ -13,9 +13,12 @@ o(function(){ move('#cat') [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) + /* .contain({ top : '+430-460' // maintain cat at least 430px and no more than 460px from top }) + */ + .contain('#cat_box') .duration('1s') .ease('out') .then() diff --git a/public/move.js b/public/move.js index 911cc70..c28fca3 100644 --- a/public/move.js +++ b/public/move.js @@ -1,4 +1,3 @@ -var o = $; /*! * move * Copyright(c) 2011 TJ Holowaychuk @@ -288,7 +287,7 @@ var o = $; */ Move.prototype.scaleX = function(n){ - return this.transform('scaleX(' + n + ')') + return this.transform('scaleX(' + n + ')'); }; /** @@ -300,7 +299,7 @@ var o = $; */ Move.prototype.scaleY = function(n){ - return this.transform('scaleY(' + n + ')') + return this.transform('scaleY(' + n + ')'); }; /** @@ -454,10 +453,8 @@ var o = $; ; this.contain({ - left : '+' + left, - top : '+' + top, - right : '-' + right, - bottom : '-' + bottom + left : '+' + left + '-' + right, + top : '+' + top + '-' + bottom, }); } } @@ -743,9 +740,7 @@ var o = $; // emit "start" event this.emit('start'); - if( $(this.el).attr('id') === 'cat' && 'undefined' !== typeof this.parent ) { - console.log('transforming'); - } + // transforms if (this._transforms.length) { this.setVendorProperty('transform', this._transforms.join(' ')); diff --git a/public/style.css b/public/style.css index fd5c757..4a8d100 100644 --- a/public/style.css +++ b/public/style.css @@ -82,6 +82,25 @@ body { background: url(images/hill-1.png) no-repeat; z-index: 10; } +/* +#cat { + position: absolute; + top: 440px; + left: 540px; + width: 53px; + height: 60px; + background: url(images/cat.png) no-repeat; + z-index: 20; +} +*/ +#cat_box { + position: absolute; + top: 400px; + left: 500px; + width: 400px; + height: 200px; + border:1px solid red; +} #cat { position: absolute; top: 440px; From e3166e87567215e8eb9f0366713653376df77b27 Mon Sep 17 00:00:00 2001 From: Ryan Bales Date: Wed, 31 Aug 2011 17:06:53 -0500 Subject: [PATCH 8/8] added converse property translation --- public/game.js | 7 +++++- public/move.js | 61 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 61 insertions(+), 7 deletions(-) diff --git a/public/game.js b/public/game.js index e235c1e..53fbeea 100644 --- a/public/game.js +++ b/public/game.js @@ -14,8 +14,13 @@ o(function(){ [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) /* + // will translate to top attr .contain({ - top : '+430-460' // maintain cat at least 430px and no more than 460px from top + bottom : '+30-50' + }) + // maintain cat at least 430px and no more than 460px from top + .contain({ + top : '+430-460' }) */ .contain('#cat_box') diff --git a/public/move.js b/public/move.js index c28fca3..16e7649 100644 --- a/public/move.js +++ b/public/move.js @@ -384,7 +384,14 @@ * @param {String} prop */ Move.prototype.hasPositionProperty = function(prop) { - return 'undefined' !== typeof this._props[prop]; + if( prop === 'top' || prop === 'bottom' ) + { + return 'undefined' !== typeof this._props['top'] || 'undefined' !== typeof this._props['bottom']; + } + if( prop === 'left' || prop === 'right' ) + { + return 'undefined' !== typeof this._props['left'] || 'undefined' !== typeof this._props['right']; + } }; /* @@ -538,21 +545,63 @@ Containment.prototype.applyPropertyContainment = function(move,operator,prop,value) { - var move_property = move_property = parseInt(move.getPositionProperty(prop).replace(/(.*)px$/,'$1')); + var move_position = move.translatePosition(prop,value); if( operator === '+' ) { // apply greater than - if( move_property < value ) + if( move_position.el_value < move_position.dest_value ) { - move.set(prop,value); + console.log(move_position.el_value + ' < ' + move_position.dest_value); + move.set(move_position.property,move_position.dest_value); } } else if( operator === '-' ) { // apply less than - if( move_property > value ) + if( move_position.el_value > move_position.dest_value ) + { + console.log(move_position.el_value + ' > ' + move_position.dest_value); + move.set(move_position.property,move_position.dest_value); + } + } + } + + Move.prototype.translatePosition = function(prop,value) + { + if (typeof this._props[prop] !== 'undefined') { + // return as-is + return { + property: prop, + dest_value: value, + el_value: parseInt(this.getPositionProperty(prop).replace(/(.*)px$/,'$1')) + }; + } + else { + // translate + var object_attr = (prop === 'top' || prop === 'bottom') ? 'height' : 'width'; + // set converse property + var property = 'top'; + if( prop !== 'bottom' ) { - move.set(prop,value); + if( $.inArray(prop,['left','right']) ) + { + property = (prop === 'left') ? 'right' : 'left'; + } else { + property = 'bottom'; + } + } + var window_val = $(document)[object_attr](); + console.log([window_val,document]); + var object_val = $(this.el)[object_attr](); + var converse_el_val = parseInt(this.getPositionProperty(property).replace(/(.*)px$/,'$1')); + var translated_el_val = window_val - converse_el_val - object_val; + var translated_dest_val = window_val - value - object_val; + console.log('converting ' + prop + ':' + converse_el_val + ' => ' + translated_el_val + ', window:' + window_val + ',object:' + object_val); + console.log('converting ' + property + ':' + value + ' => ' + translated_dest_val + ', window:' + window_val + ',object:' + object_val); + return { + property: property, + el_value: translated_el_val, + dest_value: translated_dest_val } } }