Interaktiver Spielautomat

  • Hallo,


    Ich habe folgendes vor. Ich möchte einen interaktiven Spielautomaten im Form eines png. Im Bildschirm werden die Spiele (vermutlich 3) über Pfeile weitergeschaltet. Mit Klick auf den Bildschirm springt man dann zum jeweiligen Spiel. Ich habe 3 Spiele in Unity WebGls programmiert. Ich habe hier eine kleine Skizze die das besser erklären sollte. Ich weiß leider nicht wie ich überhaupt mit der html und css anfangen soll.

  • Was mich irritiert ist, dass Du schreibst "in Form eines png" und dass ich in dem Bild ein "Spiel1.jpg" sehe. Weder png noch jpg ist interaktiv? Bei WebGL denke ich eher an Canvas?

    Entschuldige. Alles sollen Bilder(ob png oder jpg ist egal) sein. Wenn man auf die klickt, wird man natürlich auf eine andere Seite verklinkt. Also für jedes Spiel eine eigene Seite.

  • Ach so, verstehe. In dem Fall würde ich etwas vorgefertigtes nehmen, z. B. Swiper:

    https://swiperjs.com/demos

    Hmm ich glaub ich wurde noch immer nicht richtig verstanden :D Sorry, irgendwie schwierig das auf Papier zu bringen.

    Also ich will das gar nicht so kompliziert. Automat.jpg und die Arrows sollen sich gar nicht verändern. Nur das Bild im Automat (Spiel1.jpg, Spiel2.jpg, Spiel3.jpg) und dazu halt der richtige Link der immer auf eine separate Seite geht. Das Bild(und der Link) wird über das klicken auf die Arrows weitergeschaltetIch hoffe nun verständlicher :)

  • So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.

  • So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.

    Ist das auch irgendwie ohne die Json möglich?

  • Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.

  • Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.

    Vielleicht etwas zum Background. Das ganze ist eine kleine Projektarbeit und es bleibt definitiv bei 3.

  • OK, dann würde ich auch zu etwas vorgefertigtem raten. Bei Codepen gibt es sicher jede Menge Slider nur mit CSS, z. B dieser:

    https://codepen.io/rokobuljan/pen/XXzqKQ

    Danke. Das entspricht schon mehr was ich suche. Nur verstehe ich nicht ganz, wie er überhaupt die beiden Kreise zum weiterschalten erstellt hat. Und wie ich das hinkriege das die beiden außerhalb der Box sind und nicht innerhalb. Ich hab das ganze schon so weit bearbeitet das es ganz klein ist.

  • Ich habe sie zunächst nach außen gelegt, war soweit kein Problem:

    https://codepen.io/Sempervivum/pen/dyWYNvb

    (Ich habe die Änderungen mit Pfeilen --> markiert und kommentiert).

    So weit so gut. Nur wird jetzt links und rechts der benachbarte Container sichtbar und wenn ich das beheben will, werde ich mit den Nachteilen einer nur-CSS-Lösung konfrontiert: Ich müsste die prev-/next-Buttons aus dem Container heraus nehmen aber das geht nicht ohne weiteres, weil die Anordnung durch die Funktion eingeschränkt ist.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!