I have a game I'm making in adobe animate HTML canvas. In my code below Is there a way to combine all of the stateItems[].stateplace1 =this.state so I don't have like 50 different variations? I tried make the state1s the child of the StateItems but it still feels very derivative.
If stateItems and state1s were two different arrays is there a way to call the first item (Florida) of stateItems to the first target(state1)and so forth so they are "linked" so speak. Would something like that work and how would I go about do that?
I'm very new to javascript so my apologies if there is a super easy solution.
Edit:
The StateItems are individual symbols in Animate of the actual United States of America example: Florida is a state in the literal United States so it's part of my StateItem array. The stateplace is where the states will be placed and stateplace is one symbol and stateplace 1 2 and 3 are instances of stateplace. I just wanted to know if there was a way to cleanup the stateplace1s in the StateItems loop so there isn't 50 stateItems[0].stateplace1 = this.stateplace1;
I just couldn't figure out another way to connect each StateItem to its corresponding stateplace. The code works the way I need it to I just don't know if theres a way to clean it up a bit. I hope that clears things up.
var stateItems = [this.florida, this.alabama, this.southcarolina]
// we apply the same code for each symbol with the for loop
for(var i = 0; i<stateItems.length; i++){
stateItems[i].on("mousedown", onMouseDown.bind(this));
stateItems[i].on("pressmove", onMouseMove.bind(this));
stateItems[i].on("pressup", onMouseUp.bind(this));
stateItems[0].stateplace1 = this.stateplace1;
stateItems[1].stateplace1 = this.stateplace2;
stateItems[2].stateplace1 = this.stateplace3;
stateItems[i].originX = stateItems[i].x;
stateItems[i].originY = stateItems[i].y;
}
// mouse down event
function onMouseDown(evt){
var item = evt.currentTarget;
item.offset = {x:0, y:0};
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.offset.x = pt.x - item.x;
item.offset.y = pt.y - item.y;
item.drag = true;
}
// mouse up event
function onMouseUp(evt){
var item = evt.currentTarget;
item.drag = false;
var pt = item.localToLocal(item.dot.x, item.dot.y, item.state1.hitBox);
if(item.stateplace1.hitBox.hitTest(pt.x, pt.y) ){
item.x = item.stateplace1.x;
item.y = item.stateplace1.y;
item.mouseEnabled = false; // prevents object from being move when place correctly
}else{
item.x = item.originX;
item.y = item.originY;
}
}
function onMouseMove(evt){
var item = evt.currentTarget;
if (item.drag){
var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);
item.x = pt.x - item.offset.x;
item.y = pt.y - item.offset.y;
}
// mouse move event
}