Hilfe! Spiel mittels html, css und javascript

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo zusammen,

ich habe ein Problem: Ich soll ein Spiel erstellen, bei dem in einem Zimmer (img) mit Müll bedeckt ist (weitere imgs - pngs für transparenten Hintergrund). Der Benutzer des Spiels soll dann den Müll anklicken, um ihn verschwinden zu lassen. Doch es taucht weiterer Müll auf. Das ganze soll nach einer gewissen Zeit enden (entweder wenn nach einer best. Zeit kein Müll mehr da ist ODER wenn der Spieler vom Müll zu gehäuft ist).

Ich habe mir überlegt, dass es das beste ist die Bilder (Müll) zu layern, damit diese auch übereinander liegen können und das ganze muss dann durch die Sichtbarkeit in einer externen javascript gesteuert werden (Sichtbarkeit der Bilder und auch die Dauer).

Hier mal mein html-text dazu:
(Hintergrund)

Leider funktioniert das ganze noch nicht. Sieht einer vllt einen Fehler?

Was Javascript angeht bin ich ein absoluter Noob :frowning: Kann mir dazu jemand ein Tipp geben wie ich das am besten umsetze? Oder kennt ihr ein Spiel, dass ähnlich umgesetzt ist?

#2

Moin,

das ganze Live im Browser zu sehen hilft um die Fehler zu finden. Hast die die Möglichkeit einen Link dazu bereit zu stellen ?

Auf den ersten Blick fällt auf das dein style-Attribut den z-index nicht mit einschliesst, lautet müsste es z.B.

Wobei du auch die Bilder als Hintergrundbilder der DIV’s angeben kannst:

 

Da alle Bilder zum Teil die gleichen Style-Attribute haben ist es ausserdem ratsam hier eine Klasse zu verwenden.

Für weitere Tipps zur optimalen Lösung der Aufgabe stehe ich gerne zur verfügung.

Besten Gruß,
Timo

#3

Hallo JazzzY,
kannst du mir denn mal den kompletten Code rüberschicken? Dann schaue ich mir´s gerne einmal an. Die Grundidee ist auf jeden Fall schonmal Okay :smile:
Am besten schick´st du es mir per Email ([email protected])

#4

Hallo JazzY

mal abgesehn, dass du dein jaavscript nicht gepostet hast, kann ich mir
aktuell nur vorstellen, dass du die layer noch nicht positionieren kannst, da
dein css style falsch geschrieben ist … es muss heissen position:absolute
es fehlt also ein e

gruß silvio

#5

Hallo Silvio,

da hat allerdings ein e gefehlt ^^ vielen Dank! Vor allem für die schnelle Hilfe. Das gilt natürlich auch für den Rest der Antworten!

An der Javascript sitze ich momentan noch dran und lese mich durch alle möglichen Foren. Bis jetzt aber ohne Erfolg (finde einfach nichts Vergleichbares).

Mir ging es im Bezug auf die Frage nach Javascript vor allem darum mal einen Stoß in die richtige Richtung zu bekommen, da ich bisher noch keine Javascript-Programmierung gemacht habe.

Jess

#6

Erstmal WAS funktioniert WIE NICHT?
Ohne Bilder ist das außerdem schwer zu sagen… Sind die Bilder 32bit, also haben sie einen Alpha-/Transparenz-Kanal?

#7

Hallo JazzzY

Leider funktioniert das ganze noch nicht. Sieht einer vllt
einen Fehler?

Was genau funktioniert denn nicht?

lg
Sam

#8

Hier mal mein html-text dazu:

(Hintergrund)

Eine Frage dazu: Kann man Deinen bisherigen Versuch irgendwo im Netz sehen? So was ist immer hilfreich, um Fehler zu finden.

z-index:1 (mit dem Doppelpunkt) kann so nicht funktionieren. Es gehört zum Style, also etwa so:
…

Was Javascript angeht bin ich ein absoluter Noob :frowning: Kann mir
dazu jemand ein Tipp geben wie ich das am besten umsetze? Oder
kennt ihr ein Spiel, dass ähnlich umgesetzt ist?

Vielleicht hilft http://de.selfhtml.org/dhtml/ weiter. Aber das braucht dann schon einige Zeit, um sich einzuarbeiten…

#9

Hallo Zusammen,

ja das ich die Seite noch nicht im Netz habe ist etwas ungünstig, ich wollte es gestern auf den Server der Hochschule Offenburg setzen, damit ihr es auch sehen könnt, leider hat da was nicht geklappt, kann mich gerade nicht mit dem Server verbinden. Ob die das Passwort geändert haben oder ähnliches weiß ich leider erst ab Mittwoch, wenn ich wieder vor Ort bin. Und dann stelle ich das Ganze auch ein. Sorry dafür!

Mit ES FUNKTIONIERT NICHT, meinte ich ursprünglich das Problem, dass ich nicht mal die Bilder richtig positionieren (layern) konnte, das hat sich jetzt aber erledigt durch das ändern von position:absolut in position:absolute.

Der z-Index hat bisher so funktioniert und funktioniert auch wenn ich den in die style rein packe… ich nehme an um spätere Fehler zu vermeiden ist es sinnvoller ihn mit in das style zu packen. Danke für den Tipp :smile:

Die Bilder habe ich alle in png24 gespeichert, ist also alpha-transparent!

