Pixel bewegung durch ° Angabe

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

      Pixel bewegung durch ° Angabe

      5 von 5 mit 1 Stimmen
      Hey,
      ich bin aktuell dabei ein kleines game zu machen und komme leider nicht weiter.
      Unzwar geht es darum das man Spieler schießen soll , unzwar dahin wo der Mauszeiger ist
      Also muss man aus der Differenz der Positionen die steigung ausrechnen und das Projektil dahin fliegen lassen.


      Mein problem:
      es scheitert an der berechnung der Steigung und der Bewegung
      Ich brauche einen X und Y wert nachdem sich das Projektil bewegt, wobei X oder Y auch 0 sein kann.
      Mein bisheriges ergebnis :
      lyronic.de/games/Bomber/

      Wen sich x und y bei jedem Frame um 1 erhöht ergibt es 45° (als beispiel)
      Bei meiner rechnung komme ich aber manchmal auf + oder -300

      Dabei habe ich die koordinaten des SPieler minues die der Maus durcheinander geteilt (Um eine steigung zu bekommen) aber wen die maus jetzt weit rechts ist , ist das projektil sehr schnell.
      Ihr könnt es ja einfach mal testen


      Hoffe jemand versteht das und kann mir helfen :thumbsup:

      MfG

      BlackManta
      Wie wäre es mit Vektoren?
      Einen Vektor mit der momentanen Mausposition und einen Vektor mit der Spielerposition. Daraus die Differenz normalisieren und evtl. mit einem Geschwindigkeitsfaktor multiplizieren und jedes Frame dann zu der Position des Projektils hinzufügen. Ist denke ich einfacher, als die Steigung zu berechnen.
      Vektoren sind eigentlich nicht viel anders, als Koordinaten, beschreiben aber mehr eine Richtung als einen konkreten Punkt. Ein Vektor hat im 2-dimensionalen ein X und ein Y.
      Wenn sich der Spieler an der Position 100, 100 befindet und die Maus bei 200, 135, dann ergibt das die Vektoren (100 | 100) und (200 | 135). Wie beim Berechnen der Steigung, rechnet man dann zunächst die Differenz aus:
      (200 | 135) - (100 | 100) = (200 - 100 | 135 - 100) = (100 | 35)

      Danach rechnet man die Länge des Vektors aus. Wenn man es sich also als Dreieck vorstellt, kann man es mit a² + b² = c² berechnen:
      c = Wurzel aus (100² + 35²) ~ 106
      Wenn man eine Zahl durch sich selbst teilt, erhält man 1. So verhält es sich auch mit einem Vektor und seiner Länge: Teilt man X und Y des Vektors durch seine Länge, erhält man einen Einheitsvektor, dessen Länge 1 ist (normalisieren).
      Also:
      (100 | 35) / 106 = (100 / 106 | 35 / 106) = (0,94 | 0,33)
      Dadurch, dass der Vektor normalisiert wurde, wird jedes Projektil die gleiche Geschwindigkeit haben.

      Diesen Vektor kann man dann in jedem Frame zu dem Projektil hinzufügen.
      Wenn das Projektil bei (100 | 100) startet, wäre es im nächsten Frame bei (100 | 100) + (0,94 | 0,33) = (100,94 | 100,33).

      Ein Ausnahmefall wäre, wenn die Mausposition gleich der Spielerposition ist, da dann die Länge 0 ist. Aber da könnte man ja bspw. die X-Koordinate um 1 verschieben.
      Wie man es genau in Javascript machen kann, weiß ich auch nicht, da ich mich damit nicht auskenne, aber zur Not kann man die Berechnungen auch einzeln durchführen, ohne konkret Vektoren zu benutzen.
      Super danke !
      geht : lyronic.de/games/Bomber/
      Das ist richtig das die ecke oben links am zeiger vorbeikommt da er dort anfängt zu zeichnen , ändere ich gleich.
      Hier mal der Code (eig simpel)

      Quellcode

      1. function mouse_click(e)
      2. {
      3. var x = e.pageX - document.getElementById('game_object').offsetLeft;
      4. var y = e.pageY - document.getElementById('game_object').offsetTop;
      5. var positionY = player.drawY+(player.height/2-20);
      6. var positionX = (player.drawX+(player.width/2));
      7. var zw1x = positionX-x;
      8. var zw1y = positionY-y;
      9. var zw2x = zw1x*zw1x;
      10. var zw2y = zw1y*zw1y;
      11. var zw2 = zw2x+zw2y;
      12. var zw3 = Math.sqrt(zw2);
      13. var directionX = ((zw1x/zw3)*-1)*4;
      14. var directionY = ((zw1y/zw3)*-1)*4;
      15. document.getElementById("xpy").innerHTML = " <br /> Maus x/y "+x+"/"+y+" <br /> Player x/y "+player.drawX+"/"+player.drawY +" <br /> differenz x/x "+(x-player.drawX)+" <br /> differenz y/y"+(y-player.drawY)+ " <br />Rechnung "+directionX +" ---- "+ directionY;
      16. bullets[bullets.length] = new Bullet(positionX, positionY, 0, 130, 80, 38, 4,0, directionX, directionY, true);
      17. }
      Alles anzeigen

      MfG

      BlackManta
      hihi ja ich habe das so gemacht weil ich dan nicht immer neu starten muss :)
      Werde jetzt auch mal ein Menü machen und an einer Spring funktion

      EDIT:
      Hey, neue Mathe problem :
      Unzwar wird jetzt das bild um x° gedreht und man muss neu berechnen wie es sich bewegt.
      Jemand eine Idee wie ? Ich habe jetzt x und y aus der alten berechnung , aber keine idee wie ich das mit einer neuen ° zahl in verbindung bringen kann.

      was wichtig zu wissen ist :
      es wird oben links angefangen das Bild zu zechnen und dieser Punkt ist wen ichd as Bild um 90° drehe rechts oben

      :help: :thumbsup:

      MfG

      BlackManta

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von BlackManta ()