Interaktive Schach-Elemente für HTML-Seiten: Schach-Programm und Live-Übertragung von Schach-Turnieren

Für das Schach-Programm Fritz von ChessBase wird gezeigt, wie es in eine HTML-Seiten integriert werden kann. Der pgn-Viewer von ChessBase kann verwendet werden, um Live-Übertragungen von Schach-Turnieren in einer HTML-Seite anzuzeigen.

Einordnung des Artikels

Einführung

In Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer wurde schon der pgn-Viewer von ChessBase vorgestellt, der als Analyse-Werkzeug schon mit einem vollwertigen Schach-Programm konkurrieren kann. Um eine Partie Schach zu spielen, ist er aber ungeeignet. Dafür gibt es von ChessBase ein komplettes Schach-Programm, namens Fritz, gegen das man bei unterschiedlichen Spielstufen antreten kann. Seine Funktionalität und wie man es in eine HTML-Seite einbinden kann, wird unten erklärt.

Der pgn-Viewer von ChessBase kann dazu verwendet werden, Live-Übertragungen von Schach-Turnieren anzuzeigen. Wie man den pgn-Viewer dazu konfiguriert, wird ebenso gezeigt.

Das Schach-Programm Fritz

Auf der Seite

https://www.schach.de/HowTo/EmbedFritz

wird gezeigt, wie man das Schach-Programm Fritz in eine HTML-Seite integriert. Was auf dieser Seite nicht ganz klar zum Ausdruck kommt, ist welche Funktionalität die frei verfügbare Version besitzt und welche Funktionalitäten hinzukommen, wenn man sich registriert.

Integration in eine HTML-Seite

Die Integration von Fritz erfolgt mit einer einzigen Zeile im Quelltext (an der Stelle, an der sich das Programm befinden soll):

<iframe src="https://fritz.chessbase.com" style="width:960px;height:680px"></iframe>

Höhe und Breite des Programm-Fensters kann man nach Belieben anpassen. Mehr ist nicht nötig: Es sind keine weiteren javascript- und css-Dateien zu laden und man kann sofort zu spielen beginnen.

Eine komplette HTML-Seite könnte daher wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ChessBase: Fritz</title>

    </head>
    <body>
    
        <h1>Schach-Programm Fritz von ChessBase</h1>
        
        <iframe src="https://fritz.chessbase.com" style="width:960px;height:680px"></iframe>

</body>
</html>

Funktionalität des Schach-Programms

Mit einem echten Programm (wie die Original-Version von Fritz) ist die HTML-Version natürlich nicht vergleichbar, die grundlegenden Funktionalitäten eines Schach-Programms sind aber enthalten:

  • Man kann 5 Spielstärke-Stufen auswählen (von Einsteiger bis Großmeister).
  • Man kann auch eine Analyse-Stufe wählen, in der beliebig lange an einer Stellung gerechnet wird. Man kann sich dabei eine oder mehrere Varianten anzeigen lassen, für die eine Bewertung berechnet wird (die Rechentiefe wird angezeigt).
  • Die Partie kann als pgn-Datei geladen werden.
  • Man kann sich einen Tip geben lassen.
  • Man kann Remis anbieten.

Das Eröffnungs-Buch (Live-Buch) ist nur sehr eingeschränkt nutzbar; um den vollen Leistungsumfang zu nutzen, muss man einen ChessBase Account anlegen.

Ohne Account sieht man zumindest, ob man sich noch "im Buch" befindet und wie viele Züge zur Auswahl stehen – welche es sind und die üblichen statistischen Auswertungen sind nicht sichtbar.

Man kann dies auch als Vorteil sehen: Durch die Information, ob man noch "im Buch" ist, kann man gezielt Eröffnungs-Varianten trainieren.

Es gibt noch zwei weitere Funktionalitäten, die man erwähnen sollte:

  • Man kann eine Partie aus einer gegebenen Stellung starten; die Stellung wird dabei über den FEN-Code definiert.
  • Man kann Fritz zum Endspiel-Training nutzen; dazu müssen die Felder der Steine eingegeben werden.

Die beiden Möglichkeiten werden in den folgenden Abschnitten erklärt.

