Hilfe bei Storytelling Homepage

[Rexima]

Hallo liebe Community,

ich baue derzeit eine Storytelling Seite auf.

Was meine ich mit Storytelling?
Es ist ganz einfach, ich habe eine Figur und möchte diese durch verschiedene Gebiete bewegen.
(Durch Horizontales Scrolling)
Und dabei über das Produkt berichten.
Also Quasi ein 2D Spiel, was aber kein Spiel ist sondern einfach durch das Scrollen die Ereignisse geschehen.

Wo habe ich Probleme?
Über Sprites bewege ich die Hauptfigur, ich möchte aber, dass diese sich nur bewegt und wenn es Punkt X,Y erreicht hat, dass die erst dann weiter scrollt und das weitere Gebiet anzeigt.

Die Frage, die ich habe ist,
- Wie kann ich die Figur bewegen ohne den Background zu bewegen?
- Wie kann ich die Figur dann auch zb. Leitern "hochklettern" lassen?

Ich bin in Javascript leider kein Ass, deswegen bräuchte ich echt eure Hilfe, um mein Projekt beenden zu können :)

 

[Tronjer]

Technisch betrachtet wird beim Drücken einer Taste (bsw. arrow right) die Figur vom ihrem Ausgangspunkt um eine bestimmte Anzahl von Pixeln nach rechts oder oben bewegt. Dieser Vorgang wiederholt sich solange, bis der User die Taste freigibt. Ist der Rand des Viewports erreicht, wird in einer Animation zum nächsten Screen gescrollt.

Pattern (Pseudocode):

$(document).on('keydown', function(event) {
  if (event.which == 39) {
    setTimeout(
      $('#figur').animate({
        'marginRight': '+=20px'
      })
    ,100);
  }
});

Als Einstieg würde ich mir an deiner Stelle ein paar Bücher zum Thema Animationen und Spieleentwicklung mit JavaScript besorgen. Ohne tieferes Verständnis wirst du das kaum hinbekommen.