Ich bin neu in der HTML5 / Canvas / Game-Programmierung, habe aber nach dem Lesen einiger Bücher daran herumgebastelt. Ich denke, ich habe eine ziemlich gute Vorstellung davon, wie sich die Dinge entwickeln. Diese Frage stellt mehrere kleinere Fragen, ist jedoch im Allgemeinen eine Frage des "strukturellen Ansatzes". Ich erwarte keine ausführlichen Antworten, aber hoffentlich kleine Hinweise hier und da :) Hier ist ein Link zu einer nicht scrollenden und derzeit eher langweiligen Super Mario World.

Super Mario World Test

HINWEIS: Die Steuerelemente sind Links / Rechts und Leertaste zum Springen. Dies ist im Moment nur für Firefox eingerichtet, da ich gerade lerne.

Habe ich an dieser Stelle etwas falsch gemacht?

Momentan habe ich mich nur darauf konzentriert, wie Mario rennt und springt und denke, dass ich es ziemlich gut hinbekommen habe. Die Münzkassette macht nichts und der Hintergrund ist nur ein Bild, das für das Aussehen geladen wird. Hier ist mein Ansatz, lass es mich wissen, wenn etwas völlig falsch ist:

Ermöglicht Mario das Springen mit 2 Y-Geschwindigkeiten (Gravity- und Jump-Variablen)Ermöglicht Mario das Laufen mit 1 Geschwindigkeit (Links oder Rechts "Reibung" + Beschleunigung)Sprites werden je nach Tastendruck / Tastendruck verwendet und positioniertIch bin nicht sicher, ob dies richtig ist, aber ich benutze eine Konstruktorfunktion, um ein Objekt zu erstellen. In der Hauptanimationsschleife rufe ich die Funktion prototype.draw für dieses Objekt auf, um alle Variablen zu aktualisieren und das Objekt neu zu zeichnen.Ich räume bei jedem Frame die gesamte Leinwand abSollte ich dies in mehr als nur eine Zeichenfunktion wie Mario.move () aufteilen?Ich habe eine GroundLevel- und eine JumpLevel-Variable eingerichtet, um 2 Spielebenen zu erstellen. Der JumpLevel ist so eingestellt, dass gesteuert werden kann, wie hoch Mario im Handumdrehen springen kann. Die 2 Stellen würden es dem Boden ermöglichen, sich wie ein Hügel zu erheben - wobei der Punkt, an dem die Schwerkraft Marios Sprungkraft außer Kraft setzt, in der gleichen Entfernung vom Boden bleibt.Aus Gründen der Übersichtlichkeit ist alles in verschiedene JS-Dateien unterteilt, würde sich aber offensichtlich konsolidieren.Vorwärts bewegen:

Jetzt, wo ich fertig bin, richte ich ein, wie Mario sich fortbewegt (ich glaube, es gibt noch ein paar kleinere Dinge, die ich tun könnte, wie Pilze rauf / runter zu schießen und Feuerbälle zu schießen). Ich denke, ich kann das herausfinden, aber ich bin wirklich verloren, wenn es darum geht, Folgendes zu visualisieren und wie HTML5 / Canvas damit umgehen kann:

Scrollen im Hintergrund (Ich habe versucht, Ground Tiles einzurichten und Screen Wrapping zu verwenden, aber das scheint eine Menge ungleicher Probleme zu verursachen, da ich die Kacheln in die entgegengesetzte Richtung bewegt habe. Leider, da ich versuche, die Beschleunigung zu berücksichtigen, ist dies Ich habe diese Idee verworfen. Wäre ein DIV unter der Leinwand mit einem großen Hintergrundbild die beste Lösung?

Feinde: Würde ich Feinde auf die gleiche Weise erschaffen und für jeden Feind in jedem Frame eine Schleife zur Kollisionserkennung ausführen?

Hintergrundboxen: Ich versuche Mario zu erlauben, auf den Boxen im Hintergrund zu stehen, bin mir aber nicht sicher, wie ich das angehen soll. Ich habe derzeit Grenzen festgelegt, damit Mario auf der Leinwand bleibt. Erweitere ich diese Bedingungen weiterhin, um basierend auf den Feldern unterschiedliche Grenzen festzulegen? Ich kann sehen, dass es verrückt werden würde, mehrere Kästchen auf dem Bildschirm zu haben und es auf diese Weise zu tun, besonders wenn ich die gleichen Trefferprüfungen für Feinde durchführen würde. Ich weiß, dass ich hier etwas vermisse ...

Level-Bewegung: Dies ist etwas verwandt. Wenn die rechte Taste gedrückt wird, muss sich im Grunde alles in der Ebene nach links bewegen. Müsste ich in jedem Animationsbild alle Positionen von allem aufspüren, was Mario berühren könnte (Kisten, auf denen er stehen kann und Feinde, mit denen er kollidieren kann)? Das scheint irgendwie ineffizient zu werden?

Dank an alle! Ich werde dies mit Ergebnissen / Lösungen auf dem Laufenden halten :)