CreateJS - Collision detection between two createjs.Containers -


i have working in desktop browser not on touch devices because update variables need on mouseover. around trying check collision detection between 2 containers , update needed variables. items should snap placeholder positions when collision between 2 detected. catch items , placeholders placed dynamically item must able snap placeholder.

 var placeholders,items,selecteditem,collision,startx, starty, snapx, snapy, xpos, ypos;  var stage = new createjs.stage("canvas");  createjs.touch.enable(stage);  createjs.ticker.addeventlistener("tick", tick);   function init(){       xpos = 0;       ypos = 120;        container = new createjs.container();       stage.addchild(container);        placeholders = new createjs.container();       placeholders.name = "placeholders"       stage.addchild(placeholders);        items = new createjs.container();       stage.addchild(items);        for(i=0;i<2;i++){            placeholder = new customcontainer(i, "#ff0000", 100,100);            placeholder.setbounds(0,0,100,100);            placeholder.cursor = "pointer";            placeholder.x = xpos;            placeholder.name = "placeholder"+i            container.addchild(placeholder)            xpos+= (placeholder.getbounds().width + 10);       }        xpos = 0;        for(j=0;j<2;j++){                item = new customcontainer(j, "#0000ff", 100,100);            item.active = false;            item.setbounds(0,0,100,100);            item.name = "item"+j;            item.x = xpos;            item.y = ypos;            item.startx = xpos;            item.starty = ypos;            container.addchild(item)            item.addeventlistener("mousedown", selectitem);             xpos+= (item.getbounds().width + 10);       }        stage.addchild(placeholders,items);  }   function selectitem(evt) {        selecteditem = evt.target.parent;       selecteditem.mouseenabled = false;       evt.addeventlistener("mousemove", function(ev) {            moveitem(ev);       })       evt.addeventlistener("mouseup", function(ev) {            selecteditem.mouseenabled = true;             if(collision){                 //new position based on hittest                 //selecteditem.x = ;                 //selecteditem.y = ;            }else{                 selecteditem.x = selecteditem.startx;                 selecteditem.y = selecteditem.starty;            }       })  }   function moveitem(evt){      pt = placeholders.globaltolocal(stage.mousex, stage.mousey);      obj = evt.target.parent;      obj.x = pt.x - 50;      obj.y = pt.y - 50;       //selecteditem collision placeholder      collision = obj.hittest(pt.x,pt.y)  }   function tick(evt) {      stage.update();  }   $(document).ready(init()); 

i not getting hittest right. can see working code below.

http://jsfiddle.net/non_tech_guy/2d68w/4/

the hittest test pixel-perfect hit. believe you're looking collision test. try this: https://github.com/olsn/collision-detection-for-easeljs


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -