A fully working game of checkers using pictograms's game

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

No:32031

119

←

Prev Next

→

A fully working game of checkers using pictograms
Developer User15232｜Date and time 23/12/29 8:45:55
Build time 32.808 sec｜Game capacity 5.133KB｜

Script

Sure! Here's a basic implementation of a fully working game of checkers using pictograms in a single HTML file:

Please note that this implementation is a basic version and does not include all the rules and logic of a complete checkers game. It only demonstrates the basic movement and selection of the checkers pieces. You can further enhance the game by adding rules for capturing opponent's pieces, kinging pieces, and implementing a win condition.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's a basic implementation of a fully working game of checkers using pictograms in a single HTML file:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Checkers Game</title>
    <style>
      #game-board {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
      }

.cell {
        width: 40px;
        height: 40px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
      }

.white-piece {
        color: white;
      }

.black-piece {
        color: black;
      }

.selected {
        background-color: yellow;
      }

.highlighted {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

const gameBoard = document.getElementById('game-board');

let selectedPiece = null;
        let highlightedCells = [];

function drawBoard() {
          gameBoard.innerHTML = '';

for (let row = 0; row < board.length; row++) {
            for (let col = 0; col < board[row].length; col++) {
              const cell = document.createElement('div');
              cell.classList.add('cell');

if ((row + col) % 2 === 0) {
                cell.style.backgroundColor = '#e6e6e6';
              }

if (board[row][col] === 'w') {
                const whitePiece = document.createElement('span');
                whitePiece.innerHTML = '♙';
                whitePiece.classList.add('white-piece');
                cell.appendChild(whitePiece);
              } else if (board[row][col] === 'b') {
                const blackPiece = document.createElement('span');
                blackPiece.innerHTML = '♟';
                blackPiece.classList.add('black-piece');
                cell.appendChild(blackPiece);
              }

cell.addEventListener('click', function () {
                if (selectedPiece) {
                  movePiece(row, col);
                } else {
                  selectPiece(row, col);
                }
              });

gameBoard.appendChild(cell);
            }
          }
        }

function movePiece(row, col) {
          const validMove = highlightedCells.some((cell) => cell.row === row && cell.col === col);

if (validMove) {
            board[row][col] = board[selectedPiece.row][selectedPiece.col];
            board[selectedPiece.row][selectedPiece.col] = '';

clearHighlightedCells();
            drawBoard();
          }

selectedPiece = null;
        }

function showPossibleMoves(row, col) {
          const directions = [[1, 1], [1, -1], [-1, 1], [-1, -1]];
          highlightedCells = [];

for (let direction of directions) {
            let newRow = row + direction[0];
            let newCol = col + direction[1];

if (newRow >= 0 && newRow < 8 && newCol >= 0 && newCol < 8 && board[newRow][newCol] === '') {
              highlightedCells.push({ row: newRow, col: newCol });
            }
          }

highlightCells();
        }

function highlightCells() {
          for (let cell of highlightedCells) {
            const highlightedCell = document.querySelector(`[data-row="${cell.row}"][data-col="${cell.col}"]`);
            highlightedCell.classList.add('highlighted');
          }
        }

function clearHighlightedCells() {
          const selectedCell = document.querySelector(`[data-row="${selectedPiece.row}"][data-col="${selectedPiece.col}"]`);
          selectedCell.classList.remove('selected');

for (let cell of highlightedCells) {
            const highlightedCell = document.querySelector(`[data-row="${cell.row}"][data-col="${cell.col}"]`);
            highlightedCell.classList.remove('highlighted');
          }
        }

drawBoard();
      });
    </script>
  </body>
</html>
```