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..63badec 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -35,6 +35,7 @@
+
- \ No newline at end of file + diff --git a/public/game.js b/public/game.js index 25ec154..53fbeea 100644 --- a/public/game.js +++ b/public/game.js @@ -1,5 +1,5 @@ -var o = $ + var o = $ , min = Math.min , max = Math.max; @@ -13,6 +13,17 @@ o(function(){ move('#cat') [dirx]('left', Math.random() * 30 | 0) [diry]('top', Math.random() * 30 | 0) + /* + // will translate to top attr + .contain({ + bottom : '+30-50' + }) + // maintain cat at least 430px and no more than 460px from top + .contain({ + top : '+430-460' + }) + */ + .contain('#cat_box') .duration('1s') .ease('out') .then() @@ -108,6 +119,10 @@ o(function(){ , dx = 10 , dy = 2; + cat.click(function() { + alert('mrrrrrow'); + }); + var go = guy.offset() , gox = go.left , goy = go.top; @@ -156,4 +171,4 @@ o(function(){ 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..16e7649 100644 --- a/public/move.js +++ b/public/move.js @@ -1,4 +1,3 @@ - /*! * move * Copyright(c) 2011 TJ Holowaychuk @@ -288,7 +287,7 @@ */ Move.prototype.scaleX = function(n){ - return this.transform('scaleX(' + n + ')') + return this.transform('scaleX(' + n + ')'); }; /** @@ -300,7 +299,7 @@ */ Move.prototype.scaleY = function(n){ - return this.transform('scaleY(' + n + ')') + return this.transform('scaleY(' + n + ')'); }; /** @@ -379,6 +378,33 @@ return this; }; + /* + * Checks if position property is set + * + * @param {String} prop + */ + Move.prototype.hasPositionProperty = function(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']; + } + }; + + /* + * Gets the value of a position property + * + * @param {String} prop + */ + Move.prototype.getPositionProperty = function(prop) { + if( typeof this._props[prop] !== 'undefined' ) { + return this._props[prop]; + } + }; + /** * Set a vendor prefixed `prop` with the given `val`. * @@ -413,6 +439,199 @@ 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 + '-' + right, + top : '+' + top + '-' + bottom, + }); + } + } + else if( typeof container === 'object' ) { + if( typeof container.top !== 'undefined' ) { + this.setContainment('top',container.top); + } + if( typeof container.right !== 'undefined' ) { + this.setContainment('right',container.right); + } + if( typeof container.bottom !== 'undefined' ) { + this.setContainment('bottom',container.bottom); + } + if( typeof container.left !== 'undefined' ) { + this.setContainment('left',container.left); + } + } + this.on('start',function() { + this.getContainment().applyContainment(this) + }.bind(this)); + // 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; + }; + + /* + * 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 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 ) + { + 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_position = move.translatePosition(prop,value); + if( operator === '+' ) + { + // apply greater than + 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); + } + } + else if( operator === '-' ) + { + // apply less than + 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' ) + { + 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 + } + } + } + + /** + * 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) + { + 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. @@ -536,6 +755,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/style.css b/public/style.css index e43d66c..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; @@ -183,4 +202,4 @@ body { } .grass { -webkit-animation: wind 5s alternate infinite; -} \ No newline at end of file +} 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 );