Bonjour à tous

Je suis à la recherche d'un moyen me permettant de déplacer une image au chargement d'une page WEB en utilisant JavaScript. Jusque là, je pense que ce n'est pas trop compliqué. Ce qui me pose problème, c'est que j'aimerais que l'image suive une trajectoire. Il s'agit en fait de déplacer une voiture dans les dunes.

Pourriez-vous m'aider?

Merci d'avance.

oula, là il faut que t'es de solide connaissance en Javascript.

Il faut que toute les coordonnées de tes dunes soit enregistré dans des variables, puis tu dois vérifier au fur et a mesure que tu avances ton objet, les collisions avec ces coordonnés pour corriger la direction.

C'est pas simple

Si l'image doit juste suivre la trajectoire, pas besoin de coriger quoi que ce soit

var dunes_x = new Array(
'0',
'2',
'3',
'8');
var dunes_y = new Array(
'24',
'18',
'21',
'22');
var i =0;
function deplace_img
{
  document.getElementById('mon_image').style.left = dunes_x[i];
  document.getElementById('mon_image').style.top = dunes_y[i];
  i++;
  setTimeOut('deplace_img', 50);
}

Enfin, c'est l'idée quoi

je suis plutôt d'accord avec misterrenaud sur le principe. Mais je le suis beaucoup moins pour le code. déjà il faut éviter l'utilisation de chaines de caractères dans un setTimeout (ou setInterval) car cela fait appel à eval et est plus gourmand en ressource et ralentit inutilement le script. Ensuite il est possible de faire la même chose sans variable globale, c'est plus propre (pour ce qui est des tableaux de coordonnées des dunes ça peut se discuter).

ça donnerait donc un code dans ce genre:

function deplace_img(i)
{
	if(isNaN(i)) i=0;

	//coordonée de l'image
	var dunes_x = [
		0,
		2,
		3,
		8];
	var dunes_y = [
		24,
		18,
		21,
		22];

	//déplacement de l'image
	document.getElementById('mon_image').style.left = dunes_x[i]+'px';
	document.getElementById('mon_image').style.top = dunes_y[i]+'px';

	//récursivité de la fonction en attendant 50ms
	if(i+1<dunes_x.length) setTimeout(function(){deplace_img(i+1);}, 50); 
}

Ensuite tu peux jouer sur le temps du setTimeout pour ralentir ton animation (mais cela donnera un effet plus saccadé) ou augmenter on nombre de points pour décrire tes dunes (ne pas se contenter d'uniquement des points haut et bas mais aussi des points intermédiaires).

Si ton but est de déplacer une voiture dans des dunes peut-être que tu voudras incliner ta voiture. Là c'est plus compliqué soit tu créés plusieurs images représentant des inclinaisons différentes de ta voiture et tu affiches celle qui correspond soit tu utilises les propriétés CSS de HTML5 (mais très peu de navigateurs supportent ces fonctionnalités), soit tu le créés en SVG (Il faut installer un plugin pour IE, tous les autres navigateurs le supportent nativement) ou avec Canvas (IE ne le gère pas encore).
Donc si vraiment tu veux incliner ta voiture, je pense que le plus simple est d'utiliser des images différentes.

Oui
Tout a fait d'accord avec toi Restimel.
Pour le eval du setTimeOut, je ne savais pas :$
Mais j'y penserais la prochaine fois.