Breakout-Spiel und Kollisionsabfrage

[Christian S.]

Hi,

Danke, das hat mir den richtigen Denkansatz gegeben. Hab' mir erstmal angeguckt, was Arrays sind (bin noch nicht so lange dabei, hätte ich vielleicht mal vorher sagen sollen ;-) und das dann so umgesetzt:

Eine der wohl wichtigsten und ältesten Konstrukte beim Programmieren...

// Array bauen

steineX = new Array()
    steineY = new Array()
    var steinX = 0;
    var steinY = 0;
    for (var v = 0; v < 6; v++)
    {
    for (var i = 0; i < 15; i++)
    {
    steineX.push(steinX);
    steineY.push(steinY);
    steinX = steinX + 50
    }
    steinY = steinY + 26
    steinX = 0
    }

Ist das so, wie du es meintest?

Nicht ganz. Du benutzt hier 2 Arrays, was nicht nötig ist. Wolltest du einem Stein noch mehr Eigenschaften als nur x/y geben, würdest du jedesmal ein neues Array machen wollen!?

var steine = new Array(); // äquivalente Kurzschreibweise: var steine = [];

Darin hälst du alle Steine.

Ein Stein kann mehrere Eigenschaften haben, hier eben erstmal nur x und y.

var stein = new Object();
stein.x = 0;
stein.y = 0;

oder kurz:

var stein = {x:0, y:0};

und komplett dann in etwa so:

  
var steine = [];  
for (var v = 0; v < 6; v++)  
{  
   for (var i = 0; i < 15; i++)  
   {  
      var stein = {x: i * 50, y: v * 26};  
      steine.push(stein);  
   }  
}  

Die Abfrage, ob die linke Kante (left) des Balls an die rechte Kante eines Steins (left + width) stößt, solltest du hinkriegen.
Und dass dann in einer for-Schleife, für alle noch übrigen Steine.

Nein, bekomme ich leider nicht hin; aber für oben und unten klappt es schonmal, denke ich. Wie ich allerdings auch eine Abfrage für links/rechts machen soll, weiß ich nicht. Der Ball soll dann ja auch richtig abprallen... Ihr könnt ja mal den aktuellen Stand der Datei betrachten.

Naja, links/rechts ist doch bloß analog zu oben/unten.

// Kollisionsabfrage
    for (var i = 0; i < 90; i++)

oder:

for (var i = 0, length = steine.length; i < length; i++)

{
      if (posy < steineY[i]+26 && posy > steineY[i]-16 && posx > steineX[i]-8 && posx < steineX[i]+42 && steineX[i] != "kaputt")
      {

Das sieht doch schon ganz gut aus. Ich weiß jetzt nur nicht was posx ist; die links obere ecke des Balls, oder sein Mittelpunkt. Daher weiß ich auch nicht, wo die 16 und die 42 herkommt... Du scheinst abzufragen, ob der Ball 0-8px drin in einem Stein drin ist!?
Eigentlich müsstest du ja für jede Ecke des Balls abfragen, ob diese innerhalb des Rechtsecks des Steins liegt.

Abfragen kannst du die Steinposition dann mit:

steine[i].x oder steine[i].y

Habe vorher garnicht daran gedacht, dass man eine for-Schleife mit if verbinden kann... gut zu wissen!

Seit wann programmierst du schon? ;-)

Wurde einer getroffen, würde ich den Stein aus dem Array entfernen (steine.splice(index, 1)).

Naja, aber würde sich das ganze dann nicht verschieben? Hab' das jetzt anders gemacht, so gehts auch (steineX[i] = "kaputt";).

lieber vielleicht so: steine[i].kaputt = true;

Könntest du recht haben, je nachdem wie es umgesetzt ist. Also wenn der index im Array auch tatsächlich mit dem HTML Element zusammenhängt. Alternativ kannst du auch an ein Stein-Objekt noch die ID des Steins dran hängen. Das Entfernen aus dem Array hätte halt den kleinen Vorteil, dass du nicht immer alle Steine durchlaufen musst, was dann Performance Vorteile hätte.

Wenn du einen Stein getroffen hast, würde ich auch ein break setzen, um die Schleife zu beenden.

Wenn du allerdings während der Schleifendurchlaufens, ein Element entfernst, kann es krachen. Du läufst ja von 0-90. Dann sind nur noch 89 Elemente drin, und willst auf das 90te zugreifen... Lässt sich verhindern, wenn du einfach von 90-0 zählst.
Könntest du dir auch überlegen, da ja zu erst die hinteren Steine getroffen werden. D.h. die Wahrscheinlichkeit ist groß, dass ein Stein bereit bei den ersten paar durchläufen getroffen wurde.

Die ganze Kollisionsabfrage (also die Schleife) würde ich erst dann starten, wenn der Ball eine bestimmte y-pos unterschritten hat, also in die Nähe der Steine kommt.

Ist das eine if-Bedingung? Kann man das einfach weglassen? Hab' das jetzt mal direkt übernommen:

was ist eine If Bedingung? das hier?
e = e || window.event; ?

Das ist eine Oder Verknüpfung. Er versucht erst e zu nehmen, wenn er das nicht kennt, weist er window.event zu.

Der IE schluckts, Firefox meckert immer noch. Die Fehlerkonsole spuckt folgendes aus:

Stimmt, liegt daran, dass du onmousemove direkt im body tag angegeben hast. In dem Fall musst du schreiben:
onmousemove="move(event)";

Also das Event Objekt direkt übergeben. Geht auch in beiden Browsern, und du brauchst auch nicht mehr die Abfrage e = e || window.event, da e dann ja immer übergeben wird.

Ich vermute es liegt daran, dass du zuviel dy auf die top position des Balls addierst. Dann fragst du ab:
if (posy > 391)

Wenn die Position dann 392 ist, schliddert er durch. Irgendwie so jedenfalls... Ich blicke deinen Code auch nicht vollständig..

Geht leider nicht anders, wenn ich immer nur 1 addieren würde, dann würde der Ball viel zu langsam fliegen. Und die Aktualisierungsrate kann ich nciht noch niedriger setzen. Aber wie gesagt, die Kollisionsabfrage ist erstmal wichtiger.

Dann musst du dir noch irgendwas einfallen lassen ;-)

Gruß!