Anzeige

Javascript - Objekt bewegt sich per Maus Click

Javascript - Objekt bewegt sich per Maus Click | PSD-Tutorials.de

Erstellt von Appentwickeln, 05.12.2018.

  1. Appentwickeln

    Appentwickeln Noch nicht viel geschrieben

    Dabei seit:
    05.12.2018
    Beiträge:
    3
    Javascript - Objekt bewegt sich per Maus Click
    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 (Text):
    1.  
    2. <script>
    3. $(document).click(function(event) {
    4. varx = event.pageX,
    5. y = event.pageY;
    6.  
    7. $('#thing').animate({
    8. top:y,
    9. left:x
    10. }, 1000);
    11. });
    12. </script>
    13.  
    Liebe Grüße
     
    Zuletzt bearbeitet: 05.12.2018
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.157
    Geschlecht:
    männlich
    Ort:
    Ö
    Javascript - Objekt bewegt sich per Maus Click
    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.
     
    #2      
    Appentwickeln gefällt das.
  3. Appentwickeln

    Appentwickeln Noch nicht viel geschrieben

    Dabei seit:
    05.12.2018
    Beiträge:
    3
    Javascript - Objekt bewegt sich per Maus Click
    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: 06.12.2018
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.157
    Geschlecht:
    männlich
    Ort:
    Ö
    Javascript - Objekt bewegt sich per Maus Click
    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.
     
    #4      
    Appentwickeln gefällt das.
  5. Appentwickeln

    Appentwickeln Noch nicht viel geschrieben

    Dabei seit:
    05.12.2018
    Beiträge:
    3
    Javascript - Objekt bewegt sich per Maus Click
    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
     
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.157
    Geschlecht:
    männlich
    Ort:
    Ö
    Javascript - Objekt bewegt sich per Maus Click
    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.
     
    #6      
    Appentwickeln gefällt das.
x
×
×
teststefan