Antworten auf deine Fragen:
Neues Thema erstellen

Javascript - Objekt bewegt sich per Maus Click

A

Appentwickeln

Guest

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
Code:
<script>
$(document).click(function(event) {
varx = event.pageX,
y = event.pageY;

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

Liebe Grüße
 
Zuletzt bearbeitet von einem Moderator:

Myhar

Hat es drauf

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.
 
A

Appentwickeln

Guest

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.
 
Zuletzt bearbeitet von einem Moderator:

Myhar

Hat es drauf

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.
 
A

Appentwickeln

Guest

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

Hat es drauf

A

Appentwickeln

Guest

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben