• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

SpaceInvaders Schuss wiederholt sich ständig

joeschti

New member
Hallo Zusammen

Im Rahmen eines Schulprojekt versuche ich das bekannte Spiel Space Invaders auf meine Art in JavaScript zu interpretieren.
Nun bin ich totaler Anfänger in JavaScript und eine essestielle Funktion geht nich so wie ich will.
Vielleicht kann einer helfen:

Das Raumschiff wird mittels Pfeiltasten gesteuert. Da normalerweise eine Verzögerung auftritt, habe ich im Netz einen "Workaround" gefunden.
Wenn ich nun mit der Taste "y" einen Schuss abgebe, wiederholt sich dieser ständig und ich weiss nicht warum. Das Ziel wäre, dass der Schuss am oberen Bildrand (fpostop=0) verschwindet und erste nach nochmaligem drücken der "y" Taste ein weiterer auftaucht. Zudem beschläunigt der Schuss falls man aus Versehen mehrmals "y" gedrückt hat.

Danke schon mal für jegliche Tipps.

hier der Code:
 
Zuletzt bearbeitet:
Um das Problem mal auf den Punkt zu bringen und bitte nimm mir das nicht übel,
aber: du verwendest zu viele Zeilen Code, bei denen du keine richtige Ahnung hast, was sie eigentlich bewirken...

Vergiss das "Workaround" und programmier die Sache von Grund auf selber, so schlimm ist es nicht...

Hier ein paar Dinge die auffallen:

- deine Funktion shoot erwartet 2 Parameter, bekommt aber die notwendigen Werte nie zu Gesicht...
- clearTimeout erwartet, wie auch clearInterval, einen nicht unwichtigen Parameter, schau mal nach
 
hallo justanotheruser

den Eindruck hatte ich eben auch...
Nun ja, ich werds mit der Verzögerung halt hinnehmen müssen...

Wie du siehst habe ich tatsächlich keine Ahnung. Das liegt aber eben evtl. auch daran, dass die Arbeit nicht Freiwillig, sondern im Rahmen der Schule gemacht werden muss. So sinkt natürlich die Motivation.

Nichtsdestotrotz Danke ich erst mal für die Hinweise.

Shoot erwartet fleft und ftop denke ich. Diese Parameter konnte ich aber irgendwie nicht verwenden und habe es deswegen mit einem Dekrement (piu.style.top=fpostop--) probiert. Der scheint aber zuviel des guten zu sein.

clearTimeout.. hm.. da war doch noch was mit Variablen. Hab ich aber nicht ganz begriffen =) sorry. Ich hab ein JavaScript Buch. Dorst steht das SetTimeout die Funktion sowie die Zeit erwartet.
Ich habe irgendwie das Gefühl, dass der Schuss solange in die "IF" Schublade passt bis er oben angekommen ist, dann passt er in die "Else" Schublade, allerdings wird er dort ge-"resettet" und passt wieder in die "IF" Schublade... wie kann man bloss verhindern, dass er sich ständig loopt? evtl. Flag?

@kkapsner: gibt es denn solch einen Validator auch Offline?

Danke, Matt



PS: mit Flags funktionierts! gibts es noch bessere möglichkeiten ?
 
Zuletzt bearbeitet:
PHP:
//function shoot(fleft, ftop) 
function shoot() 
{
    var _shoot,x,y,ship=document.getElementById("ship");
    
    x = parseInt(ship.style.left,10); 
    y = parseInt(ship.style.top,10);

// den "Schuss" an die Position des Schiffs "verschieben"
    piu.style.left=x+"px";
    piu.style.top=y+"px";
// und sichtbar machen
    piu.style.display="";
    
// _shoot ruft sich selbst so lange auf,
// bis der Schuss nicht mehr zu sehen ist...
    _shoot = function() 
    {
      if(parseInt(piu.style.top,10) === 0)
        {
// und blendet dann das DIV aus
        piu.style.display="none";
// setzt die Position zurück, was eigentlich nicht mehr nötig ist
        resetFirePosition();
// und beendet die Geschichte
        return;
        }
      piu.style.top = parseInt(piu.style.top,10) -2 + "px";
      setTimeout(_shoot,100);
    }
	
   setTimeout(_shoot,100);
}

so könnte man es machen, sollte man aber nicht... ;)
aber ich hoffe es hilft dir ein wenig weiter zu kommen

