Javascript - How can I implement draggable pieces in my chessboard

AlessandroVasta
August 30, 2023
172 views
2 votes
3 Answers

I’m trying to create a chessboard with draggable and snapping on square function, I’m not into the pieces legal moves yet but I’m just trying to let the piece move.

I don’t link a CSS file to the html yet because I tried to keep thing simple

This is the link to download the pieces img that I used in my project

https://github.com/AlessandroVasta79/ChessWebsite

I tried to watch some tutorial but I still can’t understand a way to solve my problem

Tags: javascript

Answers

- Jesse
- August 30, 2023 at 11:53 am
- 0 votes
0
Have you tried using react-dnd you can make each price a drag component and each square a drop component.

Note: To use react-dnd run npm install react-dnd

Login or Signup to reply.

You should use <div>‘s instead of html table. This will eliminate lots of limitations first. Go through this code and take inspiration from this link
Let me know how you want to proceed then. I will try to be available.
HTML code preview:

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unicode Chess</title>

</head>

<body>

  <div class="chessboard">

    <div>
      <div class="piece">&#x2656;</div>
      <div class="piece">&#x2658;</div>
      <div class="piece">&#x2657;</div>
      <div class="piece">&#x2654;</div>
      <div class="piece">&#x2655;</div>
      <div class="piece">&#x2657;</div>
      <div class="piece">&#x2658;</div>
      <div class="piece">&#x2656;</div>
    </div>

    <div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
      <div class="piece">&#x2659;</div>
    </div>

    <div>
      <div class="blank">.</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">.</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
    </div>

    <div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
    </div>

    <div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
    </div>
    <div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
    </div>

    <div>
      <div class="blank">.</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">.</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
    </div>

    <div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
    </div>


    <div>
      <div class="blank">.</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">.</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
    </div>

    <div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
      <div class="blank g">0</div>
      <div class="blank">0</div>
    </div>

    <div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
      <div class="piece b">&#x265f;</div>
    </div>

    <div>
      <div class="piece b">&#x265c;</div>
      <div class="piece b">&#x265e;</div>
      <div class="piece b">&#x265d;</div>
      <div class="piece b">&#x265b;</div>
      <div class="piece b">&#x265a;</div>
      <div class="piece b">&#x265d;</div>
      <div class="piece b">&#x265e;</div>
      <div class="piece b">&#x265c;</div>

    </div>





</body>

</html>

- M199alarTUFAN
- August 30, 2023 at 12:10 pm
- 0 votes
0
You can use Canvas API to accomplish this. This is to common approach. I have seen other projects where they set-up the board using Grid Layout but I don’t know how it works with grid layout. I won’t give you the direct code implementation but I will provide you the general steps you can follow:
1. Create a canvas element in your HTML and style it as you wish.
```
<canvas id="chess-board"></canvas>
```
1. Create a JS file specifically to provide the game logic and canvas rendering.
2. To initialize the game and for general layout/appearance of the chess board, you need to paint the whole canvas with a specified color or you can use an imagine of chess board as background image and render it. Then you will have to draw horizontal and vertical lines to create cells. Each cell will have canvasSize / 8 pixels of height and width. You can also have a padding from the edges of the board to make it look better. In that case, each cell will have (canvasSize - (2 * padding)) / 8 pixels in width and height.
3. To store game state and render the board accordingly to the current state of the game, you need an object or array.
```
const gameState = [
  ['black-castle', 'black-knight', 'black-bishop', ..., 'black-castle'],
  ['black-pawn', ..., 'black-pawn'],
  [null, ..., null],
  ...,
  ['white-pawn', ..., 'white-pawn'],
  ['white-caste', 'white-knight', 'white-bishop', ..., 'white-caste']
];
```
You will have to initially render the board accordingly to the current game state. At this point rendering will be all about showing images positioned at the center of cells accordingly to the cell data ('black-caste', 'black-pawn' etc.).
1. Add click event listener to the canvas to detect players selecting a stone. To provide dragging stones and putting, you can use mouseDown, mouseMove, mouseUp events. To detect where the user has clicked and wants to move which stone, you can use each of these event’s clientX and clientY or offsetX and offsetY data.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How can I implement draggable pieces in my chessboard

Answers