aminux Posted April 4, 2014 Share Posted April 4, 2014 I want to make a game, when you click on target, the DIV append an image in it,When i click on the face, you can see that the DIV append a bullet image, which is good. but when you click on the right arm, the position of the bullet is wrong. it's because the arm is transform: rotate(25deg); with CSS3.this is my screenshot http://i.imgur.com/oZ5VnD6.pngHow can i determine the right position of the bullets when i click on the arm ?thank you Quote Link to comment Share on other sites More sharing options...
kuuuurija Posted April 4, 2014 Share Posted April 4, 2014 Simplest solution would be create a separate div for "Bullets", have higher z-index and append the bullets there. Quote Link to comment Share on other sites More sharing options...
aminux Posted April 4, 2014 Author Share Posted April 4, 2014 Thank you for your help. My real question is not how to put the bullet, i put them with append jquery, but the position left and top are wrong.so, if i use a div for bullets what will be the good positions left and top as you can see in my example, when you click on the face, it works perfectly, but when you click on the right arm, it make the bullet in wrong position.because i put the bullet in a rotating Div. this is my screenshot http://i.imgur.com/oZ5VnD6.png is there something that i have to calculate, for getting the good positions, like sinus or cosinus things ? Thank you Quote Link to comment Share on other sites More sharing options...
ericjbasti Posted April 14, 2014 Share Posted April 14, 2014 Here is a modified version of what I do in my engine.var rotatedXY = function(obj) { var x = obj.x; var y = obj.y; var sin = Math.sin(obj._parent.angle); var cos = Math.cos(obj._parent.angle); obj._orbitX = (x * cos) - (y * sin); obj._orbitY = (x * sin) + (y * cos);}Something like the obj._orbitX, obj._orbitY values are what your looking for. Quote Link to comment Share on other sites More sharing options...
ultimatematchthree Posted May 17, 2014 Share Posted May 17, 2014 obj._orbitX = (x * cos) - (y * sin); obj._orbitY = (x * sin) + (y * cos);Just to add to this, if you're wondering where this formula came from, look up 2D rotation matrices. If you want to be able to deal with arbitrary transforms (taking scale, skew, etc. into consideration) it might be instructive to look at the source code for the globalToLocal method of the DisplayObject class of EaselJS. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.