<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>src/jquery.collision.js</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssgrids/cssgrids-min.css"> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> <script src="http://yui.yahooapis.com/combo?3.5.1/build/yui/yui-min.js"></script> </head> <body class="yui3-skin-sam"> <div id="doc"> <div id="hd" class="yui3-g header"> <div class="yui3-u-3-4"> <!-- <h1><img src="../assets/css/logo.png" title=""></h1> --> <h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1> </div> <div class="yui3-u-1-4 version"> <em>API Docs for: </em> </div> </div> <div id="bd" class="yui3-g"> <div class="yui3-u-1-4"> <div id="docs-sidebar" class="sidebar apidocs"> <div id="api-list"> <h2 class="off-left">APIs</h2> <div id="api-tabview" class="tabview"> <ul class="tabs"> <li><a href="#api-classes">Classes</a></li> <li><a href="#api-modules">Modules</a></li> </ul> <div id="api-tabview-filter"> <input type="search" id="api-filter" placeholder="Type to filter APIs"> </div> <div id="api-tabview-panel"> <ul id="api-classes" class="apis classes"> <li><a href="../classes/Collision.html">Collision</a></li> <li><a href="../classes/Coords.html">Coords</a></li> <li><a href="../classes/Gridster.html">Gridster</a></li> </ul> <ul id="api-modules" class="apis modules"> </ul> </div> </div> </div> </div> </div> <div class="yui3-u-3-4"> <div id="api-options"> Show: <label for="api-show-inherited"> <input type="checkbox" id="api-show-inherited" checked> Inherited </label> <label for="api-show-protected"> <input type="checkbox" id="api-show-protected"> Protected </label> <label for="api-show-private"> <input type="checkbox" id="api-show-private"> Private </label> <label for="api-show-deprecated"> <input type="checkbox" id="api-show-deprecated"> Deprecated </label> </div> <div class="apidocs"> <div id="docs-main"> <div class="content"> <h1 class="file-heading">File: src/jquery.collision.js</h1> <div class="file"> <pre class="code prettyprint linenums"> /* * jquery.collision * https://github.com/ducksboard/gridster.js * * Copyright (c) 2012 ducksboard * Licensed under the MIT, GPL licenses. */ ;(function($, window, document, undefined){ var defaults = { colliders_context: document.body, on_overlap: function(collider_data){}, on_overlap_start : function(collider_data){ // console.log('the element START being a collider', collider_data); }, on_overlap_stop : function(collider_data){ // console.log('the element STOP being a collider', collider_data); } }; /** * Collision * * @class Collision * @uses Coords * @param {HTMLElement} element An Attribute name or object property path * @param {String|HTMLElement|Array} colliders An Attribute name or object property path * @param {Object} [options] An Attribute name or object property path * @param {Function} [options.on_overlap] An Attribute name or object property path * @param {Function} [options.on_overlap_start] An Attribute name or object property path * @param {Function} [options.on_overlap_stop] An Attribute name or object property path * @return {Object} dasdasdadasd * @constructor */ function Collision(element, colliders, options) { this.options = $.extend(defaults, options); this.$element = element; this.last_colliders = []; this.last_colliders_coords = []; if (typeof colliders === 'string' || colliders instanceof jQuery) { this.$colliders = $(colliders, this.options.colliders_context).not(this.$element); }else{ this.colliders = $(colliders); } this.init(); } var fn = Collision.prototype; fn.init = function() { this.find_collisions(); }; fn.overlaps = function(a, b) { var x = false; var y = false; if ((b.x1 >= a.x1 && b.x1 <= a.x2) || (b.x2 >= a.x1 && b.x2 <= a.x2) || (a.x1 >= b.x1 && a.x2 <= b.x2) ) { x = true; } if ((b.y1 >= a.y1 && b.y1 <= a.y2) || (b.y2 >= a.y1 && b.y2 <= a.y2) || (a.y1 >= b.y1 && a.y2 <= b.y2) ) { y = true; } return (x && y); }; fn.detect_overlapping_region = function(a, b){ var regionX = ''; var regionY = ''; if (a.y1 > b.cy && a.y1 < b.y2) { regionX = 'N'; } if (a.y2 > b.y1 && a.y2 < b.cy) { regionX = 'S'; } if (a.x1 > b.cx && a.x1 < b.x2) { regionY = 'W'; } if (a.x2 > b.x1 && a.x2 < b.cx) { regionY = 'E'; } return (regionX + regionY) || 'C'; }; fn.calculate_overlapped_area_coords = function(a, b){ var x1 = Math.max(a.x1, b.x1); var y1 = Math.max(a.y1, b.y1); var x2 = Math.min(a.x2, b.x2); var y2 = Math.min(a.y2, b.y2); return $({ left: x1, top: y1, width : (x2 - x1), height: (y2 - y1) }).coords().get(); }; fn.calculate_overlapped_area = function(coords){ return (coords.width * coords.height); }; fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){ var last = this.last_colliders_coords; for (var i = 0, il = last.length; i < il; i++) { if ($.inArray(last[i], new_colliders_coords) === -1) { start_callback.call(this, last[i]); } } for (var j = 0, jl = new_colliders_coords.length; j < jl; j++) { if ($.inArray(new_colliders_coords[j], last) === -1) { stop_callback.call(this, new_colliders_coords[j]); } } }; fn.find_collisions = function(){ var self = this; var colliders_coords = []; var colliders_data = []; var $colliders = (this.colliders || this.$colliders); var count = $colliders.length; while(count--){ var $collider = self.$colliders ? $($colliders[count]) : $colliders[count]; var player_coords = self.$element.coords().update().get(); var $collider_coords_ins = ($collider.isCoords) ? $collider.update() : $collider.coords(); var collider_coords = $collider_coords_ins.get(); var overlaps = self.overlaps(player_coords, collider_coords); if (!overlaps) { continue; } var region = self.detect_overlapping_region(player_coords, collider_coords); //todo: make this if customizable if (region === 'C'){ var area_coords = self.calculate_overlapped_area_coords( player_coords, collider_coords); var area = self.calculate_overlapped_area(area_coords); var collider_data = { area: area, area_coords : area_coords, region: region, coords: collider_coords, player_coords: player_coords, el: $collider }; self.options.on_overlap.call(this, collider_data); colliders_coords.push($collider_coords_ins); colliders_data.push(collider_data); } } this.manage_colliders_start_stop(colliders_coords, self.options.on_overlap_stop, self.options.on_overlap_start); this.last_colliders_coords = colliders_coords; return colliders_data; }; fn.get_closest_colliders = function(){ var colliders = this.find_collisions(); var min_area = 100; colliders.sort(function(a, b){ if (a.area <= min_area) { return 1; } /* if colliders are being overlapped by the "C" (center) region, * we have to set a lower index in the array to which they are placed * above in the grid. */ if (a.region === 'C' && b.region === 'C') { if (a.coords.y1 < b.coords.y1 || a.coords.x1 < b.coords.x1) { return - 1; }else{ return 1; } } if (a.area < b.area){ return 1; } return 1; }); return colliders; }; //jQuery adapter $.fn.collision = function(collider, options) { return new Collision( this, collider, options ); }; }(jQuery, window, document)); </pre> </div> </div> </div> </div> </div> </div> </div> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script>prettyPrint();</script> <script src="../assets/js/yui-prettify.js"></script> <script src="../assets/../api.js"></script> <script src="../assets/js/api-filter.js"></script> <script src="../assets/js/api-list.js"></script> <script src="../assets/js/api-search.js"></script> <script src="../assets/js/apidocs.js"></script> </body> </html>