Pixel bewegung durch ° Angabe

BlackManta

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 :
https://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

user000user

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.

BlackManta

Könntest du ein beispiel benennen ? Bin noch relativ neu in sachen javascript bzw. Vektoren habe ich erst nächstes Jahr.
Wie gesagt ich brauche eine X und Y angabe wo das Projektil beim nächsten Frame hinn muss.

user000user

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.

BlackManta

Super danke !
geht : https://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)

Code

function mouse_click(e)
{
    var x = e.pageX - document.getElementById('game_object').offsetLeft;
    var y = e.pageY - document.getElementById('game_object').offsetTop;


    var positionY = player.drawY+(player.height/2-20);
    var positionX = (player.drawX+(player.width/2));




    var zw1x = positionX-x;
    var zw1y = positionY-y;


    var zw2x = zw1x*zw1x;
    var zw2y = zw1y*zw1y;
    var zw2 = zw2x+zw2y;


    var zw3 = Math.sqrt(zw2);


    var directionX = ((zw1x/zw3)*-1)*4;
    var directionY = ((zw1y/zw3)*-1)*4;


    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;


    bullets[bullets.length] = new Bullet(positionX, positionY, 0, 130, 80, 38, 4,0, directionX, directionY, true);
}

Alles anzeigen

Awesome

Nicht vergessen, dass spiel zu resetten wenn man nochmal auf start drückt

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

Benutzer online in diesem Thema