Modifier la position d'un élément et son parent dans javascript

$player est au centre de l'écran et peut être déplacé à 360 suivant la direction de l'angle de la souris en continu, quand je le déplace, je change également la position de $map dans la direction opposée, maintenir le joueur au centre et la création d'un « mouvement » effet sur la carte ...Modifier la position d'un élément et son parent dans javascript

C'est tiré sur mousedown:

var top1 = $map.offset().top; 
var left1 = $map.offset().left; 
var top2 = ($player.offset().top - $player.height()/2) - ($map.offset().top); 
var left2 = ($player.offset().left - $player.width()/2) - ($map.offset().left); 

if(interval1 == 'false'){ 
    interval1 = setInterval(function(){ 
     var speed = 1; 
     var deltaX = Math.cos(angle * Math.PI/180) * speed; 
     var deltaY = Math.sin(angle * Math.PI/180) * speed; 

     $map[0].style.left = (left1 -= deltaX)+'px'; 
     $map[0].style.top = (top1 -= deltaY)+'px'; 
     $player[0].style.left = (left2 += deltaX)+'px'; 
     $player[0].style.top = (top2 += deltaY)+'px'; 
    }, 1); 
}

Je le fais sur mouseup:

clearInterval(interval1); 
interval1 = 'false';

Le problème est que chaque fois que je tire le mousedown il ajoute quelques petites lacunes au joueur, donc à chaque clic il se déplace un peu du centre ...

Comment puis-je résoudre ce problème? Je n'ai pas été capable de comprendre ce qui génère l'écart ...

Source

2016-06-28 neoDev

Cela ne résout peut-être pas votre problème (votre exemple n'est pas un [mcve]) mais ne déplacez pas les deux objets, vous mélangez des erreurs de conversion de nombres flottants en nombres entiers - pourquoi aggraver? Il suffit de déplacer la carte. – Tibrogargan

Le code affiché n'efface jamais l'intervalle. Si vous créez un nouvel intervalle sur chaque événement souris * sans * annuler l'intervalle précédent, vous aurez des problèmes. – nnnnnn

@Tibrogargan Je dois mettre à jour la position du joueur, je ne peux pas seulement bouger la carte. Comment puis-je corriger la conversion flottant/intergers? – neoDev

Si vous avez le jeu 2D - pour chaque objet, vous devez stocker les coordonnées globales, qui sont indépendant de la position de la carte. Ensuite, par les coordonnées de l'objet et "position de la caméra", vous pouvez calculer les coordonnées de rendu précises des objets.

Source

2016-06-28 01:16:24

Vous avez peut-être rencontré le problème d'écart dû au fait que le délai d'attente défini est trop court. Le navigateur ne peut pas dessiner chaque étape entre les deux. Essayez-le avec 100 au lieu de 1

Source

2016-06-28 01:55:06 webdevdani

Modifier la position d'un élément et son parent dans javascript

Répondre

Questions connexes