Upgrade to Chess.com Premium!

Open Source JavaScript Chess Board


  • 11 months ago · Quote · #21

    Trahald

    Actually it would not be difficult using ChessBoardJS as a PGN viewer when used in combination with the chess.js library. http://chessboardjs.com/examples#5000 and https://github.com/jhlywa/chess.js (load_pgn) should be all you need to get started.

    Of course there are several PGN viewers around, however most of them I find are rather outdated, require additional browser plugins such as Java or are rather restrictive with what you can do with them. The ability to setup positions via a FEN string, or simply being able to move pieces on the board by dragging and dropping with no need for PGN files is awesome, and necessary for the current project I am working on.

  • 11 months ago · Quote · #22

    BlauePeter

    Hi DrFrank12c,

    pgn4web is a plugin and whoever makes it can change it or drop it etc.  and therefore not as usable as being able to add the actual JavaScript code to my website and if there are udates and I don't like them I don't have to do them. 

    mistybeach is a Java Applet and you have to consent to running Java these days as it has security issues and not everyone runs Java so I prefer JavaScript solutions. 

    Cheers

  • 11 months ago · Quote · #23

    BlauePeter

    Trahald wrote:

    Actually it would not be difficult using ChessBoardJS as a PGN viewer when used in combination with the chess.js library. http://chessboardjs.com/examples#5000 and https://github.com/jhlywa/chess.js (load_pgn) should be all you need to get started.

    Of course there are several PGN viewers around, however most of them I find are rather outdated, require additional browser plugins such as Java or are rather restrictive with what you can do with them. The ability to setup positions via a FEN string, or simply being able to move pieces on the board by dragging and dropping with no need for PGN files is awesome, and necessary for the current project I am working on.

    Hi Trahald,

    Sounds complicated and I don't think I have that skill set.  :(

    Cheers

  • 11 months ago · Quote · #24

    BorgQueen

    This all does sound complicated.

  • 11 months ago · Quote · #25

    BlauePeter

    oakmac wrote:

    Hi :)

    I recently released an open source javascript chess board: http://chessboardjs.com/examples

    Thought this community might be interested. Feedback welcome!

    Thanks,

    Chris

    Hi Chris,

    If exploring an opening I would start with a sequence like this: 1. e4 e5 2.Nf3 Nc6 3.Bb5 and I don't see how that can be done with the "moves" example.  You can either make a bunch of 1-moves or 2_moves but that is not how I can show an opening to a student. It needs so be sequential.  One move at a time.

    I can make moves on your ChessBoard and record them but the output is not a 'valid' FEN string that I can feed into chess.com analyzer board.  I think the FEN string needs to know about 'en passant' and who is to move next and who has and who has not castled. 

    It would be nice if I could give a PGN String as an argument just the way I can do that with a FEN string and then play through the sequnce of moves. 

    I love the graphics and the size of the board!  I like that I can include it on my server and generate a board.  I can see it would be great for a presenting a puzzle.

    I guess the chess.com analyzer board would be a model for your ChessBoard?

    I will see if I can do anything with what Trahald suggested but I would have to learn a lot of JS and Jquery is my guess.

    Cheers,

    Peter

  • 11 months ago · Quote · #26

    BlauePeter

    Trahald wrote:

    Actually it would not be difficult using ChessBoardJS as a PGN viewer when used in combination with the chess.js library. http://chessboardjs.com/examples#5000 and https://github.com/jhlywa/chess.js (load_pgn) should be all you need to get started.

    Of course there are several PGN viewers around, however most of them I find are rather outdated, require additional browser plugins such as Java or are rather restrictive with what you can do with them. The ability to setup positions via a FEN string, or simply being able to move pieces on the board by dragging and dropping with no need for PGN files is awesome, and necessary for the current project I am working on.

    I have the two, ChessBoard and Chess, working together. :) 

    Now I will see how to use the png functionality of Chess to display a board via CHessBoard and then play through the png string so an opening can be explored. 

    I will keep you posted. 

    By the way the source for the images of the pieces is hard coded and if you want to move a srcipt out of the parent directory you will need to either change the hardwire code or copy the img/chesspieces/wikipedia png images to the current directory.

    Let me know if anyone wants more details on how.  I can post or send the test scripts.

    Cheers,

    Peter

  • 11 months ago · Quote · #27

    quadriple

    So where can I get the HTML code for the board?

  • 11 months ago · Quote · #28

    BlauePeter

    quadriple wrote:

    So where can I get the HTML code for the board?

    <!doctype html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>JavaScript Chess</title>

    <link rel="stylesheet" type="text/css" href="chessboard/css/chessboard-0.3.0.min.css">
    </head>
    <body>
    <div id="board" style="width:400px"> </div>
    <script type="text/javascript" src='chessboard/js/jquery.js'> </script>
    <script type="text/javascript" src='chessboard/js/chessboard-0.3.0.js'> </script>
    <script type="text/javascript" src='chess_J/chess.js'> </script>

    <script type="text/javascript">
            var game = new Chess();
            var board = new ChessBoard('board', 'start');


        var random_move = function() {
            if (game.game_over()) return;
            var moves = game.moves();
            var move = moves[Math.floor(Math.random() * moves.length)];
            game.move(move);
            board.position(game.fen());
            window.setTimeout(random_move, 500);
       };

            window.setTimeout(random_move, 500);       
    </script>
    </body>
    </html>

     

    The above presumes you have downloaded the files from http://chessboardjs.com/ and https://github.com/jhlywa/chess.js

    I renamed the folder  from chess.js to chess_J.  The folders chessboard and chess_J reside in a folder named chess.  I run the script from the chess folder and that necessitates having to copy img/chesspieces/wikipedia into the chess folder.

    The html code displays a chessboard in the start position and then random moves are displayed.  That is as far as I have gotten. 

    I hope this is as clear as mud.  :)

    Cheers,

    Peter

  • 11 months ago · Quote · #29

    quadriple

    BlauePeter wrote:
    quadriple wrote:

    So where can I get the HTML code for the board?





    JavaScript Chess




     







     

     

    The above presumes you have downloaded the files from http://chessboardjs.com/ and https://github.com/jhlywa/chess.js

    I renamed the folder  from chess.js to chess_J.  The folders chessboard and chess_J reside in a folder named chess.  I run the script from the chess folder and that necessitates having to copy img/chesspieces/wikipedia into the chess folder.

    The html code displays a chessboard in the start position and then random moves are displayed.  That is as far as I have gotten. 

    I hope this is as clear as mud.  :)

    Cheers,

    Peter

    I have a few questions about the code.

    1->What does do??

    I have seen it in a lot of places where they tell you how to make chessboards.

    2->what does  do??

    3->Shouldn't

    <--<script type="text/javascript" src='chessboard/js/jquery.js'> </script>
    <script type="text/javascript" src='chessboard/js/chessboard-0.3.0.js'> </script>
    <script type="text/javascript" src='chess_J/chess.js'> </script>
    -->

    be in head section if you are using HTML 5 or did I get that concept wrong?

    4->Can you show the out put of the code using insert position or game??

    5-> can we discuss this at length using messages?

    thanks.

  • 11 months ago · Quote · #30

    BlauePeter

    quadriple wrote:
    BlauePeter wrote:
    quadriple wrote:

    So where can I get the HTML code for the board?

    JavaScript Chess

    The above presumes you have downloaded the files from http://chessboardjs.com/ and https://github.com/jhlywa/chess.js

    I renamed the folder  from chess.js to chess_J.  The folders chessboard and chess_J reside in a folder named chess.  I run the script from the chess folder and that necessitates having to copy img/chesspieces/wikipedia into the chess folder.

    The html code displays a chessboard in the start position and then random moves are displayed.  That is as far as I have gotten. 

    I hope this is as clear as mud.  :)

    Cheers,

    Peter

    I have a few questions about the code.

    1->What does do??

    I have seen it in a lot of places where they tell you how to make chessboards.

    2->what does  do??

    3->Shouldn't

    <--


    -->

    be in head section if you are using HTML 5 or did I get that concept wrong?

    4->Can you show the out put of the code using insert position or game??

    5-> can we discuss this at length using messages?

    thanks.

    Hi,

    oakmac posted his ChessBoard software, which displays a chessborard, and some basic functions, here: http://chessboardjs.com/  This needs to be downloaded and unzipped. 

    The other piece of software that is needed can be found here: https://github.com/jhlywa/chess.js and it is the same sceanrio > you need to unzip, etc.

    And my demo script takes advantage of these two two software apps and show a random game being played. 

    I am not an HTML or HTML 5 expert and have no clue how things should work. 

    All I know I have a script that works for me and you will have to adapt it after you figure out: http://chessboardjs.com/ and https://github.com/jhlywa/chess.js

    What are you trying to do? 

    Cheers,

    Peter

  • 9 months ago · Quote · #31

    oakmac

    Hi folks :)

    I posted here a while ago and promptly forgot about it; sorry!

    Appreciate the kind words and feedback.

    If anyone runs into issues the best place to get help is on the GitHub project issues: https://github.com/oakmac/chessboardjs/issues?state=open

    -- Chris

  • 6 months ago · Quote · #32

    jsladek

    This is awesome!

  • 6 months ago · Quote · #33

    Zenchess

    I have been using it to teach my students :=)

  • 3 months ago · Quote · #34

    Zenchess

    No offense tigerprowl, but it seems you are trying to make this library into something it is not.  This is not a full featured chess app.  This is a bare bones javascript library useful for programmers and no one else.  That being said, someone could fork the project possibly and do the things you are saying.  It just wouldn't affect the main repo.


Back to Top

Post your reply: