Chess played on smartphones with Mark Zuckerberg as player and Elon Musk as CPU.'s game | AI game creator

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

No:5299

2064

Chess played on smartphones with Mark Zuckerberg a..ALL
Developer User3819｜Date and time 23/6/29 22:31:58
Build time 80.55 sec｜Game capacity 8.006KB｜

了解しました。以下のコードは、マークザッカーバーグとイーロンマスクが対戦する簡単なチェスゲームです。プレイヤーはマークザッカーバーグを操作し、CPUとしてのイーロンマスクはランダムに動きます。

♖

♘

♗

♕

♔

♗

♘

♖

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♙

♖

♘

♗

♔

♕

♗

♘

♖

このコードでは、HTMLのdiv要素を使って盤面を表現しています。各マスは`tile`クラスでスタイリングされており、黒いマスは`black`クラス、白いマスは`white`クラスが指定されています。駒は各マスの中に`piece`クラスでスタイリングされたspan要素として配置されています。絵文字（UTF-8）を使って各駒を表示しています。プレイヤーは自分の駒をクリックして選択し、ハイライトされたマス目に移動できます。CPUプレーヤー（イーロンマスク）はランダムに駒を選び、ハイライトされたマスに移動します。ただし、このゲームは非常に単純なルールで実装されており、高度なチェスゲームのルールや戦略は考慮されていません。もしもより本格的なチェスゲームを作りたい場合は、より大規模なプログラムを作成する必要があります。ご希望の内容に沿えているかどうか分かりませんが、このコードを元にさらに改良や拡張を行うことで、より面白いゲーム体験を実現することができるかもしれません。

→ 　

1　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

了解しました。

以下のコードは、マークザッカーバーグとイーロンマスクが対戦する簡単なチェスゲームです。プレイヤーはマークザッカーバーグを操作し、CPUとしてのイーロンマスクはランダムに動きます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>チェスゲーム</title>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(8, 50px);
      grid-template-rows: repeat(8, 50px);
      justify-content: center;
      align-items: center;
    }
    
    .tile {
      width: 50px;
      height: 50px;
    }
    
    .tile.black {
      background-color: #999999;
    }
    
    .tile.white {
      background-color: #FFFFFF;
    }
    
    .piece {
      font-size: 40px;
    }
  </style>
</head>
<body>
  <div class="board">
    <div class="tile white"><span class="piece" id="a8">♖</span></div>
    <div class="tile black"><span class="piece" id="b8">♘</span></div>
    <div class="tile white"><span class="piece" id="c8">♗</span></div>
    <div class="tile black"><span class="piece" id="d8">♕</span></div>
    <div class="tile white"><span class="piece" id="e8">♔</span></div>
    <div class="tile black"><span class="piece" id="f8">♗</span></div>
    <div class="tile white"><span class="piece" id="g8">♘</span></div>
    <div class="tile black"><span class="piece" id="h8">♖</span></div>
    <div class="tile black"><span class="piece" id="a7">♙</span></div>
    <div class="tile white"><span class="piece" id="b7">♙</span></div>
    <div class="tile black"><span class="piece" id="c7">♙</span></div>
    <div class="tile white"><span class="piece" id="d7">♙</span></div>
    <div class="tile black"><span class="piece" id="e7">♙</span></div>
    <div class="tile white"><span class="piece" id="f7">♙</span></div>
    <div class="tile black"><span class="piece" id="g7">♙</span></div>
    <div class="tile white"><span class="piece" id="h7">♙</span></div>
    
    <div class="tile white"><span class="piece" id="h2">♙</span></div>
    <div class="tile black"><span class="piece" id="g2">♙</span></div>
    <div class="tile white"><span class="piece" id="f2">♙</span></div>
    <div class="tile black"><span class="piece" id="e2">♙</span></div>
    <div class="tile white"><span class="piece" id="d2">♙</span></div>
    <div class="tile black"><span class="piece" id="c2">♙</span></div>
    <div class="tile white"><span class="piece" id="b2">♙</span></div>
    <div class="tile black"><span class="piece" id="a2">♙</span></div>
    <div class="tile black"><span class="piece" id="h1">♖</span></div>
    <div class="tile white"><span class="piece" id="g1">♘</span></div>
    <div class="tile black"><span class="piece" id="f1">♗</span></div>
    <div class="tile white"><span class="piece" id="e1">♔</span></div>
    <div class="tile black"><span class="piece" id="d1">♕</span></div>
    <div class="tile white"><span class="piece" id="c1">♗</span></div>
    <div class="tile black"><span class="piece" id="b1">♘</span></div>
    <div class="tile white"><span class="piece" id="a1">♖</span></div>
  </div>

