I'm trying to build a motorbike game in html5 canvas with javascript.
Right now I have a wheel and a simple gravity which increases the position from the top of the canvas until the wheel hits the bottom of the canvas. When I start the game, the wheel just drops to the bottom of the canvas.
I want to create a curved ground for the wheel to ride on. The problem is that I don't know how to calculate if the wheel hits this ground.
Here is a illustration. I want the wheel to drop until it hits the curved ground, and if I'm moving the wheel, it needs to follow the shape's edge.
image http://i.minus.com/iFvy1dbnouvy6.png
I don't want to use any libraries or engines, only javascript and html5. Do you have any ideas or solutions?
Similar to the other answer, you can simply have an if statement that says
if tire.y < line(tire.x) then tire.y = line(tire.x) - 1
the line function can just be an array or some formula that will contain the y value of the line when given any x-value.
In order to detect when the wheel hits the ground, you should have the coordinates of the ground boundary (e.g.: a polyline) and the wheel's ray and center position.
You detect collision by checking that your wheel y coordinate (cener + ray) is below the y coordinate of your polyline at certain x(s). You should segment your polyline in a resonable way, by carefully selecting your endpoints.
Probably there are other ways to accomplish this task, but this is the first which I came out.
Here is the solution which you're looking for Collision Detection (elastic)..
.--------------------------------------------------------------------------------------------.
Here's a simple & Good tutorial for learning physics especially for Game Developers
Related
I am playing with phaser along with its isometric plugin. I am a still a newbie on the matter however.
I have 2 sprites and I want to check for intersection / overlap between them. They are 2d simple sprites. I want to check for intersection ONLY if they are side by side and that would be for some kind of melee attack.
I created an hitbox for the player (a rect) and created a function that detects if two rects intersect each other. I can actually detect collision that way but if the player is in a little bit lower position to the target (in the screen coordinate y) it also detects the collision.
I need a way to make sure the sprites are "aligned". How could I do this in isometric in order to make sprites interact with each other? I can give more informations if needed or provide code.
"Isometric" is just how you render the scene and shouldn't have anything to do with the collision logic. All the game objects live in the same 3D space so colliding sprites need 3d hitboxes.
Using Three.js, I have a scene with a bunch of lines. When the mouse moves, I use the standard raycaster method to check if the mouse is intersecting with any lines. This works fine if the mouse is moving slowly, but fails to handle the case where the mouse skips over a line because it is moving fast.
How would you find all the objects that intersect the screenspace line from the previous mouse position to the current mouse position using Three.js? Are there any builtin utilities that can help with this?
My current approach is to just take a bunch of samples on the line and test all of those using the raycaster, but that doesn't really fix the problem.
trivial(low performance, but easy to code) approach is to create a plane(given by Rays from each of the mouse points)
check for intersections with Lines (= edges of your objects),
THREE.Plane.intersectLine()
then discard intersections that do not lie between rays given by mouse points
some easy heuristic to reduce number of candidate objects would be to consider only objects that have bounding sphere centers closer to the plane than the radius
THREE.Plane.distanceToPoint(sphereCenter) < sphereRadius
you have to combine this with traditional raycast at start and end point to catch object that have face larger than the end-start length
The short story: I am trying to use THREE.TrackballControls to move the camera, but the (upside-down) x-z plane is where the x-y plane should be. Can anyone help?
The long story: I've been trying to add device orientation controls to a project. I have already used the THREE.TrackballControls to move the camera when mouse and touch are being used, and the direction the camera points feeds into other functionality. I am using v69 of three.js.
So, I have been looking into using THREE.DeviceOrientationControls to enable device orientation. Specifically, what I'm after is for rotation to be in the x-y plane when the device is upright in front of me and I turn around. Or in other words, when the device is face up on the table it is looking in the -ve z-direction, and when upside down it it looking in the +ve z-direction. Sounds fairly straightforward, right?
There are plenty of examples around to follow, but I seem to be stuck with axes incorrectly orientated, i.e. what should be my x-y plane is coming out as the x-z plane, but upside-down. I created a test page based on an example with a BoxGeometry cube I found, and then added red, yellow and blue spheres to the middle of the faces that corresponded to the +ve x-, y-, and z-directions respectively, and then pale versions of the same coloured spheres for the corresponding -ve directions. Testing this on an iPad confirmed that the scene axes and the real world axes were not lining up.
I have spent a bit of time trying to get to grips with how this Object works, and the main sticking point is in the function returned by setObjectQuaternion() which does the tricky bit:
...
return function (quaternion, alpha, beta, gamma, orient) {
euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
quaternion.setFromEuler(euler); // orient the device
quaternion.multiply(q1); // camera looks out the back of the device, not the top
quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) ); // adjust for screen orientation
}
...
where q1 is quaternion for a -pi/2 rotation around the x-axis, and zee is a unit z-axis vector.
I set up a jsfiddle here to help me debug this, but it wasn't rendering correctly on the iPad itself, so I had to add in some faking of orientation events, and plenty of logging, and continue on a normal desktop + console. This jsfiddle goes through each of the 6 basic orientations and sees whether the camera is looking in the direction I expect.
(Initially it would seem that a pi/2 rotation around the x-axis is what is required, but removing the quaternion.multiply(q1) doesn't fix it - I haven't even started looking at non-zero screen orientations yet.)
Ultimately, I'd like to make this more like the TrackballControls/OrbitControls with a target point that the camera always looks at (unless panned) and rotates around, once I've figured this "simple" stuff out.
Anybody have any ideas how I can orientate my camera properly?
I'm trying to write a script (javascript) in an API of a Virtual Table Top program so I can manipulate some tokens (Car Wars :)).
I'm sort of finding the answer, but it seems like I'm struggling and reinventing the wheel so I thought I'd ask for help. One reason I'm getting confused is the program returns results based on +y is down and Deg go clockwise which is different than what all the trig formulas want (counter clockwise and +y is up).
Here is what I have access to. Rectangle rotates around centre, Centre point(x,y), width, height, and rotation. I've got the code working for moving the rectangle in the direction of the rotation, side to side, up and down, etc. Now I need to be able to rotate it around any of the four corners or any point would be nice, but four corners are all thats needed.
It won't let me include an image since I'm new so I hope the description is good enough. I had an image all done up. :(
In the API I can't actually draw the rectangle, I can only set its rotation, and centre value. So my thought was if I can find the x,y of one corner currently, then rotate it the desired degs around the centre (I can do this easily by setting the rectangles rotation), find the new x,y of that same corner. Then I will know the offset and apply that to the centre (thats how the rectangle is moved as well).
So I need to be able to find the x,y of any corner of a rectangle at any given starting angle, then again at a new angle rotated at its centre. This offset would then be easily applied to the centre x,y and the rectangle would see to have rotated along one of its corners.
Thanks for any help you can give. I'm hoping I will eventually figure it out, just writing this description out actually has helped me think it through. But I'm currently stuck!
Konrad
The trick to rotating around an arbitrary point in 2d (eg, one of the four corners of the rectangle), is to first translate the vertices of the shape so that the point around which you want to rotate is in the origin (ie 0,0).
To achieve this:
1. Translate your rectangle by (-x, -y).
2. Rotate your rectangle by the desired angle.
3. Translate your rectangle by (x, y) to place it back where it originally was.
where (x,y) is the x/y coordinates of the point around which to rotate.
You can use negative angles to adjust for clockwise rotations.
There is a lot of info about this on the net, for example:
http://www.siggraph.org/education/materials/HyperGraph/modeling/mod_tran/2drota.htm
I want to create a game like Pong, and I want to know that if it is possible to create an AI (computer opponent) in JavaScript to control the right side. Pretend I have functions moveUp() and moveDown() for controlling the right paddles. So it is possible? Or will I have to use some kind of library?
Of course it is possible, a simple approach would just be to have the enemy attempt to follow the ball's current position on the y-axis. If the ball is lower than the center of the paddle, lower the paddle, etc...
There are a lot of other great frameworks that help in game creation, but learning and designing ones on your own from scratch is the best way.
Yes it very much is possible.
You may wish to start with a very simple AI: have the right paddle moveUp at a constant velocity, then moveDown when it hits the top, then repeat.
After you have that coded, you should be able to modify your AI routines to switch directions based on the y-component of the ball's velocity. Then you can modify the velocity of the paddle based on the x-component the ball's velocity.
After that, look at updating the paddle controls to move when they make contact the ball, w.r.t. the left paddles position (ie if the left paddle is ontop, attempt to hit the ball towards the bottom).
the math is simple enough but the platform is hardly the most efficient and it would of course depend on your degree of accuracy - the hard part would be the graphical aspect and for that it would make sense to use something simple like jquery animate or similar to manage the to and fro of the represented paddle(s) and ball