achja... hatte da noch die Eigenschaften geändert:

PHP:
  <div id="piu" style="position:absolute; display:none; left:100px; top:84px">
         <img src="img/piu.gif">
  </div>

von visibility auf display...
 
Zuletzt bearbeitet:
alles klar! danke!
Ich glaube, damit kann ich was anfangen. Was ist den eigentlich besser an display statt visibility?
 
http://lmgtfy.com/?q=html+validator+offline

Der JS-Code ist aber gar nicht gut (auch nicht der von justanotheruser - tut mir leid):
überflüssige Variablen, Notwendigkeit des Quirksmode, verwirrende Indentation, Codeblocks ohne Blockklammern (besonders bei Anfängern ein häufig gemachter "Fehler", der gerne zu komischen Bugs führt), ...
 
Ist ja nicht Produktiv. Aber ich lasse mich gerne Beraten.

Gibts denn irgendwo Hilfe für einen "sauebereren" Code? Wo hat es fehlerhafte Codeblocks? Ich erkenn das halt nicht wirklich und mein Free JavaScript Editor sagt auch nichts dazu.....
 
Zuletzt bearbeitet:
Der JS-Code ist aber gar nicht gut (auch nicht der von justanotheruser - tut mir leid):

:d wer lesen kann, dem tut reichlich weniger leid... ;)

Abgesehen davon:

Es macht einen Beitrag nicht wirklich wertvoller, wenn man sich in diesem auf unbelegte Kritik und
das Weglassen von Verbesserungs- Beispielen / Vorschlägen beschränkt...

und noch was:

Ich helfe einem Anfänger nicht, indem ich nicht müde werde, ihm die irrelevantesten Fehler wieder und wieder
vorzubeten... Viel interessanter dürfte es sein, ihn auf seinem Weg zur Lösung zu begleiten...

Um die Form / Ästhetik des Codes kann man sich am Ende nochmal unterhalten... :icon6:



Free JavaScript Editor

Öhm was verwendest du denn? Würde dir an dieser Stelle mal Notepad++ empfehlen...
Ist kostenlos, für Javascript einfach nur genial... Leicht erweiter- und anpassbar...
 
Zuletzt bearbeitet:
jungs ist doch egal. Ich bedanke mich für all die Anstrengungen von euch.
Wenn ich alles nur googlen könnte, könnte ja jeder JavaScript.

Ich denke, es ist sicher sinvoll Fehler aufzuzeigen, da ich wirklich neu in der Materie bin. Ob diese dann nicht belegt sind, macht ja nichts, da ich es ja googlen kann/muss.

Ich bin übrigens gestern noch bis 4 Uhr morgens an der JavaScript Arbeit gewesen und ein beachtlichen Stück weiter gekommen.
Dabei habe ich mit für HTML5 entschieden um den Quirksmode (ja ich habe gegoogelt =) ) zu umgehen.

Dabei kann ich weitergeben, dass es sehr hilfreich ist alle grossen Teilaufgaben immer weiter herunterzubrechen auf immer kleinere functionen, bis das ganze Übersichtlicher wird. So konnte ich mir vielen doppelten Code sparen!

Den Notepad++ hab ich bereits gekannt, mal sehen was der in Richtung JavaScript bietet.

Evtl. ist es ja auch nicht eine gute idee gewesen, in einem fortgeschrittenen Forum Fragen zu stellen. Ist ja logisch. Man fragt ja auch nicht Stewen Hawking ob er dir Lego erklärt =).

Gut. Ich möchte eigentlich keine Diskusionen anregen, die evtl. als Quelle für rauhere Umgangsformen dienen könnten.
Somit könnte doch dieser Thread geschlossen werden.

Aus nachvollziehbarer Sicht (wegen der Schule) werde ich nun den Code entfernen. Die prüfen das nähmlich.
Evtl. seht ihr mich später mal wenn ich bei Teilaufgaben hängen bleibe.

Danke nochmals und have a nice day.
 
@justanotheruser: der Hauptgrund für meinen Beitrag war der Link. Die Hinweise auf den "schlechten" Code sind als guter Rat gemeint. Ich kann dir gerne die Stellen in deinem Code aufzeigen, an denen ich etwas zu mäkeln habe (ich könnte auch alle Punkte belegen, wenn der Code nicht gelöscht worden wäre):

