Javascript - Objekt bewegt sich per Maus Click

[Appentwickeln]

Hallo liebe PSD-Tutorials Community,

ich bin neu hier und beginne schon mit meinem Problemchen. Meine App besteht im Grunde genommen aus eine HTML Seite und Javascript Dateien. Die native HTML Seite ist repsonsive und passt sich den jeweiligen Endgeräten an. Klappt wunderbar. PhoneGap lässt grüßen.

Wie der Titel oben schon sagt, ich habe ein Library (jQuery) Script, welches ein Objekt per Mausclick sich bewegen lässt. Hier wird nicht von "Pathfinding" gesprochen. Nur so nebenbei.

Ich möchte nur, dass wenn eine Wand davor steht, das Objekt, welches sich bewegt, dann einfach stehen bleibt. Ich habe jetzt schon alles Mögliche getan. Ich bitte um Rat. Sonst fliegt er einfach durch die Wand. Das wäre nicht im Sinne des Spiels.

Edit: hier noch ein jsfiddle Link

Javascript

<script>
$(document).click(function(event) {
varx = event.pageX,
y = event.pageY;

$('#thing').animate({
top:y,
left:x
}, 1000);
});
</script>

Liebe Grüße

 

[Myhar]

In dem Code den du hier hast definierst du nur eine Animation von Punkt X zu Punkt X1 (und Y zu Y1)
du musst hier erst einmal deine "Wand" im JS definieren und dieser dann Koordinaten zuweisen. Dann musst du vor der Animation prüfen ob sich die Pfade kreuzen (Vektorberechnung) Wenn sich die Pfade kreuzen dann musst du den Schnittpunkt berechnen und die Animation bis dahin ausführen lassen.

 

[Appentwickeln]

In dem Code den du hier hast definierst du nur eine Animation von Punkt X zu Punkt X1 (und Y zu Y1)
du musst hier erst einmal deine "Wand" im JS definieren und dieser dann Koordinaten zuweisen. Dann musst du vor der Animation prüfen ob sich die Pfade kreuzen (Vektorberechnung) Wenn sich die Pfade kreuzen dann musst du den Schnittpunkt berechnen und die Animation bis dahin ausführen lassen.

Gibst du mir einen Anhaltspunkt in Bezug auf die Koordinaten, die Wände sind i.d.R. immer bei mir auf Top: 0% left:0%
Ich berrechne eben Alles in Prozent, dann ist die native HTML Seite eben auch responsive.

Aber was du geschrieben hast, klingt plausible. Muss ich nicht jede Sekunde prüfen, wo sich mein "Player" gerade befindet? Also eine Schleife?

Edit: Ich dachte Anfangs an einer Collission bzw. Detection. Funktioniert leider nur bedingt. Denn ich könnte ihn dann mit Margin wieder runter saußen lassen.

 

[Myhar]

Ehrlich gesagt frage ich mich was du hier genau erreichen willst. Willst du ein Spiel oder etwas interaktives erstellen? Warum dann nicht mit canvas?

Ansonsten: Du kannst die X und Y Koordinaten von jedem Element per Javascript auslesen: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

Damit kannst du dann weiterarbeiten. ob du jede Sekunde etwas prüfen musst oder nicht weiß ich nicht, da ich nicht weiß, was du genau vor hast. "Player" klingt aber wieder so, als ob du eigentlich ein Spiel entwickelst. Wofür canvas besser geeignet ist, da es extra dafür geschaffen wurde.

 

[Appentwickeln]

Ehrlich gesagt frage ich mich was du hier genau erreichen willst. Willst du ein Spiel oder etwas interaktives erstellen? Warum dann nicht mit canvas?

Ansonsten: Du kannst die X und Y Koordinaten von jedem Element per Javascript auslesen: https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

Damit kannst du dann weiterarbeiten. ob du jede Sekunde etwas prüfen musst oder nicht weiß ich nicht, da ich nicht weiß, was du genau vor hast. "Player" klingt aber wieder so, als ob du eigentlich ein Spiel entwickelst. Wofür canvas besser geeignet ist, da es extra dafür geschaffen wurde.

Ja, es soll ein Spiel sein. Danke für deinen Link. Ich versuche es mit "Canvas".
Ich versuche mein Glück.

Schöne viele Grüße

 

[Myhar]

Ja, es soll ein Spiel sein.

Dann verwende doch eine Library wie zB
http://pixijs.io/examples/#/basics/basic.js
https://phaser.io

oder hier gleich eine Übersicht: https://ourcodeworld.com/articles/read/308/top-15-best-open-source-javascript-game-engines Keine Ahnung wie aktuell die ist, man findet mit "canvas game engine" oder ähnlichen Suchanfragen noch einige andere. Hier nimm eine, welche deine Anforderungen erfüllt.

 

[Appentwickeln]

Dann verwende doch eine Library wie zB
http://pixijs.io/examples/#/basics/basic.js
https://phaser.io

oder hier gleich eine Übersicht: https://ourcodeworld.com/articles/read/308/top-15-best-open-source-javascript-game-engines Keine Ahnung wie aktuell die ist, man findet mit "canvas game engine" oder ähnlichen Suchanfragen noch einige andere. Hier nimm eine, welche deine Anforderungen erfüllt.

Vielen Dank für die nützlichen Links, aber meins ist leider nicht dabei :/

Frohes Neues.