AI game creator

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

No:707

379

←

Prev Next

→

chess
Developer User3097｜Date and time 23/6/17 14:11:59
Build time 53.622 sec｜Game capacity 4.131KB｜

Script

♜

♞

♝

♛

♚

♝

♞

♜

♟

♙

♖

♘

♗

♕

♔

♗

♘

♖

チェスゲームのアプリを作成しました。スマホでも遊べます。略。HTMLのコードである。

←

Prev　Next

→ 　

Back　

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

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

<html>
  <head>
    <meta charset="UTF-8">
    <title>チェスゲーム</title>
    <style>
      /* ボード */
      .board {
        display: grid;
        grid-template-columns: repeat(8, 50px);
        grid-template-rows: repeat(8, 50px);
        margin: auto;
      }
      
      /* マス */
      .square {
        display: block;
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 30px;
        line-height: 45px;
      }
      
      /* 黒マス */
      .square.black {
        background-color: #b58863;
      }
      
      /* 白マス */
      .square.white {
        background-color: #f0d9b5;
      }
    </style>
  </head>
  <body>
    <div class="board">
      <div class="square black">♜</div>
      <div class="square white">♞</div>
      <div class="square black">♝</div>
      <div class="square white">♛</div>
      <div class="square black">♚</div>
      <div class="square white">♝</div>
      <div class="square black">♞</div>
      <div class="square white">♜</div>
      <div class="square white">♟</div>
      <div class="square black">♟</div>
      <div class="square white">♟</div>
      <div class="square black">♟</div>
      <div class="square white">♟</div>
      <div class="square black">♟</div>
      <div class="square white">♟</div>
      <div class="square black">♟</div>
      <div class="square black">♙</div>
      <div class="square white">♙</div>
      <div class="square black">♙</div>
      <div class="square white">♙</div>
      <div class="square black">♙</div>
      <div class="square white">♙</div>
      <div class="square black">♙</div>
      <div class="square white">♙</div>
      <div class="square white">♖</div>
      <div class="square black">♘</div>
      <div class="square white">♗</div>
      <div class="square black">♕</div>
      <div class="square white">♔</div>
      <div class="square black">♗</div>
      <div class="square white">♘</div>
      <div class="square black">♖</div>
    </div>
    
    <script>
      // 現在のプレイヤー（1: 白, -1: 黒）
      var currentPlayer = 1;
      
      // ボード情報
      var board = [
        [1, 2, 3, 4, 5, 6, 7, 8],
        [9, 10, 11, 12, 13, 14, 15, 16],
        [17, 18, 19, 20, 21, 22, 23, 24],
        [25, 26, 27, 28, 29, 30, 31, 32],
        [33, 34, 35, 36, 37, 38, 39, 40],
        [41, 42, 43, 44, 45, 46, 47, 48],
        [49, 50, 51, 52, 53, 54, 55, 56],
        [57, 58, 59, 60, 61, 62, 63, 64]
      ];
      
      // ボードのマスの状態（0: 空, 1: 白の駒, -1: 黒の駒）
      var squares = [
        [-1, -2, -3, -4, -5, -6, -7, -8],
        [-9, -10, -11, -12, -13, -14, -15, -16],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0],
        [9, 10, 11, 12, 13, 14, 15, 16],
        [1, 2, 3, 4, 5, 6, 7, 8]
      ];
      
      // マスにクリックイベントを追加
      document.querySelectorAll('.square').forEach(function(square) {
        square.addEventListener('click', function() {
          var row = Math.floor(board[square.id][0] / 8);
          var col = board[square.id][0] % 8;
          
          // プレイヤーの駒をクリックされた場合
          if (squares[row][col] === currentPlayer) {
            console.log('You clicked your piece!');
          }
          
          // 空のマスをクリックされた場合
          if (squares[row][col] === 0) {
            console.log('You clicked an empty square!');
          }
          
          // 相手の駒をクリックされた場合
          if (squares[row][col] === -currentPlayer) {
            console.log('You clicked your opponent\'s piece!');
          }
        });
      });
    </script>
  </body>
</html>

チェスゲームのアプリを作成しました。スマホでも遊べます。略。HTMLのコードである。