1. bei deinem Code sind die Variablen x und y überflüssig, da du sie erzeugst, indem du die CSS-Eigenschaft .left bzw. .top in einen Int parst und danach verwendest du sie, um exakt die gleichen CSS-Eigenschaften eines anderen Elements zu setzten (dabei musst du die Einheit auch noch auf "px" festlegen, was nicht unbedingt die Originaleinheit gewesen sein muss).
2. die Variable piu ist komplett überhaupt nicht deklariert und dass sie auf das Element mit der id="piu" verweist, ist dem Quirksmode zu verdanken... das war aber im vorherigen Code auch schon so.
3. (war nicht in der Aufzählung oben) Außerdem bin ich ein Freund konstanten Codestils und mach deswegen bei JS für die öffnende geschweiften Klammern nie eine neue Zeile (z.B. bei
Code:
funciton test(){
	//...
}
), da es Fälle gibt, in denen das zwingend nötig ist, um das gewünschte Verhalten zu bekommen:
Code:
function test(){
	return
	{
		test: "hallo"
	}
}
alert(test().test);
4. Deine Indentation ist zwar nicht so verwirrend, wie die des Orignalcodes, aber auch inkonsistent (verschiedene Tiefen (2 vs. 4), Kommentare gar nicht eingerückt, geschweifte Klammern manchmal eingerückt - manchmal nicht und eine Zeile ist dir verrutscht) - ist jetzt eine reine Ästhetik-/Codestilfrage, aber ein sauber formatierter Code erhöht die Lesbarkeit und erleichtert damit das Verständnis.

Irrelevant sind die Fehler nicht. Ich habe das alles über den harten Weg lernen müssen und dabei ist viel Zeit draufgegangen. Diese Zeit erspare ich gerne jedem Anfänger und versuche ihn - gleich zu Beginn seiner JS-"Karriere" - auf einen Weg zu bringen, auf dem JS lernen mehr Spaß, weniger Frust und weniger Nacharbeit am Code bedeutet.

Konkrete Hilfe hattest du schon gegeben (meiner Meinung nach etwas zu konkret, da es meiner Meinung nach hier nicht unsere Aufgabe ist, die Hausaufgaben anderer Leute zu machen - aber darüber könnte man streiten) - darum hatte ich mich auf die gerenellen Probleme mit dem Code konzentriert. (Eine komplett funktionierende Lösung hier in Codeform zu präsentieren ist bei einem Anfänger meiner Meinung nach auch kein "Begleiten" zur Lösung... aber das nur am Rande)

@joeschti: Um die "Qualität" eines Codes zu überprüfen gibt es JSLint und JSHint (von ersterem halte ich nicht so besonders viel, da es zu viele Dinge anmäkelt und (meines Wissens nach) nicht weiterentwickelt wird). Die Qualität habe ich in Anführungsstriche gesetzt, da hier natürlich nicht die Logik/Sinnhaftigkeit deines Codes geprüft werden kann. Aber so Sachen wie vergessene Semikola, Codeblöcke ohne geschweifte Klammern, undeklarierte Variablen kann man damit gut finden.
HTML5 ist eine gute Wahl (verwende ich auch), da es zur Zeit so aussieht, als ob das der Zweig der großen HTML-Baums ist, dem es erlaubt wird weiterzuwachsen.

Wir gehen hier gerne auch Anfängern zu Hand. Ich glaube auch nicht, dass sich hier jemand mit Stephen Hawking auf dem JS-Gebiet vergleichen würde... ich auf keinen Fall.

Für den gelöschten Code muss ich dir einen Rüffel erteilen (auch wenn ich deine Gründe halbwegs verstehen kann - für mich ist ein Kompetenzzeichen, dass man sich bei Problemen bei den richtigen Leuten Hilfe holt), da du es kommenden Hilfesuchenden unmöglich machst, aus deinen Fehlern zu lernen.
 
Alles klar, Danke für deine Ausführungen!
Ich muss den Code leider weglassen, da in den Vorgaben ausdrücklich gestanden ist, dass dies aktiv verfolgt wird.
Nun ja, ich bin allerdings schon einiges weiter gekommen und mein Raumschiff schwebt wie gewünscht von Pixel zu Pixel.

Jetzt gilt es die "Gegner" zu erstellen und ein Punktesystem kreieren.

thx
 
Zurück
Oben