Natürlich hab ich bisher nichts unversucht gelassen mich durch selfhtml oder auch w3schools.com durchzulesen, habe aber meistens dort nicht mal die Hilfe gefunden die ich brauchte sondern indem ich mich durch andere Foren (und auch dieses ^^) gelesen habe. Da ich nun aber doch unter Zeitdruck stehe, das Spiel zu beenden habe ich mich entschlossen mal selber eine Frage ins Forum zu posten.

Mit euren Antworten habt ihr mir bis jetzt schon super geholfen, danke dafür! :smile: Jetzt im Moment sitze ich gerade an der javascript Funktion und werde mich dann bestimmt wieder mit dem nächsten Problem melden. Falls ihr da aber noch Anregungen habt, bin ich für alle Ideen dankbar.

Viele Grüße Jess

#10

Leider bin ich in Deiner Angelegenheit überfragt. Wie gern hätte ich Dir geholfen.

fuchs7

=====
Die Auskünfte und Ratschläge, die hier erteilt werden, ersetzen nicht die Beratung durch einen Arzt und sind vollkommen unverbindlich. Ratschläge von Fachkundigen (Ärzten und/oder Heilpraktikern, Apothekern usw.) sind von diesem Vorbehalt nicht ausgenommen, da durch die Schriftform eine echte Diagnosestellung, somit auch ein Therapievorschlag, ausgeschlossen ist.

Gleichzeitig warnen wir ausdrücklich vor Selbstmedikation ohne Rücksprache mit dem behandelnden Arzt, Heilpraktiker oder mit dem Apotheker.

#11

Dein Quelltext ist ganz normales HTML und kein JavaScript und Sieht erstmal ok aus.

Aber ich denke du suchst folgendes:
http://de.selfhtml.org/html/grafiken/verweis_sensiti…

Damit kannst du auf deinem Spielbrett ein Raster legen. Die URL in dem „href“ musst du jetzt durch einen Verweis auf das entsprechende Javascript austauschen.

jede deiner Zellen bzw. das aktuelle Bild in dieser Zelle muss eine ID haben, damit du mit „getElementById()“ die DOM-Elemente der Zelle/Bilder holen kannst. Wenn Haufen weg soll, dann kannst du entsprechend das Spielbrettbild via DOM ein bauen.

http://de.selfhtml.org/javascript/index.htm
http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/images.htm

Es gibt die Möglichkeit in JavaScript einen „Timer“ zu bauen. Diesen musst du Starten um das Spiel zu beginnen. Denn das Spielt soll ja automatisch die Müllhaufen auf das Brett legen…

http://www.mediaevent.de/javascript/animation.html

#12

Soooo da ich ja gesagt hatte ich mach es auf einen Server damit ihr überhaupt wisst um was es geht, hier mal ein Link (mit Dank an Jens, der mir Platz bereit gestellt hat):
http://www.dasprojektportal.com/game.html

Momentan bin ich an einem Punkt, wo ich nach einer Lösung suche, die Bilder am Hintergrundbild auszurichten. Bislang wie man sieht ohne Erfolg (merkt man wenn man die Breite des Browsers verändert) …habe schon versucht das Bild in die div rein zu packen und von dort aus aufzurufen, sowie es über die css aufzurufen, aber dann zeigt er mir das Hintergrundbild gar nicht mehr an. Die übergeordnete div hab ich auch schon versucht mit einer festen Breite und Höhe zu versehen aber das klappt auch nicht.

Weiterhin ist irgendwo ein Fehler, weshalb er mir die Funktion zufall() nicht durchführt.

An der Stelle wo das Spiel enden soll und ein neues Fenster geöffnet wird bin ich noch nicht angekommen :smile:

#13

also ich habe mal kurz dein spielchen angeschaut, irgendwie eine witzige idee

erstmal habe ich drei fehler im CSS gefunden
zeile 45
du hast: heigth: 80%;
richtig ist: heigth: 80%;

zeile 54:
du hast: position:absolut;
richt ist: position:absolute;

im HTML hast du noch einen weiteren CSS-Fehler in zeile 88
du hast

richtig ist

das Spiel funktioniert erstmal bei mir. das mit dem Positionieren kann nur funktionieren, wenn du relative Werte für die Positionen benutzt. Diese relativen Werte müssen entweder zur Bildschirmgröße des Browser oder eines definierten DIV-Layers (welcher zum Beispiel mit der Bildschirmgröße skaliert) erfolgen…ebenfalls muss du entsprechen auch die Müllhaufen mit skalieren. Zum Beispiel 1024x768 ist die 100% Referenz, dann muss alles bei 800x600 kleiner gemacht werden und bei 1920x1080 vergrößert werden…

Dein beschriebenen Fehler im Javascript konnte ich nicht finden, bei mir läuft alles fehlerfrei.
Habe einen Firefox 12 und Internet Explorer 9.

Beim IE9 wird aber ein blauer Rahmen um deine Müllhaufen gerendert, da schein das CSS noch nicht optimal zu sein.

1 Like
#14

danke für die Hinweise :smile:

An die Positionierung muss ich definitiv nochmal ran…

#15

Leider keine Hilfe von mir möglich. fuchs7

#16

danke trotzdem :smile:

Leider keine Hilfe von mir möglich. fuchs7