Eingabe einer Anfangsposition

Oben wurde gezeigt, dass Fritz lediglich dadurch geladen wird, dass ein iframe-Element in die HTML-Seite integriert wird, dessen Quelle durch src="https://fritz.chessbase.com" gegeben ist.

Qd7Abbildung 1: Stellung nach 9...Qd7??

Möchte man eine Partie aus einer speziellen Anfangsposition starten, wird der Quelle eine Variable namens fen übergeben, die als Wert den FEN-Code erhält. Der Quelltext lautet dann:

<iframe src="https://fritz.chessbase.com?fen=r4rk1/pppq1ppp/3p1n2/2bNp1B1/2BnP1b1/3P1N2/PPPQ1PPP/R4RK1 w - - 0 10" style="width:960px;height:680px">
</iframe>

Die Anfangsposition stammt aus der Italienisch-Partie, die bei der Besprechung der pgn-Viewer vorkam (siehe Abbildung 1).

EndspieltrainingAbbildung 2: Ausgangsstellung im Endspieltraining mit Weiß am Zug

Sind nur noch wenige Steine auf dem Brett, kann man anstelle des FEN-Codes auch die Position – mit der Variable pos – eingeben, wie man am folgenden Beispiel sieht (mit der Stellung aus Abbildung 2):

<iframe src="https://fritz.chessbase.com?pos=wKc6Pd5/bKe8" style="width:960px;height:680px">
</iframe>

Live-Übertragung von Schach-Turnieren

ChessBase

Die Erklärung, wie man Live-Übertragungen in eine eigene HTML-Seite einbindet, findet man unter dem ersten Link:

https://www.schach.de/HowTo/EmbedLiveChess
https://live.chessbase.com/

Unter der zweiten Adresse kann man sehen, welche Turniere aktuell übertragen werden.

Man kann sich jetzt

  • entweder ein Turnier auswählen
  • oder eine wildcard setzen und damit alle Turniere anzeigen – was manchmal sehr umfangreich sein kann.

Zur Auswahl eines Turnieres reicht es meist, den Veranstaltungsort (zum Beispiel Wijk) anzugeben; dieser wird dann in einem <div> -Element gesetzt:

<div class="cblive" data-event="Wijk" data-date="*">
</div>

Um alle Turniere zu laden, wird anstelle von Wijk die wildcard gesetzt:

<div class="cblive" data-event="*" data-date="*">
</div>

Das <div> -Element füllt den pgn-Viewer von ChessBase mit Inhalt; dieser muss dann wie in Interaktive Schach-Elemente für HTML-Seiten: pgn-Viewer beschrieben mit Hilfe von drei Dateien im Kopf der HTML-Datei geladen werden:

<link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css"/>
<script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
<script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>

Eine komplette HTML-Datei könnte dann wie folgt aussehen:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ChessBase Live-Turnier</title>
        
        <link rel="stylesheet" type="text/css" href="https://pgn.chessbase.com/CBReplay.css"/>
        <script src="https://pgn.chessbase.com/jquery-3.0.0.min.js"></script>
        <script src="https://pgn.chessbase.com/cbreplay.js" type="text/javascript"></script>
        
    </head>
    <body>

        <h1>Live-Turnier</h1>

        <div class="cblive" data-event="*" data-date="*"></div>

</body>
</html>

chess24

Ein beliebter Anbieter von Live-Übertragungen ist chess24. Auf einer Erklärung der Nutzung der Homepage unter dem Link

https://support.chess24.com/hc/de/categories/200103517-chess24-nutzen-Die-Website

wird zwar gesagt, dass ein Einbinden der Übertragung erwünscht ist und durch einen sharebutton ermöglicht wird (Anklicken des sharebutton öffnet ein Popup, in dem sich der Quelltext zum Einbinden befindet), der sharebutton ist aber nirgends zu sehen. Hinweise werden gerne entgegengenommen.

Alle Kommentare
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Außerdem werden teilweise auch Cookies von Diensten Dritter gesetzt. Genauere Informationen finden Sie in unserer Datenschutzerklärung sowie im Impressum.