Comment déplacer un élément le long d'une trajectoire courbe en fonction des forces?

Question

EDIT: Je creusais dans le code source extrêmement bien documenté dans le lien de Decker (vector movement demo) et je suis assez confiant que je peux comprendre cela travailler une partie de votre code. Merci à tous pour votre aide: D

Je travaille sur le mouvement pour un jeu en javascript. Les flèches gauche et droite font pivoter une image d'un vaisseau spatial tandis que la flèche vers le haut l'accélère. En utilisant le degré de rotation et la vitesse, je peux calculer le mouvement en termes de x et y avec Math.sin() et Math.cos(), mais cela signifie que le navire se comporte comme une voiture. Voyant que c'est supposé être dans l'espace, je voudrais faire en sorte que la rotation du vaisseau n'affecte que son chemin en accélérant et en tenant compte du mouvement actuel du vaisseau.

Je foiré avec elle beaucoup et essayé divisant le mouvement en deux forces distinctes, la direction du courant et de la vitesse et la direction souhaitée, mais rien ne semble même pas proche de la façon dont il devrait se sentir.

Désolé si cela était source de confusion, voici le code simplifié pour le mouvement original:

function main() 
{ 
if(keyStates[39]) // Right arrow pressed? 
    ship.deg+=8; 
if(keyStates[37]) // Left arrow pressed? 
    ship.deg-=8; 
if(keyStates[38]) // Up arrow pressed? 
{ 
    if(ship.speed<16) 
     ship.speed+=1; 
} 
var shift=getXYshift(ship.deg,ship.speed); 
function getXYshift(deg,speed) 
{ 
    return {x:Math.round(Math.cos((90-deg)*Math.PI/180)*speed*-1), y:Math.round(Math.sin((90-deg)*Math.PI/180)*speed)}; 
} 
setTimeout(function(){ main() }, 50); 
} 

Answer 1

Vous pouvez utiliser un vecteur pour suivre la vitesse et la direction des navires et modifier la direction de ce vecteur lorsque la flèche vers le haut est pressée en vérifiant l'angle d'un second vecteur utilisé pour suivre l'angle actuel des navires.

Je recommande d'obtenir ce livre Supercharged Javascript Graphics ce qui explique en détail l'utilisation des vecteurs et bien plus encore.

Vous pouvez également voir le code source de l'un des exemples de livres ici at the authors website qui a un objet de gestion de vecteur qui pourrait s'avérer utile pour vous.

Answer 2

Utilisez-vous getXYshift après une presse à droite/gauche flèche? Vous ne devez l'utiliser que lorsque la flèche vers le haut est enfoncée. De cette façon, votre vaisseau va tourner sans accélérer dans n'importe quelle direction. Ne modifiez votre vélocité que lorsque vous appuyez sur la touche fléchée vers le haut et décélérez lorsque ce n'est pas le cas. Ne changez pas la vitesse avec les touches droite/gauche, utilisez-les pour changer la rotation de votre vaisseau.

Answer 3

Vous devez utiliser un concept mathématique connu comme un « vecteur » pour votre mouvement. Un vecteur est simplement une force et une direction. Ce vecteur sera appliqué à la coordonnée X, Y de votre vaisseau (en ignorant sa direction) à chaque image pour déterminer où dessiner le vaisseau. Lorsque vous accélérez, vous utiliserez la direction du navire et une valeur constante assignée à l'accélération pour former un vecteur qui peut être appliqué à votre vecteur de mouvement pour calculer son effet sur la vitesse.

Voici une introduction rapide aux vecteurs: http://www.khanacademy.org/science/physics/v/introduction-to-vectors-and-scalars, après avoir regardé la vidéo, vous devriez avoir une bonne idée de ce qu'il faut rechercher. De là, Google devrait être votre ami.

EDIT: Au-dessus quand je l'ai dit: « vous utiliserez la direction du navire fait face et une valeur constante affectée à l'accélération pour former un vecteur qui peut être appliqué à votre vecteur de mouvement pour le calcul de son effet sur la vitesse » I faisait référence à l'algèbre vectorielle. Si vous décidez d'utiliser des vecteurs pour résoudre votre problème, vous devrez utiliser le concept d'ajout de vecteurs pour accélérer. Lorsque vous appuyez sur la touche fléchée, vous générez un vecteur de magnitude m (où m peut être un nombre réel indiquant la vitesse à laquelle vous voulez accélérer) et une direction d (plus que probable cette valeur correspondra à la direction du vaisseau). Vous ajouterez ensuite ce nouveau vecteur au vecteur courant des navires pour obtenir le nouveau vecteur des navires après l'application de l'accélération pour le cadre en cours.Vous pouvez en lire plus ici: http://emweb.unl.edu/Math/mathweb/vectors/vectors.html

Vive et heureux de codage

Answer 4

Sur la base de ma faible connaissance physique:

Le navire a une vitesse avec une direction. Cela peut être exprimé comme un vecteur de votre espace, comme x pixels sur l'axe X, y pixels sur l'axe Y (et peut-être plus de dimensions) par seconde.

Ensuite, il a une vitesse de rotation, comme α degrés dans le sens antihoraire par seconde.

Pour calculer la course de votre bateau pendant une seconde, il suffit d'ajouter le vecteur de vitesse aux coordonnées. Et ajoutez la rotation à l'orientation actuelle. Pour modifier le vecteur de vitesse en fonction de la rotation et de l'accélération, vous devez construire un vecteur avec une longueur relative à l'accélération, dans le sens de l'orientation actuelle. Ajoutez ensuite le vecteur d'accélération au vecteur de vitesse.

Code Pseudo:

ship = { 
    coordinates: [0, 0], // space units 
    orientation: 0, // radiant 
    speed: [0, 0], // space units/time frame 
    rotation: 0 // radiant/time fram 
} 
function animatestep { 
    coordinates[0] += speed[0]; 
    coordinates[1] += speed[1]; 
    orientation += rotation; 
} 
onaccelerate = function { 
    speed[0] += cos(orientation) * acceleration; 
    speed[1] += sin(orientation) * acceleration; 
} 
onleft = function { 
    rotation++; 
} 
onright = function { 
    rotation--; 
} 

Notez que ce qui rend le vaisseau spatial se comporte vraiment comme un vaisseau spatial, parce que la rotation peut être difficile à arrêter. Au lieu d'utiliser une vitesse de rotation, vous devrez peut-être permettre de régler l'orientation du bateau étape par étape :-) Vous pouvez également définir des limites sur la rotation et l'accélération (sinon le navire éclate) et utiliser une vitesse maximale (comme le vitesse de la lumière, y compris different speed addition).