Fenêtre Suivant une image

Question

Je cherche à faire suivre la fenêtre de mon programme d'un Mario img dans une plage au lieu de faire défiler, en supprimant essentiellement la barre coulissante et en gardant en quelque sorte la fenêtre centrée sur le personnage Mario (comme n'importe quel côté 2D- défilement du jeu vidéo). Des idées sur la façon de le faire en utilisant jQuery ou HTML?

Vous pouvez trouver mon programme here. Comme on le voit, j'avoir des valeurs supérieures et inférieures, je veux la fenêtre pour montrer, mais je n'ai pas un moyen de déplacer l'écran pour afficher les limites

EDIT: Il serait optimal pour déplacer un compteur de pièces, le bouton de lecture/pause musicale, et tout ce que j'ajoute en haut de l'écran avec la fenêtre. Est-ce qu'un conteneur div peut le faire? Pourrais-je simplement utiliser le mouvement CSS pour effectuer tous les éléments dans le div?

Answer 1

Pour ce faire, je créé une variable moveAmount temporaire dans ma fonction moveMario, qui a calculé la distance entre mon Mario img et les variables upperRange et lowerRange, et déplacé le div contenant le contre-jeu et de la musique pièce/bouton pause à l'aide du code $("#id").animate({"left":"+=" + moveAmount + "px"},1);

Pour le mouvement de la fenêtre réelle, j'ai utilisé le même concept, mais utilisé le code window.scrollTo(lowerRange - (1/10)*winWidth, 0); (parce que lowerRange a été initialement défini comme (1/10)*winWidth)

Je suis vraiment fier de moi-même pour résoudre celui-ci après une semaine d'essayer différentes choses.

Voir mon exemple de travail here!

Answer 2

Vous pouvez essayer de déplacer toute la page en utilisant des marges négatives et de conserver l'img en suivant la fenêtre avec position: fixed.