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

No:2912

834

←

Prev Next

→

Simple Shogi
Developer User3494｜Date and time 23/6/23 3:32:48
Build time 31.911 sec｜Game capacity 3.023KB｜

Script

シンプル将棋

先手は▲、後手は▼です。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>シンプル将棋</title>
    <style>
      #board {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(9, 1fr);
        width: 80%;
        max-width: 500px;
        margin: 0 auto;
      }
      .cell {
        background-color: #f5deb3;
        text-align: center;
        font-size: 30px;
        line-height: 1.2;
        cursor: pointer;
      }
      .cell.selected {
        background-color: #ffa500;
      }
    </style>
  </head>
  <body>
    <h1>シンプル将棋</h1>
    <p>先手は▲、後手は▼です。</p>
    <div id="board"></div>
    <script>
      const board = document.querySelector('#board');
      const pieces = [
        ['l', 'n', 's', 'g', 'k', 'g', 's', 'n', 'l'],
        [null, 'r', null, null, null, null, null, 'b', null],
        ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
        [null, null, null, null, null, null, null, null, null],
        [null, null, null, null, null, null, null, null, null],
        [null, null, null, null, null, null, null, null, null],
        ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
        [null, 'B', null, null, null, null, null, 'R', null],
        ['L', 'N', 'S', 'G', 'K', 'G', 'S', 'N', 'L'],
      ];
      let selected = null;
      let turn = 'w';
      const isDark = (i, j) => i % 2 === 0 ? j % 2 === 1 : j % 2 === 0;
      const initBoard = () => {
        for (let i = 0; i < 9; i++) {
          for (let j = 0; j < 9; j++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            if (isDark(i, j)) {
              cell.style.backgroundColor = '#cd853f';
            }
            if (pieces[i][j]) {
              cell.textContent = pieces[i][j];
            }
            cell.addEventListener('click', () => {
              if (!cell.textContent) {
                if (selected !== null) {
                  cell.textContent = pieces[selected.i][selected.j];
                  pieces[selected.i][selected.j] = null;
                  selected.cell.classList.remove('selected');
                  selected = null;
                  turn = turn === 'w' ? 'b' : 'w';
                }
              } else if (cell.textContent.charCodeAt(0) < 97) {
                if (turn === 'w' && cell.textContent.toUpperCase() === cell.textContent) {
                  selectCell(cell, i, j);
                }
              } else {
                if (turn === 'b' && cell.textContent.toLowerCase() === cell.textContent) {
                  selectCell(cell, i, j);
                }
              }
            });
            board.appendChild(cell);
          }
        }
      };
      const selectCell = (cell, i, j) => {
        if (selected !== null) {
          selected.cell.classList.remove('selected');
        }
        cell.classList.add('selected');
        selected = { cell, i, j };
      };
      initBoard();
    </script>
  </body>
</html>