Create playable checkers's game

Click here for free DL of the app version that can save data.

No:45042

←

Prev Next

→

Create playable checkers
Developer User4781｜Date and time 24/2/20 3:00:36
Build time 18.326 sec｜Game capacity 4.008KB｜

Script

Here is a simple implementation of a checkers game using JavaScript and designed for smartphone operation:

Copy and paste the above code into a single HTML file and open it in a web browser on your smartphone to play the checkers game. You can move pieces by tapping on them and then tapping on the empty cell where you want to move. Have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

Here is a simple implementation of a checkers game using JavaScript and designed for smartphone operation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Checkers Game</title>
    <style>
        table {
            width: 100%;
        }

td {
            width: 12.5%;
            height: 50px;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="board"></table>
    
    <script>
        const board = document.getElementById('board');
        let currentPlayer = 'red';
        let selectedPiece = null;

function initializeBoard() {
            for (let i = 0; i < 8; i++) {
                const row = document.createElement('tr');
                for (let j = 0; j < 8; j++) {
                    const cell = document.createElement('td');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', handleCellClick);
                    row.appendChild(cell);
                }
                board.appendChild(row);
            }

for (let i = 0; i < 3; i++) {
                for (let j = (i % 2); j < 8; j += 2) {
                    board.rows[i].cells[j].textContent = '⚫';
                    board.rows[i].cells[j].dataset.player = 'black';
                }
            }

for (let i = 5; i < 8; i++) {
                for (let j = (i % 2); j < 8; j += 2) {
                    board.rows[i].cells[j].textContent = '⚪';
                    board.rows[i].cells[j].dataset.player = 'red';
                }
            }
        }

function handleCellClick(event) {
            const cell = event.target;

if (cell.textContent !== '' && cell.dataset.player === currentPlayer) {
                if (selectedPiece) {
                    selectedPiece.classList.remove('selected');
                }
                selectedPiece = cell;
                selectedPiece.classList.add('selected');
            } else if (selectedPiece) {
                movePiece(selectedPiece, cell);
            }
        }

function movePiece(piece, cell) {
            if (isValidMove(piece, cell)) {
                cell.textContent = piece.textContent;
                cell.dataset.player = currentPlayer;
                piece.textContent = '';
                delete piece.dataset.player;

if (Math.abs(cell.dataset.row - piece.dataset.row) === 2) {
                    const row = (parseInt(piece.dataset.row) + parseInt(cell.dataset.row)) / 2;
                    const col = (parseInt(piece.dataset.col) + parseInt(cell.dataset.col)) / 2;
                    board.rows[row].cells[col].textContent = '';
                    delete board.rows[row].cells[col].dataset.player;
                }

selectedPiece.classList.remove('selected');
                selectedPiece = null;
                currentPlayer = currentPlayer === 'red' ? 'black' : 'red';
            }
        }

function isValidMove(from, to) {
            const rowDiff = Math.abs(to.dataset.row - from.dataset.row);
            const colDiff = Math.abs(to.dataset.col - from.dataset.col);

if (rowDiff === 1 && colDiff === 1 && !to.textContent) {
                return true;
            } else if (rowDiff === 2 && colDiff === 2 &&
                board.rows[(parseInt(from.dataset.row) + parseInt(to.dataset.row)) / 2].cells[(parseInt(from.dataset.col) + parseInt(to.dataset.col)) / 2].dataset.player !== currentPlayer &&
                !to.textContent) {
                return true;
            }

return false;
        }

initializeBoard();
    </script>
</body>
</html>
```