Beiträge von Sempervivum

    Mit Hilfe von Stackoverflow und der Doku von chart.js habe ich heraus gefunden, dass sich dein Vorhaben mit mehreren charts umsetzen lässt: Ein Linechart für die gelbe Linie und drei Scattercharts für die braunen Punkte. Ich habe mal eine Demo gemacht, Werte, Farben, Stärken der Punkte etc. kannst Du sicher selbst anpassen:

    Wahrscheinlich wird es schon genügen, den Fehler in Zeile 48 zu beheben:

    Code
    if(input=="") { // hier ein doppeltes Gleichheitszeichen
        
                document.getElementById("listing").innerHTML = "";
                document.getElementById("listing").style.display = "none";
        
        
        }
        
    }

    oder besser einen else-Zweig anzulegen:

    Code
        } else {
                document.getElementById("listing").innerHTML = "";
                document.getElementById("listing").style.display = "none";
        }

    Mal sehen, was ich davon bisher verstehe:

    Die gelbe, gerade, horizontale Linie in dem Bild in deinem ersten Postion ist in Wirklichkeit ein Linegraph wie man ihn normaler Weise kennt und wie man ihn bei chart.js sieht.

    Diesem Diagramm möchtest Du jetzt die braunen Punktwerte hinzu fügen?

    Nein, ich würde nicht von OSM abraten, wenn es das liefert, was Du brauchst. Ich hatte selber schon daran gedacht, aber wegen des Overlays dachte ich, man braucht eine API. Das OVL soll sich ja beim Zommen und Pannen mit bewegen und dabei genau die Position auf der Karte behalten. Wie ich sehe, ist bei OSM auch eine Version mit Satellitenbildern in Arbeit.

    Paint erzeugt Bitmap-orientierte Grafikdateien. Nachteil dabei: Sie lassen sich nur eingeschränkt skalieren, abwärts mit geringem, aufwärts mit starkem Qualitätsverlust. Willst Du eine gute Qualität auch auf großen Bildschirmen musst Du eine große Grafikdatei bereit stellen mit entspr. großer Ladezeit.

    Die Alternative sind vektororientierte Grafiken. Diese lassen sich ohne Qualitätsverlust skalieren und damit an die Größe des Browserfensters anpassen. Außerdem ist die Dateigröße, jedenfalls wenn die Grafik nicht zu komplex ist, kleiner als bei Bitmaps. Der wohl bekannteste kostenlose Editor für Vektorgrafiken ist Inkscape.

    Interessante Aufgabe. Ich denke schon, dass das mit Javascript möglich ist.

    Zitat

    Fakt ist, das Spiel sollte letztendlich auch Internetfähig sein, also man sollte es schon zu zweit spielen können, auch wenn die Spielpartner nicht gerade nebeneinander sitzen.

    Das ist eine gewisse Herausforderung, aber sicher auch machbar. Vor allem, wenn man ein Verfahren verwendet, bei dem man nicht wie bei einem Video die Bewegungen Frame-für-Frame überträgt, sondern nur die Anfangsparameter wie Stoßrichtung und Stoßstärke und die Bewegungen dann auf der anderen Seite neu berechnet.

    Zitat

    Aber alles erstmal Schritt für Schritt.

    Das ist sicher zu empfehlen. Ich habe vor einiger Zeit mal den ersten Schritt getan und den elastischen Stoß programmiert:

    Den Ball links oben kann man durch Ziehen mit der Maus bewegen. Nach Loslassen rollt er weiter und wird entsprechend der Reibung langsamer. Und wenn man gut gezielt hat, trifft er den zweiten Ball. :)

    Das mit dem Ziehen und Loslassen trifft die Vorgänge beim richtigen Billard noch nicht optimal. Auf Anhieb fällt mir aber keine bessere und einfache Lösung ein. Ich dachte daran, eine Queue zu zeichnen, wo man die Richtung mit der Maus durch Ziehen einstellt und durch schnellen Klick den Stoß auslöst, aber optimal wäre das auch nicht.

    Zitat

    Bekomme das leider nicht hin, 'content' entsprechende IDs zu geben

    Das ist gar nicht nötig, weil #content ja das Ziel ist, wohin die Texte sollen und das ist immer das selbe. Wenn der Text jeweils im value-Attribut steht, wie in deinem Code, ist es ganz einfach:

    Code
    <script type="text/javascript">
    function changeContent(txt){
        document.getElementById('content').innerHTML = txt;
    }
    </script>
    <div id="content">Das ist der aktuelle Text....</div>
    <input type="button" value="alternativer Text 1" onclick="changeContent(this.value);"/>
    <input type="button" value="alternativer Text 2" onclick="changeContent(this.value);"/>
    <input type="button" value="alternativer Text 3" onclick="changeContent(this.value);"/>

    Wenn die Text etwas länger werden sollten, ist es eher zu empfehlen, sie in Variablen zu definieren und diese als Parameter an changeContent() zu übergeben.

    Das ist ja jetzt mysteriös, dass es auf einmal funktioniert, ohne dass wir etwas wesentliches geändert haben. Aber OK.

    BTW finde ich deine Frage, den API-Key zu verbergen, berechtigt. Ich habe mich häufig gefragt, warum man eine API mit einem Key absichert, wenn jeder ihn im Browser aus dem Javascript ablesen kann.