Ich möchte eine Minikarte für mein HTML5-Spiel erstellen, wie fange ich an?

Question

Angenommen, ich habe eine große Karte, die ein Hintergrundbild als Muster verwendet. Ich möchte eine Minikarte an der Ecke platzieren, wenn ich den Spieler herumbewege. Alles, was ich brauche, ist die Anzeige, wo sich mein Player in der großen Map befindet und wo andere Sprites in der Map sind. Dabei verwende ich eine sehr grobe Darstellung und behalte ihre relative Position, aber alles auf einer viel kleineren Karte. Ich denke, das ist eine sehr einfache und einfache Minikarte. Mein Spieler wird in der Mitte des Bildschirms sein (das habe ich bereits getan) und die Minikarte bleibt in der Ecke des Bildschirms. Wenn ich ein solches Feature für mein Spiel erstellen möchte, wie fange ich an?

Answer 1

Unter der Annahme, dass sich Ihre Hauptkarte in einem Containerelement befindet, müssen Sie die Eigenschaft scroll dieses Elements messen, um festzustellen, an welcher Position es sich relativ zur Mitte des Containers (oder Bildschirms) befindet.

Wenn Sie x und y als Verhältnis (z. B.%) der Karte berechnen, können Sie etwas auf der Minikarte an derselben relativen Position platzieren.

Die Platzierung der Minikarte über die Hauptkarte spielt keine Rolle.

Um die Position der Karte relativ zum Bildschirm zu ermitteln, versuchen Sie document.getElementById("map").getBoundingClientRect(). Die x- und y-Werte im resultierenden Array geben die Position der oberen linken Ecke der Karte von oben links auf dem Bildschirm an. Die Breite und Höhe der Karte sind ebenfalls im Array enthalten. Fügen Sie screen.width/2 und screen height/2 hinzu, um die Koordinaten der Karte in der Mitte des Bildschirms zu erhalten.