Search code examples
javascripthtmlchesschessboard.js

How can I integrate chess.js and chessboard.js?

I am trying to integrate Chess.js and Chessboard.js but I am having some problems along the process. I have downloaded successfully Chessboard.js, unzipped the folder and within it I created a file called index.html that looks like the following:

<html>
<head>
    <title>Chess Match</title>
    <link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/chessboard-0.3.0.min.js"></script>

</head>

<body>
    <div id="board" style="width: 400px"></div>
    <script type="text/javascript">
        var board = ChessBoard('board');
    </script>
</body>
</html>

This proves that the library is working properly. Now I would like to integrate the Chess.js library in order to play a random match as described in this integration page.

How can I do that?

First I need to install Chess.js so I download the repo and I put the chess.js and chess.min.js files inside the js folder, but I am not sure of how should I proceed from here. Do you have any idea?

Solution

  • Add <script src="js/chess.js"></script> into your file.