<script>
    const boardSize = 8;
    const pieces = ['♙', '♖', '♘', '♗', '♕', '♔'];

function movePiece(pieceId, targetTileId) {
      const piece = document.getElementById(pieceId);
      const targetTile = document.getElementById(targetTileId);
      targetTile.innerHTML = piece.innerHTML;
      piece.innerHTML = '';
    }

function moveCPU() {
      const pieces = Array.from(document.getElementsByClassName('piece'));
      const validPieces = pieces.filter(piece => piece.innerHTML !== '' && piece.innerHTML !== '♔');
      const randomPiece = validPieces[Math.floor(Math.random() * validPieces.length)];
      const pieceId = randomPiece.getAttribute('id');
      
      const pieceColumn = pieceId.charAt(0);
      const pieceRow = pieceId.charAt(1);
      const targetColumn = String.fromCharCode(pieceColumn.charCodeAt(0) + Math.floor(Math.random() * 3) - 1);
      const targetRow = Number(pieceRow) + Math.floor(Math.random() * 3) - 1;
      const targetTileId = targetColumn + targetRow;

if (targetColumn >= 'a' && targetColumn <= 'h' && targetRow >= 1 && targetRow <= 8) {
        movePiece(pieceId, targetTileId);
      }
    }

document.querySelectorAll('.tile').forEach(tile => {
      tile.addEventListener('click', () => {
        const selectedTile = document.querySelector('.selected');
        if (selectedTile) {
          if (tile.classList.contains('highlight')) {
            const selectedPiece = selectedTile.querySelector('.piece');
            const targetPiece = tile.querySelector('.piece');
            movePiece(selectedPiece.getAttribute('id'), targetPiece.getAttribute('id'));
            document.querySelectorAll('.tile').forEach(tile => {
              tile.classList.remove('highlight');
            });
            moveCPU();
          } else {
            selectedTile.classList.remove('selected');
            tile.classList.add('selected');
            document.querySelectorAll('.tile').forEach(tile => {
              tile.classList.remove('highlight');
            });
            const piece = tile.querySelector('.piece');
            if (piece.innerHTML !== '') {
              const pieceId = piece.getAttribute('id');
              tile.classList.add('highlight');
              document.querySelectorAll('.tile').forEach(tile => {
                if (Math.abs(tile.querySelector('.piece').getAttribute('id').charCodeAt(0) - pieceId.charCodeAt(0)) <= 1 &&
                    Math.abs(tile.querySelector('.piece').getAttribute('id').charAt(1) - pieceId.charAt(1)) <= 1) {
                  tile.classList.add('highlight');
                }
              });
            }
          }
        } else {
          tile.classList.add('selected');
          const piece = tile.querySelector('.piece');
          if (piece.innerHTML !== '') {
            const pieceId = piece.getAttribute('id');
            tile.classList.add('highlight');
            document.querySelectorAll('.tile').forEach(tile => {
              if (Math.abs(tile.querySelector('.piece').getAttribute('id').charCodeAt(0) - pieceId.charCodeAt(0)) <= 1 &&
                  Math.abs(tile.querySelector('.piece').getAttribute('id').charAt(1) - pieceId.charAt(1)) <= 1) {
                tile.classList.add('highlight');
              }
            });
          }
        }
      });
    });
  </script>
</body>
</html>
```

このコードでは、HTMLのdiv要素を使って盤面を表現しています。各マスは`tile`クラスでスタイリングされており、黒いマスは`black`クラス、白いマスは`white`クラスが指定されています。駒は各マスの中に`piece`クラスでスタイリングされたspan要素として配置されています。絵文字（UTF-8）を使って各駒を表示しています。

プレイヤーは自分の駒をクリックして選択し、ハイライトされたマス目に移動できます。CPUプレーヤー（イーロンマスク）はランダムに駒を選び、ハイライトされたマスに移動します。

ただし、このゲームは非常に単純なルールで実装されており、高度なチェスゲームのルールや戦略は考慮されていません。もしもより本格的なチェスゲームを作りたい場合は、より大規模なプログラムを作成する必要があります。

ご希望の内容に沿えているかどうか分かりませんが、このコードを元にさらに改良や拡張を行うことで、より面白いゲーム体験を実現することができるかもしれません。