Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Werbeanzeige

11

11.05.2016, 22:47

Ich ziehe meine Kritik bezüglich fehlenden Links zurück. Ich habe was in der Form http://xyzseite.de gesucht und den treffend als Webseite bezeichneten Link gar nicht gesehen.

$("irgendwas") liefert dir die gefundenen DOM-Elemente in einem jQuery Wrapper. Wenn das Element noch nicht angelegt ist (weil nicht geladen) bekommst du trotzdem einen gültigen jQuery Wrapper. Nur leider ist kein DOM-Element dahinter und sie werden auch nicht später automatisch ergänzt. Also funktionieren deine Event-Handler nicht.

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

12

12.05.2016, 06:46

Kein Problem, und danke für die Erklärung :)

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

13

13.05.2016, 21:58

@H5:::
Und warum sollte das Importieren weiterer HTML-Bestandteile Clientseitig durchgeführt werden?


Abgesehen von dem bereits genannten, kannst du deinen Code noch weiter verbessern.
Statt die weißen und schwarzen Tasten separat zu handhaben

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.white').mouseenter(function() {
        $(this).addClass('highlighted_white');
    });
    $('.white, .black').mouseleave(function() {
        $(this).removeClass('highlighted_white');
    });

    $('.black').mouseenter(function() {
        $(this).addClass('highlighted_black');
    });
    $('.black').mouseleave(function() {
        $(this).removeClass('highlighted_black');
    });
kannst du dies auch einheitlch machen

Quellcode

1
2
3
4
5
6
$('.white, .black').mouseenter(function() {
        $(this).addClass('highlighted');
    });
    $('.white, .black').mouseleave(function() {
        $(this).removeClass('highlighted');
    });
Oder noch besser: verwende CSS für Hovereffekte

Quellcode

1
.white:hover { [...] }


Statt jeden Ton in einer separaten Zeile zu laden und in jeder Zeile separat den richtigen callback zuzuweisen, könntest du eine Datenstruktur anlegen, die die notwendigen Informationen beinhält

Quellcode

1
2
3
4
5
6
var keys = [
   {id: 'w_A0', fileName: 'A0'},
   {id: 'A0', fileName: 'Bb0'},
   {id: 'w_B0', fileName: 'B0'},
   [...]
}
Über diese muss dann nur einmal iteriert werden, um für jedes Element die Taste zu initialisieren. (Besser wäre es, wenn die IDs der Tasten sich nicht von den Dateinamen unterscheiden würden, da die IDs ohnehin nicht sinnvoll gewählt aussehen.) Da die Pfade der Sound-Dateien sich nur im Dateinamen unterscheiden, kann man diesen aus einem konstanten Teil und dem variablen Teil des Dateinamens beim Iterieren zusammensetzen.


Für die Usability wäre es vielleicht besser, die Töne schon beim Drücken der Taste zu spielen, nicht erst beim Loslassen.
Und weiterhin klingen die Tasten viel zu lange nach. An einem richtigen Klavier bekommt man ein solches Verhalten nur durch das rechte Pedal, welches man aber nicht permanent gedrückt hält.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

Lindraupe

Frischling

  • »Lindraupe« ist der Autor dieses Themas

Beiträge: 62

Wohnort: Wien

  • Private Nachricht senden

14

13.05.2016, 23:03

Zu deinem ersten Vorschlag: Wenn ich das beim Javascript einheitlich mache, könnte ich dann bei Piano.css mit etwas wie ".white .highlighted {...}" die schwarzen und weißen Tasten unterschiedlich hervorheben?
Und immer wieder lustig wenn man sieht wie umständlich man es sich machen kann (und nicht einfache :hover benutzen) ^^

Zu var Keys = []: Da ich bis jetzt nur ein bisschen mit C++ gearbeitet habe hab ichs halt eher einfach und umständlich gemacht, aber ich werds versuchen einzubauen :)
Das Beispiel wäre in C++ so ca. ein Array von (ID, Path)-Strukturen? Ich werds mir auf jeden Fall mal anschauen.


Und mit dem Klicken werd ich noch ein bisschen herumprobieren, z.B. dass wenn die Maus gedrückt ist und du über mehrere Tasten fährst, dass es sie dann alle spielt. Das mit Maus loslassen war nur eine Zwischenlösung
Das mit dem Nachklingen liegt wahrscheinlich daran, dass ich das Pedal immer exzessiv benutze :P Aber danke für die Info, ich werd dann noch ein paar andere fragen wie es ihnen besser gefällt.

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

  • Private Nachricht senden

15

13.05.2016, 23:56

.white.highlighted { [...]}, aber ansonsten ja. (Das Leerzeichen würde dafür sorgen, dass ein Element mit der Klasse "highlighted" nur dann gematcht wird, wenn irgend ein Elemente darüber die Klasse "white" besitzt. So muss das gleiche Element beide Klassen besitzen.)
Wenn dir die Pseudoklasse hover nicht bekannt war, solltest du dich nochmal ein wenig mit CSS3 beschäftigen. ;)

Ja, in anderen Sprachen hätte man eine Struktur oder Klasse mit dem Werten "Tastenname" und "Dateiname" (o. ä.), in JavaScript hat man Objekte, die entsprechende Member besitzen. Die Objekte liegen in diesem Fall in einem Array ([ {...}, {...}, {...} ]). Man kann in JavaScript auch andere Wege gehen, um Arrays und Objekte zu erzeugen, in einem solchen Fall wäre eine solche Vorgehensweise die einfachste.

Für das drüber fahren müsste ein wenig mehr gemacht werden. Das übergeordnete Element bräuchte ebenfalls einen "mousedown" listener, die Tasten müssten von diesem bei einem "mouseenter" den Zustand abfragen (Maus gerade gedrückt oder nicht) etc. Das sollte sich aber noch alles in einem ausreichend kleinen Rahmen aufhalten.
Spieleentwickler in Berlin? (Thema in diesem Forum)
---
Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

Werbeanzeige