My game board
Hello , recently I started to deal with the object of Canvas and make the game a series of Atari . I have a question on how to use the methods or Canvas object is best done to my character stopped from touching the walls and move around certain tracks ? I tried to conditions such as:
if (pozX > 180 && pozX < 190) {
pozX = 185
}
Instead doing collision testing...
Map out the acceptable paths for your game characters
For example, here is part of your game board.
Here is a corresponding map of the acceptable paths. "1" represents an allowed move while "0" represents a disallowed move (a game wall). Edit: Ouch! I messed up the map in the lower right -- pardons!
Now you can refer to your acceptable move map when the player presses the arrow keys to move.
For example, if the player starts in the upper left (they start at the "blue 1"). They can move right and down because those moves map to "1"s. But they cannot move up or left because those moves map to "0"s.
Related
I have a 3D character along with several predefined positions on the floor. Is there a way to check if a position is behind the 3D character and not in front or sideways?
I’ve included a rough sketch of what I’m trying to achieve (sorry for the poor drawing). Essentially I would like to return all of the positions of the red circles within the red lines and exclude all other circles outside of these two lines.
Is this possible? If so, is there any suggestion on how I can achieve this? I’m sorry but I don’t actually know which functions to use from Three JS for something like this or if it is possible.
Thank you!
Yes, it's possible.
You start out by first checking if a point/circle is behind the player. You do this by getting the dot product between the direction player is facing (a unit vector) and the direction vector to the circle (normalize it so that it's also a unit vector). If the values dotProduct <= 0 then the circle is behind your player.
(unit vector means that your vector has a magnitude of one. Which is a fancy way of saying your x/y/z will never go beyond 1)
Code example
// Let's assume that the following code is in some sort of loop, yes
// Get the direction vector to the circle
const directionVect = circle.position.clone().sub(player.position).normalize();
// If your player is a camera you can get the direction like so
const playerFacing = player.getWorldDirection(new THREE.Vector3());
// Orientation
if (playerFacing.dot(directionVect) <= 0) {
// Circle is behind the player
// ...to be continued...
} else {
return;
}
Now that you know which circles are behind your player, you can get the circles within the cone. This is done by getting the angle between the player's position and the circle's position. Then check that the angle fits some criteria (e.g. the angle can't be more than 45deg from back of player).
// ...
// Orientation
if (playerFacing.dot(directionVect) <= 0) {
// Circle is behind the player
const angle = player.position.angleTo(circle.position);
if (angle < Math.PI * 0.25) {
// Do something with circle
}
} else {
return;
}
In phaser 3 I use overlap to check for collision. My code follows:
//bulletA is an array(one of the 2 arrays where collison is being checked) it contains all my bullet sprites
//enemy1 is an array containing all the enemies, which I am testing for collision with my bullets. It contains all my enemy sprites
this.physics.add.overlap(bulletA, enemy1, collide1, null, this);
The collision detection works fine(I tested using console.log on collision). However, I need to be able to tell which specific enemy sprite in the enemy1 array is colliding with my bullets. This needs to happen so that I can play an explosion animation on the enemy, and remove that specific one from the game. Is there any way to get the specific element of the array on which overlap is being used?
The overlap function takes a callback that return the two collided object
https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.ArcadePhysics.html#overlap
For instance
overlap(bulletA, enemy1, collide1)
function collide1 (ob1, ob2) {
// ob1 is the bullet that collided with the enemy
// ob2 is the enemy that collided with the bullet
}
I'm making a game with HTML5. With javascript, I'm making my character move when the user presses the arrow keys. The animation is made up of 6 sprites.
The thing is when I hold down the right arrow key (for example), my character moves smoothly but seems to be moving too fast. It's like a little bird flapping his wings so rapidly that you can barely see the appearance of the character.
Code snippet:
if (38 in keysDown) { // Player holding up
if (character.y>=0)
{
character.y -= character.speed * modifier;
position++;
if(position > NUM_POSITION)
position = 0;
}
}
My code implements the requestAnimationFrame and modifier (to manipulate the speed of the character per second).
I wonder how other people deal with a character that seems to be walking so fast. I'm not saying that the character TRAVELS across the page fast because I can just reduce the speed. I'm saying the character switches sprites so rapidly that you can barely see him unless you stop moving.
I found this example jsfiddle. In that case if you increase the x variable, the animation become faster.
I hope I could be a good example for your problem.
var elem=document.getElementById("toChange"); var x=0;
function moreVisible() {
if(x==1)clearInterval(t);
x+=0.05;
elem.style.opacity=x;
elem.style.filter="alpha(opacity="+(x*100)+")"; }
var t=setInterval(moreVisible,25);
I am trying to create HTML5 game that similar to Sushi Cat game. I followed a similar tutorial from Emanuele Feronato's blog post and then came up with the structure like the picture A in this image, where the gray orbits are allowed to penetrate each other, and the red lines are distantConstraint.
But the problem is when the blob fell from a high place (or hitting corner), it becomes like in picture B.
I tried to use spring, different constraint force, smaller orbits, but they are not working properly.
My questions:
What is the solution for this? Or where can I find the solution on the web?
Is there any other js physics engine that has a specific feature to do this task?
Remove the symmetry
Just add some additional constraints to the points. The current symmetry of the shape means that round and folded in half are both valid and relaxed configurations.
Radial constraints.
Using one of the lines from the center to the outside as a referance, give each spoke an offset angle from that line.
Then each outside point will be moved as follows.
Get angle of ref line.
var ang = Math.atan2(refLine.p2.y - refLine.p1.y, refLine.p2.x - refLine.p1.x);
Then for each line move the end point towards its desired relative angle position.
// line is a spoke line with a property angle that is the angle from the
// reference line
var x = refLine.p1.x; // get center point
var y = refLine.p2.y;
// get position relative to ref ang
line.x = Math.cos(line.angle + ang) * line.length + x;
line.y = Math.sin(line.angle + ang) * line.length + y;
Do that for each spoked line and apply it after you apply the line length constraints.
In referance to the image you gave the line from center to 12 o'clock is the reference line then the other spoked lines will have angles restrained as follows.
1 o'clock is 30deg from ref
2 o'clock is 60
3 is 90 so on to 6 at 180deg
And the other direction
11 o'clock is -30deg from ref
10 o'clock is -60 and so on
You will be able to ignore the 6 o'clock line incase giving it a constraint makes the object want to roll to the right.
Only one
This now means that there is only one solution to the possible states rather than the many that you had.
The reason why the blob folds into itself, is because gravity will squish the blob points and the distance joints will find a new valid configuration. The job of the distance joint is just to maintain a given distance between two points, and it doesn't really do anything to prevent the self-folding.
An alternative approach is using Prismatic Joints (also called "slider joints"). With prismatic joints, the outer blob circles would slide along an axis radially from the center of the blob. To make the blob springy, you could add some kind of springs between the blob center and the circles. If the blob still self-folds, you could add limits to the prismatic joints, so the circles can only slide a certain distance.
This video demonstrates prismatic joints in a similar fashion, using the RUBE physics editor (using box2d under the hood).
A similar scene was made using p2.js physics engine, read more here. (direct link to demo). The part of the code that constructs the Prismatic Joints in the p2.js demo is:
// Constrain the capsule body to the center body.
// A prismatic constraint lets it move radially from the center body along one axis
var prismatic = new p2.PrismaticConstraint(wheelBody, body, {
localAnchorA : [0, 0],
localAnchorB : [0, 0],
localAxisA : [Math.cos(angle), Math.sin(angle)],
disableRotationalLock: true, // Let the capsule rotate around its own axis
collideConnected: true
});
In JavaScript, there are several ports of Box2D available which have the Prismatic Joint. p2.js has PrismaticConstraint.
Constant Volume Joint may be what you are looking for. As its name suggests, it tries to maintain the volume it has upon creation despite impulses from outside, much like a water balloon.
Here is a demo.
A working example with Box2dweb can be found here.
If you are interested in creating blobs with the creative application of more standard joints, this article comes to my mind.
I'm having trouble with a javascript app I am currently working on. It's a boat design thing used to calculate hydrostatics data of yacht hulls.
The trouble I'm having is that I have two functions that are interrelated and both need to arrive at a specific result.
To clarify, the user inputs a design displacement and the hull is moved up or down until the immersed volume equals the design displacement.
The user also inputs a longitudinal position for the center of gravity, and the hull is pitched until the longitudinal position of the center of buoyancy (centroid of the immersed volume) aligns with the center of gravity.
However, pitching the hull will change the displacement, and moving the hull up or down will change the position of the center of buoyancy.
What I currently do (pseudocode)
function raiseAndPitch
while a < maxIterations
if boat.volume < designVolume
move boat down
else if boat.volume > designVolume
move boat up
else
done
a++
while b < maxIterations
if boat.cg.x > designCG.x
pitch boat forward
else if boat.cg.x < designCG.x
pitch boat aft
else
done
b++
if boat.cg.x == designCG.x && boat.volume == designVolume
return data
else
raiseAndPitch
I have a maximum number of recursions in place.
However this sometimes fails to converge even with a large number of recursions for both parameters when a very small movement in one or the other creates a big change in either displacement volume or center of buoyancy position.
Not shown in the pseudocode is the way I converge on the values, please indicate if it's relevant to my question and I will add it.
Is there a better way to do this that would allow me to make sure that both parameters get to the required values at the same time ?