Dynamische Wanderkennung bei einem Javascript-Golf

[NenntMichHarry]

Hallo zusammen,

aus Übungszwecken habe ich mir selbst die Aufgabe gesetzt ein Golf/MiniGolf Spiel mit Html, css und Javascript zu schreiben.

Ich bin zwar erst seid heute in der Planung, aber hab eine ungefähre Vorstellung davon wie ich das Realisieren könnte.

Also mit einem Bild, was den Golfball darstellt und je nachdem wie fest man zuschlägt eine for Schleife laufen zu lassen die das Bild immer veschiebt in die angegebene Richtung etc... So Sachen halt.

Was ich allerdings überhaupt nicht weiß und was demnach auch meine Frage ist, kann man dynamisch erkennen, ob an einer bestimmten Koordinate zum Beispiel eine Div Grenze liegt und dann mit einer Methode die Richtung ändern.

Man könnte ja sicherlich fest in den Code statisch festlegen, dass wenn die Grafik eine bestimmte Koordinate erreicht(wo dann meine Grenze liegt), die Richtung zu ändern. Allerdings ist das sicher nicht praktikabel. Vor allem wenn man mehrere Löcher/Level erstellen möchte.

Also komme ich eigendlich um eine automatische Erkennung der Grenzen nicht herum.

Über Links, wo sowas ähnliches bereits schon realisiert wurde oder gar ein Tutorial würde ich mich sehr freuen, wobei ich selbst auch schon ausgiebig gesucht hab. ;-)

Gruß

Harry

[bleicher]

Grüße,

obejektposition, obejektgröße, rechteck.
 was will man mehr?

MFG
bleicher

[NenntMichHarry]

Hallo Bleicher,

anhand deiner Antwort weiß ich nun, dass es wohl geht. Aber ich bitte um eine kleine Erklärung, ich bin noch nicht soooo lange in der javascript Programmierung. ;-)

Gruß

Harry

[bleicher]

Grüße,

anhand deiner Antwort weiß ich nun, dass es wohl geht. Aber ich bitte um eine kleine Erklärung, ich bin noch nicht soooo lange in der javascript Programmierung. ;-)

ich habe 0 Ahnung von JS, aber meine Vermutung wäre:

du wolltest den "ball" an DIVs abprallen lassen.

du kannst von einem Object die position der linken oberen ecke (top/left) abfragen
du kannst seine width und height abfragen
die 4 kanten ergeben sich als strecken

Px|Py->Px+w|Py
Px|Py->Px|Py-h
Px|Py-h->Px+w|Py
Px+w|Py->Px+w|Py-h

darstellen.

das ist je noch reine methematik. die in JS umzusetzen dürfte aber nicht unmöglich sein.

entfernung gerade/punkt kanns tdu ja dann locker ausrechnen - die vektorielle form (oder hieß das anders?) der geradengleichung der "wände" hast du ja. musst nur noch den ballradius als minimale entfernung nageben und gut ist.

MFG
bleicher

[NenntMichHarry]

Ok Klingt logisch, ich schau mal ob ich dazu was passendes finde.

Wenn jemand eventuell weiß, wie das umzusetzen ist, wäre ich für Code oder Referenzen dankbar. Aber wie gesagt ich schau natürlich auch selber :-)

Danke und Gruß,

Harry

[ritschmanhard]

Hi Harry,

wenn du diese Übung sinnvoll erstellen möchtest, so empfehle ich dir folgenden Ansatz:

Versuche nicht, die Positionen (und Kollisionsabfragen) für die exisiterenden HTML Objekte zu machen, sondern versuch es mal so:

1. Lege in Javascripte Objekte an, welche Beispielsweise folgende Gestalt haben könnten:
   var breite;
   var laenge;
   var offsetX;
   var offsetY;
   var htmlTagType;
   //weitere denkbare, sinnvolle eigenschaften:
   var imageSrc;
   var speed;
   var direction;
   var elastizitaet;
   //u.v.a

2. Erstelle für die Objekt Methoden, z.B.
   function init(...)
   function move(...)
   function checkCollision(...)
   function getBreite()
   function getLaenge()
   //weitere funktionen...

3. Erstelle die Funktionen zur Erfassung des User Inputs (getInput()) und zur Erzeugung der Ausgabe der Objekte (draw())

In deinem Hauptprogramm:

• werden zunächst benötigte Objekte erzeugt und initialisiert
• läuft nun eine Hauptscheife, die Usereingaben erfasst und die Objekte "bewegt", d.h. offsetX und offsetY gemäß der Objekteigenschaften berechnet (priorität hoch)
• wird mit einem von dir zu bestimmenden Intervall draw() für die vorhandenen Objekte aufgerufen und somit die Anzeige aktualisiert.

Somit interessiert dich gar nicht, was auf der Anzeige zu sehen ist, da deine Objekte und dein Modell die benötigten Informationen enthalten.

So sollte es mehr Spaß machen, klarer werden und du lernst was über Objektorientierung und Schichten-Trennung.

Grüße,
Richard

[NenntMichHarry]

Also darf ich das so verstehen. Sämtliche "Wände" sind eigene Objekte, die bei jedem Schleifendurchlauf, in der der/die "Ball/Grafik" überprüfen ob etwas die Stelle erreicht, wo diese sich befinden.

Dann sollen Funkionen wie z.B. turnDirection().... aufgerufen werden.

Danke schonmal, der Post hilft mir wenn ich das richtig verstanden habe schonmal sehr weiter :-)

Gruß,

Harry