<tltp label="Socket.IO">クライアント-サーバ間の双方向通信ができる JS ライブラリ [公式サイト](https://socket.io/)</tltp>
 で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。



当該のアプリはこちらです。

→ [Geister Online](https://geister-online.netlify.app)

 

<toc />

## アプリの構造

Socket.IO を使用して、クライアント-サーバ間で通信をするアプリです。

コードは TypeScript で書き、Webpack を使って、

クライアントのコードは`public/bundle.js`として、サーバのコードは`dist/main.js`としてコンパイルしています。

`public`配下の HTML の`script`タグから`bundle.js`を読み込み、

ローカルでは`node dist/main.js`をターミナルから入力することでサーバのコードを動かしていました。

ディレクトリ構成は、このようになっていました。

```yml hide_nums
# 静的ファイル
public/
 # css、画像、音声など
 - static/
 - bundle.js
 - index.html
# サーバのコードがコンパイルされたやつ
dist/
 - main.js
# クライアントのコード
src/
# サーバのコード
server.ts
package.json
tsconfig.json
webpack.config.js
...
```

 

## デプロイ方法

`public`配下の静的ファイルは [Netlify](https://www.netlify.com/)、`dist`配下のサーバのファイルは [Heroku](https://jp.heroku.com/) で動かしています。

以下の図のように、クライアントサイドは Netlify、サーバサイドは Heroku っていう感じです。

<postimage src="relation" ext="svg" alt="デプロイの構造" />

おそらく Netlify は静的専用なので、動的なことはできないんだと思います。

この動画を参考にしながらデプロイを進めていきました。

<yout id="M9RDYkFs-EQ" />

 

しかし、ここでいくつか問題が発生してしまいました。

 

## 問題点

### Heroku でビルドできない

Heroku でビルドできなかったので、デプロイログを見ると、`package.json`がないとのこと。

Heroku のプロジェクトパスには`dist`を指定しているのですが、その中には`main.js`しかないからです。

仕方ないのでルートにあった`package.json`を`dist`に移動すると、ビルドできるようになりました。

<fukidashi face="ase">

こんなところにあっていいんだろうか…

</fukidashi>

### Heroku で Application error

`heroku logs --tail`すると、`code=H10 desc=App crashed status=503`なエラー。

ログを遡ると、`npm start`でこけてるっぽい。

実は`package.json`の中身はこうなっていました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "npx webpack && node dist/main.js"
 },
 ...
}
```

このファイルのパスをさきほど変えたので、この部分のパスも変えなくてはなりません。

`webpack.config.js`をこの`dist`ディレクトリに入れてもいいかもしれないですが、

このファイルはクライアントのコードもコンパイルしているし、いろいろ面倒そうなので、

ローカルで`npx webpack`して、`npm start`には`node main.js`だけ載せることにしました。

```json name=package.json
{
 ...
 "scripts": {
 "start": "node main.js"
 },
 ...
}
```

これで Heroku 側の 503 エラーはなくなりました。

いまだに Heroku の URL には Not Found と表示されますが、本体は Netlify 側の URL なので問題ないと思います。

<fukidashi face="neut">

コードの変更があるとデプロイのたびにローカルでいちいちコンパイルしないといけないのがつらいけど、仕方ないか

</fukidashi>

### ブラウザで CORS エラー

これが一番煩わしかったです。

ブラウザで Netlify の URL にアクセスして、デベロッパーツールのコンソールを開くと、

[このエラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)が表示されました。

セキュリティ的な意味で、**ドメインが違うサイト間で通信するには明示が必要**だということです。

さて、困ったのはどこにそれを書けばいいのかわからないということでした。

クライアント側か？サーバ側か？

 

クライアント側だとすれば、Netlify の`netlify.toml`や`_headers`ファイルで HTTP ヘッダを指定することができます。

ところがこれを追加してもうまくいかず…

ということはサーバ側かと思って、Express.js の CORS について調べていろいろ書いてみるも、うまくいかず…

先の動画でもそのコードでも何か特別なことをしているようには見えなかったし、八方塞がりでありました。

 

ところが、ふと「Socket.IO CORS」で調べると、

なんと**バージョンが変わってからは明示的な CORS 設定が必要**とか言うじゃないですか。

→ [Handling CORS | Socket.IO](https://socket.io/docs/v3/handling-cors/)

<fukidashi face="ase">

そんなところに原因があるとは思わなかったよ…

</fukidashi>

Netlify の設定ファイルも Express の CORS のコードも必要なく、これだけでヘッダを認識するようになりました。

 

それで、origin として設定する URL は Netlify の URL にすべきだったのですが、

Heroku の URL にするものだと勘違いしていたため、またも[エラー](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin)。

よく考えれば Socket.IO の CORS 設定のコード（サーバのコード）は Heroku 側だし、

Heroku 側が Netlify 側をブロックしてるんだから、Netlify の URL を書くべきだったんですね。

 

これでエラーもきれいになくなり、期待通りに動くようになりました。

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Socket.IO
で作成した通信対戦アプリをデプロイするときに結構苦労したので、その記録を書いておきます。
…

【Netlify + Heroku】Socket.IO アプリのデプロイ

Python でつくるガイスター、連載第 6 回です。

<pstlk label="前回" to="geister-app-dev-5" />は駒の移動と手番の交代を実装しました。

今回は勝敗の判定と表示をしていきます。



 

<toc />

## 勝敗判定

勝敗の条件を関数で定義します。

```py name=game.py hl_lines=2-29,33-37
...
def win_req(taken, board, side, moved):
 '''
 side が勝利条件を満たすか
 -> bool

 taken : list <- [{'R': int, 'B': int}]
 取った駒
 board : dict <- {(int, int): Piece}
 ゲームボード
 side : int <- 0 | 1
 先攻(0), 後攻(1)
 moved : bool
 side が今駒を動かしたか
 '''
 assert side == 0 or side == 1, 'game.win_req の引数 side は 0, 1 の値を取ります'
 if not moved:
 # 赤を4つ取らせた
 if taken[(side+1)%2]['R'] == 4:
 return True
 else:
 # 青を4つ取った
 if taken[side]['B'] == 4:
 return True
 # 青が盤外に出た
 if side == 0 and ((0, -1) in board or (5, -1) in board):
 return True
 if side == 1 and ((0, 6) in board or (5, 6) in board):
 return True
...
def main(screen, font, font_small, orders, move_snd, chturn_snd):
 ...
 # 取った駒 [{'R': int, 'B': int}]
 _taken_pieces = [{'R': 0, 'B': 0}, {'R': 0, 'B': 0}]
 # 勝者
 # 0 - 先攻, 1 - 後攻
 _winner = -1
 ...
```

取った駒の色とその数を変数`_taken_pieces`に代入して、引数に渡します。

判定のタイミングは、駒を動かし終わったときにしますので、

マウスイベントの内部です。

```py name=game.py hl_lines=2,21-23,30-36 inline_hl=2:16-17
...
def main(screen, font, font_small, orders, move_snd, chturn_snd, win_snd):
 ...
 while True:
 ...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 ...
 if _square_pos in _board and _board[_square_pos].side == _turn:
 # 駒を選択したとき
 _selecting_pos = _square_pos
 else:
 # 行先を選択したとき
 if (_selecting_pos in _board
 and _square_pos in _board[_selecting_pos].covering_squares(_selecting_pos)):
 # 行先が相手の駒のとき
 if _square_pos in _board and _board[_square_pos].side != _turn:
 _taken_pieces[_turn][_board[_square_pos].color] += 1
 # 駒の移動
 move_snd.play()
 _board[_square_pos] = _board[_selecting_pos]
 del _board[_selecting_pos]
 # 移動完了
 _move_finished = True
 # 勝利判定
 if win_req(_taken_pieces, _board, _turn, True):
 win_snd.play()
 _winner = _turn
 if win_req(_taken_pieces, _board, (_turn+1)%2, False):
 win_snd.play()
 _winner = (_turn+1)%2
 _selecting_pos = None
 ...
```

自分が駒を動かした瞬間に相手が勝つ場合（相手の悪いおばけをすべて取ったとき）もあるので、

条件分岐は2つになっています。

 

## 画面に勝者を表示

次に勝敗が決まったときに画面に結果を表示します。

表示するものを関数で定義します。

```py name=draw.py
...
def win_message(screen, font, side):
 '''
 勝敗の結果を知らせるメッセージを表示する

 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 side : int <- 0 | 1
 '''
 assert side == 0 or side == 1, 'draw.win_message の引数 side は 0, 1 の値を取ります'
 _str = ('先' if side == 0 else '後') + '攻の勝ち！'
 _text = font.render(_str, True, BLACK)
 _margin = (DISP_SIZE-(3*SQUARE_SIZE, SQUARE_SIZE))/2
 screen.fill(WHITE, (*_margin, 3*SQUARE_SIZE, SQUARE_SIZE))
 screen.blit(_text, DISP_SIZE/2-(len(_str)*32/2, 32/2))
...
```

勝者が決まったときにこれを描画します。

さらに、その画面でスペースキーを押すと隠れていたすべての駒の色を表示するようにします。

```py name=game.py hl_lines=9-11,21-24
...
def main(screen, font, font_small, orders, move_snd, chturn_snd, win_snd):
 ...
 while True:
 ...
 # 盤面
 draw.board(screen, _board, _turn)
 ...
 # 勝敗
 if _winner == 0 or _winner == 1:
 draw.win_message(screen, font, _winner)
 ...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # キー
 if event.type == KEYDOWN:
 ...
 # Space キー
 if event.key == K_SPACE:
 if _winner >= 0:
 # 開示
 _winner = 2
 _turn = 2
 ...
```

`_winner = 2`は勝敗の表示を消すため、

`_turn = 2`はすべての駒を開示するためのものです。

`draw.board`の第三引数に`2`を指定すると<pstlk label="すべての駒の色を隠すことなく表示します" to="geister-app-dev-4/#盤面を描画する" />。

<video src="win" />

---

これでガイスターが遊べるようになりました！

コードは [GitHub](https://github.com/midorimici/py-geister) からどうぞ。

読んでくれてありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 6 回です。
前回は駒の移動と手番の交代を実装しました。
今回は勝敗の判定と表示をしていきます。
…

ガイスターアプリ開発(6) 勝敗判定

Python でつくるガイスター、連載第 5 回です。

<pstlk label="前回" to="geister-app-dev-4" />は初期盤面を生成して描画しました。

今回は駒の移動とターン交代の画面を用意します。



ガイスターでは相手の駒が見えてはいけないので、

ターン交代のたびに引継ぎのための画面を表示します。

 

<toc />

## 駒の移動

駒をクリックしたときに行先を表示し、それをクリックするとその場所に移動するようにします。

まずは行先を表す円を描画します。

```py name=draw.py
...
def dest(screen, pos, board):
 '''
 駒の行先を円で表示する

 screen : pygame.display.set_mode
 pos : tuple <- (int, int)
 駒の位置
 board : dict <- {(int, int): Piece}
 駒の位置とオブジェクト
 '''
 for _pos in board[pos].covering_squares(pos):
 # 自分の駒を除外
 if not (tuple(_pos) in board and board[tuple(_pos)].side == board[pos].side):
 _coord = np.asarray(_pos)*SQUARE_SIZE + MARGIN + SQUARE_SIZE/2
 pygame.draw.circle(screen, LAWNGREEN, [int(c) for c in _coord], int(PIECE_SIZE/2))
...
```

`LAWNGREEN`は色の定数で、定数をまとめてある別モジュールに定義してあります。

`pygame.draw.circle`の引数には中心の座標と半径を指定します。

 

これを、駒をクリックしたときに表示します。

```py name=main.py hl_lines=2-9,15-18,30-44 inline_hl=2:6-9;15:7-8
...
def main(screen, font, font_small, orders, move_snd):
 # ボード描画に渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - 終了後
 _turn = 0
 # マウス選択中の駒の位置
 _selecting_pos = None
 # 動かし終わった
 _move_finished = False
 ...

 while True:
 screen.fill(IVORY)
 # 盤面
 draw.board(screen, _board, _turn)
 if _selecting_pos is not None:
 # 行先
 draw.dest(screen, _selecting_pos, _board)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 if _move_finished: continue
 if _square_pos in _board and _board[_square_pos].side == _turn:
 # 駒を選択したとき
 _selecting_pos = _square_pos
 else:
 # 行先を選択したとき
 if (_selecting_pos in _board
 and _square_pos in _board[_selecting_pos].covering_squares(_selecting_pos)):
 # 駒の移動
 move_snd.play()
 _board[_square_pos] = _board[_selecting_pos]
 del _board[_selecting_pos]
 # 移動完了
 _move_finished = True
 _selecting_pos = None
 ...
```

<video src="move" />

 

## ターン交代

次にターン交代の画面を用意します。

まずは引継ぎ画面を描画する関数を定義します。

```py name=draw.py
...
def confirmation(screen, font, font_small, turn):
 '''
 手番交代の確認画面を表示する

 screen : pygame.display.set_mode
 font, font_small : pygame.font.SysFont
 フォント
 turn : int <- 0 | 1
 0 - 次は先攻, 1 - 次は後攻
 '''
 assert turn == 0 or turn == 1, 'draw.confirmation の引数 turn は 0, 1 の値を取ります'
 screen.fill(WHITE, (*MARGIN, 6*SQUARE_SIZE, 6*SQUARE_SIZE))
 _str1 = ('先' if turn == 0 else '後') + '攻のターンだよ'
 _str2 = '画面をクリックしてね'
 _str3 = '動かし終わったらスペースキーを押してね'
 _text1 = font.render(_str1, True, BLACK)
 _text2 = font.render(_str2, True, BLACK)
 _text3 = font_small.render(_str3, True, BLACK)
 screen.blit(_text1, DISP_SIZE/2-(len(_str1)*32/2, 32))
 screen.blit(_text2, DISP_SIZE/2-(len(_str2)*32/2, -32))
 screen.blit(_text3, DISP_SIZE/2-(len(_str3)*16/2, -32*4))
...
```

盤面を白い矩形で覆い隠し、その上にテキストを描いています。

プレイヤーは駒を動かし終わったらスペースキーを押してこの画面を表示し、

もう一方のプレイヤーが画面をクリックするとそのプレイヤーに交代することになります。

```py name=game.py hl_lines=6-8,13-15,27-30,35-42
...
def main(screen, font, font_small, orders, move_snd, chturn_snd):
 # ボード描画に渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - 終了後
 _turn = 0
 # 次の番を確認する画面を表示するときに渡すパラメータ
 # 0 - 先攻, 1 - 後攻, 2 - なし
 _next = 0
 ...

 while True:
 ...
 if _next == 0 or _next == 1:
 # 交代確認画面
 draw.confirmation(screen, font, font_small, _next)
 ...

 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 # 確認画面のクリック
 if _next == 0 or _next == 1:
 _next = 2
 continue
 ...
 # キー
 if event.type == KEYDOWN:
 ...
 # Space キー
 if event.key == K_SPACE:
 if _move_finished:
 # ターン交代
 chturn_snd.play()
 _turn = (_turn+1)%2
 _next = _turn
 _move_finished = False
 ...
```

ゲーム開始直後も確認画面を表示するために、`_next = 0`としています。

<video src="chturn" />

---

<pstlk label="次回" to="geister-app-dev-6" />は勝利条件を判定して、勝者を表示するところまでやりたいと思います。

読んでくださってありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 5 回です。
前回は初期盤面を生成して描画しました。
今回は駒の移動とターン交代の画面を用意します。
…

ガイスターアプリ開発(5) 駒の移動・ターン交代

Python でつくるガイスター、連載第 4 回です。

<pstlk label="前回" to="geister-app-dev-3" />はマウス操作で駒の初期配置を決められるようになりました。

今回はゲーム本番での初期盤面を描画するところまでやっていきます。



 

<toc />

## モジュールに切り分ける

駒の初期配置を決定するモジュールと、ゲーム本番での動作を規定するモジュールを分けて書きたいので、

共通部分だけ`main.py`に置いて、そこから各モジュールを呼び出す形にします。

```py name=setup.py
import sys

import pygame
from pygame.locals import *

from config import IVORY
import draw, mouse


def _check_color(colors):
 '''
 駒がすべて配置済みで赤と青が半分ずつあるか
 -> bool

 colors : list <- [str]
 色のリスト
 '''
 return (len(colors) == 8
 and len([s for s in colors if s == 'R'])
 == len([s for s in colors if s == 'B']))


def main(screen, font, select_snd, decide_snd, forbid_snd):
 # 配置を決定する側
 # 0 - 先攻, 1 - 後攻
 _state = 0
 # 決定された初期配置
 # [{(int, int): Piece}]
 _order = [{}, {}]

 while True:
 satisfied = _check_color(list(_order[_state].values()))

 screen.fill(IVORY)
 draw.setup(screen, font, _state, _order[_state], not satisfied)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit()
 sys.exit()
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 select_snd.play()
 _order[_state][(i, j)] = 'R'
 
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 _state += 1
 else:
 forbid_snd.play()
 # 右
 elif event.button == 3:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 select_snd.play()
 _order[_state][(i, j)] = 'B'
 # キー
 if event.type == KEYDOWN:
 # Esc キー
 if event.key == K_ESCAPE:
 pygame.quit()
 sys.exit()
```

```py name=game.py
import sys

import pygame
from pygame.locals import *

from config import IVORY


def main(screen):
 while True:
 screen.fill(IVORY)
 pygame.display.update()

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit()
 sys.exit()
 # キー
 if event.type == KEYDOWN:
 # Esc キー
 if event.key == K_ESCAPE:
 pygame.quit()
 sys.exit()
```

```py name=main.py hl_lines=21-22
import sys

import pygame
from pygame.locals import *

from config import DISP_SIZE
import setup, game


if __name__ == '__main__':
 pygame.init()
 # 音声の設定
 snd = pygame.mixer.Sound
 select_snd = snd('./sounds/select.wav')
 decide_snd = snd('./sounds/decide.wav')
 forbid_snd = snd('./sounds/forbid.wav')

 pygame.display.set_caption('Geister')
 font = pygame.font.SysFont('hg丸ｺﾞｼｯｸmpro', 16)


 setup.main(screen, font, select_snd, decide_snd, forbid_snd)

 game.main(screen)
```

 

`setup.py`での`while`ループが終了すれば`game.py`でのループが開始します。

 

## 駒クラスを作成する

盤面のデータは、位置：駒の辞書型にすることにします。

駒はオブジェクトとして、どちら側の駒か、色は何かなどの属性を持たせます。

```py name=piece.py
import numpy as np

class Piece:
 def __init__(self, color, side):
 self.color = color # 赤('R') or 青('B')
 self.side = side # 先攻(0) or 後攻(1)
 
 def __repr__(self):
 return self.color + str(self.side)
 
 def covering_squares(self, pos):
 '''
 可能な移動先のマスのリスト
 -> list <- [(int, int)]

 pos : tuple <- (int, int)
 現在の位置
 '''
 pos_ = np.asarray(pos) + [(0, 1), (0, -1), (-1, 0), (1, 0)]
 dest = [(x, y) for x, y in pos_ if 0 <= x <= 5 and 0 <= y <= 5]
 if self.color == 'B':
 if self.side == 0:
 if pos == (0, 0):
 dest += [(0, -1)]
 if pos == (5, 0):
 dest += [(5, -1)]
 elif self.side == 1:
 if pos == (0, 5):
 dest += [(0, 6)]
 if pos == (5, 5):
 dest += [(5, 6)]

 return dest
```

`__repr__`メソッドはデバッグのときに役立ちます。

`print`したときに出力される文字列を返しますが、これがないとオブジェクトidだけを返すので属性の情報がわかりづらくなります。

 

`convering_squares`メソッドの条件分岐は、良いおばけが相手の陣地の角から脱出することができるようにするものです。

 

## 初期盤面を生成する

プレイヤーの配置から初期盤面を生成する関数を作ります。

```py name=setup.py
...
from piece import Piece
...

def _init_board(order1, order2):
 '''
 駒の配置から初期盤面を出力
 -> dict <- {(int, int): Piece}

 order1, order2 : dict <- {(int, int): str}
 駒の初期配置. order1 が先攻
 '''
 return {**{(5-x, 3-y): Piece(s, 1) for (x, y), s in order2.items()},
 **{(x, y+2): Piece(s, 0) for (x, y), s in order1.items()}}

```

盤面は左上が`(0, 0)`から右下が`(5, 5)`までで座標を取っていて、

駒の位置は先手が`(1, 4)`から`(4, 5)`、後手が`(1, 0)`から`(4, 1)`までとなります。

マウスで登録したときには左上`(1, 2)`、右下`(4, 3)`になっているので、座標を変換しています。

先手は平行移動だけですが、後手は180度回転もしています。

 

これで`_init_board(*_order)`とすれば、初期盤面を返すことができます。

これを`setup.main()`の返り値として`main.py`に渡し、

さらに`game.py`に引数として渡すことで盤面を描画していきます。

```py name=setup.py hl_lines=14
...
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 ...
 
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 if _state == 1: return _init_board(*_order)
 _state += 1
 ...
```

```py name=main.py hl_lines=4-5, inline_hl=4:0;5:5-6
...
if __name__ == '__main__':
 ...
 orders = setup.main(screen, font, select_snd, decide_snd, forbid_snd)
 game.main(screen, orders)
```

```py name=game.py hl_lines=2 inline_hl=2:6-7
...
def main(screen, orders):
 ...
```

### 盤面を描画する

さて、盤面を描画する関数を定義していきます。

ガイスターでは良いおばけが盤の角から外に出ると勝ちというルールがあるので、

角に矢印を描いています。

```py name=draw.py
...
def _arrow(screen, coord, direction):
 '''
 矢印を描く

 screen : pygame.display.set_mode
 coord : tuple <- (int, int)
 矢先の座標
 direction : str <- 'U', 'D'
 'U' - 上, 'D' - 下
 '''
 assert direction == 'U' or direction == 'D',\
 'draw._arrow の引数 direction は "U", "D" の値を取ります'
 _coord = np.asarray(coord)
 if direction == 'D':
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (PIECE_SIZE/2, -PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord - (PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord - (0, PIECE_SIZE), 2)
 else:
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (-PIECE_SIZE/2, PIECE_SIZE/2), 2)
 pygame.draw.line(screen, BLACK,
 _coord, _coord + (0, PIECE_SIZE), 2)
...
def board(screen, board, turn):
 '''
 ゲームボードと盤面上の駒を描く

 screen : pygame.display.set_mode
 board : dict <- {(int, int): Piece}
 駒の位置とオブジェクト
 turn : int <- 0, 1, 2
 0 - 先攻の駒を開く, 1 - 後攻の駒を開く, 2 - 両方開く,
 '''
 assert turn == 0 or turn == 1 or turn == 2, 'draw.board の引数 turn は 0, 1, 2 の値を取ります'
 # グリッド
 _grid(screen, MARGIN, 6, 6)
 # 角の矢印
 _padding = (SQUARE_SIZE - PIECE_SIZE)/2
 _arrow(screen, MARGIN+(SQUARE_SIZE/2, _padding), 'U')
 _arrow(screen, MARGIN+(11*SQUARE_SIZE/2, _padding), 'U')
 _arrow(screen, DISP_SIZE-MARGIN-(SQUARE_SIZE/2, _padding), 'D')
 _arrow(screen, DISP_SIZE-MARGIN-(11*SQUARE_SIZE/2, _padding), 'D')
 # 駒
 for pos, piece in board.items():
 if turn == 2:
 if piece.side == 0:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos)
 else:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos, True)
 elif turn == 0:
 if piece.side == 0:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos)
 else:
 _piece(screen, GREY, pos, True)
 elif turn == 1:
 if piece.side == 0:
 _piece(screen, GREY, pos)
 else:
 _piece(screen, RED if piece.color == 'R' else BLUE, pos, True)
```

`BLACK`や`GREY`は色の定数で、`config.py`に定義しています。

 

これを`game.py`で呼び出します。

```py name=game.py hl_lines=10
...
import draw
...
def main(screen, orders):
 # ゲームボード {(int, int): Piece}
 _board = orders

 while True:
 screen.fill(IVORY)
 draw.board(screen, _board, 0)
 pygame.display.update()
 ...
```

これで駒の配置を決定したあとに、初期盤面が表示されます。

<postimage src="board" alt="初期盤面" />

---

<pstlk label="次回" to="geister-app-dev-5" />は駒の移動とターン交代時の画面を用意します。

読んでくれてありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 4 回です。
前回はマウス操作で駒の初期配置を決められるようになりました。
今回はゲーム本番での初期盤面を描画するところまでやっていきます。
…

ガイスターアプリ開発(4) 初期盤面

Python でつくるガイスター、連載第 3 回です。

<pstlk label="前回" to="geister-app-dev-2" />はグリッドやボタンを描画しました。

今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。



 

<toc />

## クリックで駒を置く

pygame では`pygame.event.get()`からイベントを取得し、`event.type`でイベントの種類（マウス、キーボードなど）を取得します。

マウスクリックなら`event.type == MOUSEBUTTONDOWN`で、

左クリックならさらに`event.button == 1`、右クリックでなら`event.button == 3`という条件がつきます。

マウスカーソルの位置は`event.pos`から読み込めます。

クリックの種類とマウスカーソルの位置を表示するコードは次のようになります。

```py name=main.py
...
def main():
 ...
 while True:
 ...
 for event in pygame.event.get():
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 print('left:', event.pos)
 # 右
 elif event.button == 3:
 print('right:', event.pos)
```

これで取得できる座標はウィンドウ座標ですが、扱いやすいようにゲーム内の座標に変換します。

### 座標変換

マウスで特定の位置をクリックしたとき、そのマス目の座標（(1, 2) など）を返すようにします。

この関数はマウス関連の処理をまとめるモジュールに定義します。

```py name=mouse.py
from config import *

def chcoord(pos):
 '''
 座標 pos がどのマス上にあるかその位置を返す
 -> tuple <- (int, int)
 (0, 0)│...│(5, 0)
 ──────┼───┼──────
 ...
 ──────┼───┼──────
 (5, 0)│...│(5, 5)

 pos : tuple <- (int, int)
 対象の座標
 '''
 return (pos-MARGIN)//SQUARE_SIZE
```

これでゲーム内の座標が取得できるので、クリックした位置がどこかを判定して、

そのマスの中に駒を置いていきます。

### 駒を置く

駒がどのように配置されているかを表す変数を用意して、クリックしたときにその変数を変更します。

```py name=main.py hl_lines=6-11,15,24-29,32-37
...
import draw, mouse

def main():
 ...
 # 配置を決定する側
 # 0 - 先攻, 1 - 後攻
 _state = 0
 # 決定された初期配置と色
 # [{(int, int): str}]
 _order = [{}, {}]
 ...
 while True:
 screen.fill(IVORY)
 draw.setup(screen, font, _state)
 pygame.display.update()
 # イベントハンドリング
 for event in pygame.event.get():
 ...
 # マウスクリック
 if event.type == MOUSEBUTTONDOWN:
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 _order[_state][(i, j)] = 'R'
 # 右
 elif event.button == 3:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))
 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 _order[_state][(i, j)] = 'B'
 ...
```

その変数にしたがって駒を描画するようにします。

```py name=draw.py ins=3,10-11 del=2 inline_hl=3:10-11
...
def setup(screen, font, turn):
def setup(screen, font, turn, posdict):
 '''
 ...
 posdict : dict <- {(int, int): str}
 どの位置にどの色の駒が置かれているかを表す辞書
 '''
 ...
 for (x, y), s in posdict.items():
 _piece(screen, RED if s == 'R' else BLUE, (x, y))
 ...
```

```py name=main.py hl_lines=6 inline_hl=6:9-13
...
def main():
 ...
 while True:
 screen.fill(IVORY)
 draw.setup(screen, font, _state, _order[_state])
 ...
```

<video src="set_piece" />

 

## ボタンを押す

ボタン上にマウスカーソルがあるときに左クリックすると何らかのアクションを起こすようにします。

駒は赤と青 4 個ずつでなければならないので、その条件を満たさないとボタンが押せないようにします。

 

条件を満たしているか判定する関数を定義します。

```py name=main.py
...
def _check_color(colors):
 '''
 駒がすべて配置済みで赤と青が半分ずつあるか
 -> bool

 colors : list <- [str]
 色のリスト
 '''
 return (len(colors) == 8
 and len([s for s in colors if s == 'R'])
 == len([s for s in colors if s == 'B']))
...
```

マウスの座標がボタンにのっているか調べるため、別の関数も定義します。

（左上のほうが座標が小さいことに注意）

```py name=mouse.py
...
def on_area(x, y, left, top, w, h):
 '''
 座標 x, y が範囲内にあるか
 -> bool

 x, y : int
 対象の座標
 left, top : int
 範囲の左・上端の座標
 w, h : int
 範囲の横・縦幅
 '''
 return left <= x <= left+w and top <= y <= top+h
...
```

 

そして、条件を満たしているときかつボタンがクリックされたときにのみ次の画面に進むことができます。

```py name=main.py hl_lines=5,10-12
...
def main():
 ...
 while True:
 satisfied = _check_color(list(_order[_state].values()))
 ...
 # 左
 if event.button == 1:
 ...
 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 _state += 1
 ...
```

さらに、ボタンが押せるときと押せないときでボタンの色を変えます。

```py name=draw.py ins=3,11 del=2,10 inline_hl=3:12-13;11:24-25
...
def setup(screen, font, turn, posdict):
def setup(screen, font, turn, posdict, disabled):
 '''
 ...
 disabled : bool
 ボタンを押せない
 '''
 ...
 _button(screen, font, (500, 530), (80, 50), 'OK')
 _button(screen, font, (500, 530), (80, 50), 'OK', disabled)
...
```

```py name=main.py hl_lines=6 inline_hl=6:14-17
...
def main():
 ...
 while True:
 ...
 draw.setup(screen, font, _state, _order[_state], not satisfied)
 ...
```

これで、駒が適切に配置されたときにのみボタンが押せるようになります。

<video src="button" />

右下のボタンの色が変わっていることがわかると思います。

 

## 効果音をつける

おまけですが、駒を置いたときやボタンを押したときに効果音をつけてみます。

```py name=main.py hl_lines=4-8,20,25,28
...
def main():
 pygame.init()
 # 音声の設定
 snd = pygame.mixer.Sound
 select_snd = snd('./sounds/select.wav')
 decide_snd = snd('./sounds/decide.wav')
 forbid_snd = snd('./sounds/forbid.wav')
 ...
 while True:
 ...
 # 左
 if event.button == 1:
 _mouse_pos = event.pos
 _square_pos = tuple(mouse.chcoord(_mouse_pos))

 for i in range(1, 5):
 for j in range(2, 4):
 if _square_pos == (i, j):
 select_snd.play()
 _order[_state][(i, j)] = 'R'

 if mouse.on_area(*_mouse_pos, 500, 530, 80, 50):
 if satisfied:
 decide_snd.play()
 _state += 1
 else:
 forbid_snd.play()
 ...
```

初期化して、パスを指定して音を取り込んで、該当部分で再生するだけです。

<relpos link="chess-app-devel-16" />

---

これで駒の初期配置を選択できるようになりました。

<pstlk label="次回" to="geister-app-dev-4" />はここで決定した配置をゲーム本番での初期配置に反映していきます。

お読みいただきありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 3 回です。
前回はグリッドやボタンを描画しました。
今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。
…

ガイスターアプリ開発(3) 駒を配置する画面（マウス操作）

Python でつくるガイスター、連載第 2 回です。

<pstlk label="前回" to="geister-app-dev-1" />は pygame の導入とテキスト表示をしました。

今回は駒の配置を決める画面の残りの要素を描画していきます。



 

ガイスターでの駒の開始時の並べ方はプレイヤーが自由に決めることができますが、

その位置は赤と青の 4 つずつを手前の 8 マスの中と決まっています。

8 マスを表すグリッドを描き、左クリックで赤、右クリックで青の駒をクリックしたマスに入れていくことにします。

 

<toc />

## グリッド

まずマスを表すグリッドを描画します。

グリッド描画はゲーム本番のマス目の描画にも使いたいので関数としました。

ベクトルの計算がやりやすいように NumPy を使用します。

定数は別モジュールにまとめておきます。

```py name=config.py
import numpy as np

# ウィンドウサイズ
DISP_SIZE = (600, 600)
# 色の設定
IVORY = (240, 227, 206)
BLACK = (0, 0, 0)
# マスの大きさ
SQUARE_SIZE = 90
# マージン幅
MARGIN = (np.asarray(DISP_SIZE) - 6*SQUARE_SIZE)/2
```

```py name=draw.py hl_lines=5-25,33
import numpy as np

from config import *

def _grid(screen, coord, col, row):
 '''
 一辺が SQUARE_SIZE のマスのグリッドを描く

 screen : pygame.display.set_mode
 coord : tuple <- (int, int)
 左上の座標
 col : int
 列数
 row : int
 行数
 '''
 _coord = np.asarray(coord)
 for i in range(row+1):
 pygame.draw.line(screen, BLACK,
 _coord + (0, SQUARE_SIZE*i),
 _coord + (SQUARE_SIZE*col, SQUARE_SIZE*i), 2)
 for i in range(col+1):
 pygame.draw.line(screen, BLACK,
 _coord + (SQUARE_SIZE*i, 0),
 _coord + (SQUARE_SIZE*i, SQUARE_SIZE*row), 2)

def setup(screen, font, turn):
 ...
 _text = font.render(
 ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
 True, BLACK)
 screen.blit(_text, (20, 20))
 _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)
```

線分の描画には`pygame.draw.line`を使います。

引数はスクリーン、色、端点の座標、もう片方の端点の座標、太さです。

これで次のようになります。

<postimage src="grid" alt="グリッド表示" />

 

## 駒

次に指定の色の駒を指定の位置に描く関数を定義します。

駒は三角形として描画します。

相手の駒なら逆三角形です。

```py name=config.py hl_lines=6-7,13-14
...
# ウィンドウサイズ
DISP_SIZE = (600, 600)
# 色の設定
IVORY = (240, 227, 206)
RED = (200, 0, 0)
BLUE = (0, 0, 200)
BLACK = (0, 0, 0)
# マスの大きさ
SQUARE_SIZE = 90
# マージン幅
MARGIN = (np.asarray(DISP_SIZE) - 6*SQUARE_SIZE)/2
# 駒の大きさ
PIECE_SIZE = 60
```

```py name=draw.py
...
def _piece(screen, color, pos, rev=False):
 '''
 駒を描画する

 screen : pygame.display.set_mode
 color : tuple <- (int, int, int)
 駒の色
 pos : tuple <- (int, int)
 盤面上の駒の位置
 rev : bool
 上下反転して表示する
 '''
 _padding = (SQUARE_SIZE - PIECE_SIZE)/2
 _coord = np.asarray(pos)*SQUARE_SIZE + MARGIN + _padding
 if rev:
 _points = [_coord,
 _coord + (PIECE_SIZE, 0),
 _coord + (PIECE_SIZE/2, PIECE_SIZE)]
 else:
 _points = [_coord + (0, PIECE_SIZE),
 _coord + (PIECE_SIZE, PIECE_SIZE),
 _coord + (PIECE_SIZE/2, 0)]
 pygame.draw.polygon(screen, color, _points)
```

`pygame.draw.polygon`で多角形を描画できます。

ためしに一か所に赤駒を置いてみます。

```py name=draw.py hl_lines=8
def setup(screen, font, turn):
 ...
 _text = font.render(
 ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
 True, BLACK)
 screen.blit(_text, (20, 20))
 _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)
 _piece(screen, RED, (3, 2))
```

<postimage src="pieces" alt="駒の表示" />

 

## ボタン

配置を決定したあとに押す確定ボタンを描きます。

```py name=draw.py hl_lines=2-24,33
...
def _button(screen, font, coord, size, text, disabled=True):
 '''
 ボタンを描画する

 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 color : tuple <- (int, int, int)
 背景色
 coord : tuple <- (int, int)
 左上の座標
 size : tuple <- (int, int)
 横、縦のサイズ
 text : str
 中身のテキスト
 disabled : bool
 押せなくする
 '''
 _color = (160, 140, 120) if disabled else (200, 180, 160)
 screen.fill(_color, (*coord, *size))
 _text = font.render(text, True, BLACK)
 _fsize = np.asarray(font.size(text))
 screen.blit(_text, coord + (size-_fsize)/2)

def setup(screen, font, turn):
 ...
 _text = font.render(
 ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
 True, BLACK)
 screen.blit(_text, (20, 20))
 _grid(screen, MARGIN + SQUARE_SIZE + (0, SQUARE_SIZE), 4, 2)
 _button(screen, font, (500, 530), (80, 50), 'OK')
```

`fill`は矩形を描くメソッドです。

`size`メソッドはテキストに必要な幅と高さを返します。

これを使ってテキストをボタンの中央に配置しています。

`disabled`という引数をとっているのは、すべてを配置するまでボタンを押せないようにするため、

それを視覚的に示すためです。

 

ついでに左クリックで赤、右クリックで青の駒が配置できることを説明するテキストを加えておきます。

<postimage src="button" alt="ボタンの表示" />

---

これ表示するものはすべて表示できました。

<pstlk label="次回" to="geister-app-dev-3" />は駒をグリッドの中にマウス操作で入れていけるようにします。

お読みいただきありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python でつくるガイスター、連載第 2 回です。
前回は pygame の導入とテキスト表示をしました。
今回は駒の配置を決める画面の残りの要素を描画していきます。
…

ガイスターアプリ開発(2) 駒を配置する画面（グリッド・駒・ボタン）

[ガイスター](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A4%E3%82%B9%E3%82%BF%E3%83%BC)というボードゲームがあります。

お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。



「いいオバケ」（青）と「悪いオバケ」（赤）の 2 種類の駒を手前の 8 マスに 1 個ずつ好きな順に配置できます。

相手の青を全部取るか、自分の赤を全部取らせるか、自分の青を相手の陣地の特定のマスから外に出すことが勝利の条件となります。

 

今回からこのガイスターを Python と [pygame](https://www.pygame.org/) を使って作っていく様子を連載したいと思います。

pygame について役に立つ日本語のサイトがあります。

→ [【Pygame入門】ゲームプログラミング【Python】 | 西住工房](https://algorithm.joho.info/programming/python/pygame/)

 

<toc />

## pygame のインストール・画面表示

まずは pygame をインストールします。

```bash hide_nums
$ pip install pygame
```

これで`import pygame`して使えるようになります。

 

ウィンドウを表示するコードは以下のようになります。

```py name=main.py
import sys

import pygame
from pygame.locals import *

# ウィンドウサイズ
DISP_SIZE = (600, 600)

# 色の設定
IVORY = (240, 227, 206)

def main():
 pygame.init() # 初期化
 screen = pygame.display.set_mode(DISP_SIZE) # 画面作成
 pygame.display.set_caption('Geister') # タイトルバーの表示

 while True:
 screen.fill(IVORY) # 背景色塗りつぶし
 pygame.display.update() # 画面更新

 # イベントハンドリング
 for event in pygame.event.get():
 # 閉じるボタン
 if event.type == QUIT:
 pygame.quit() # pygame 終了
 sys.exit() # プログラム終了

if __name__ == '__main__': main()
```

ところで`set_mode`の第二引数に`FULLSCREEN`を指定するとフルスクリーン表示できます。

コマンドライン引数を受け付けて表示変更できるようにすると、このようになります。

```py name=main.py hl_lines=4-6
...
def main():
 pygame.init()
 args = sys.argv
 _flag = FULLSCREEN if len(args) == 2 and args[1] == 'f' else 0
 screen = pygame.display.set_mode(DISP_SIZE, _flag)
 ...
```

これで`py main.py f`のようにするとフルスクリーンになります。

 

## 駒配置画面の作成

ゲームを始める前に駒をどのように配置するか、それぞれのプレイヤーに決めてもらうための画面を作ります。

いろいろ描くので、ひとつの関数にまとめて別のモジュールに置きます。

```py name=draw.py
import pygame
from pygame.locals import *

def setup():
 pass
```

```py name=main.py hl_lines=2,8
...
import draw
...
def main():
 ...
 while True:
 screen.fill(IVORY)
 draw.setup()
 pygame.display.update()
```

### テキストを描画

駒の配置を決めてほしい旨をテキストとして画面上に描いてみます。

pygame ではテキストに日本語フォントを使うこともできます。

使用できるフォントの一覧は`print(pygame.font.get_fonts())`で表示できます。

テキストを描くには、まずフォントを指定して、`render`メソッドで内容を指定し、

`blit`メソッドで位置を指定します。

```py name=main.py hl_lines=4,8
...
def main():
 ...
 font = pygame.font.SysFont('hg丸ｺﾞｼｯｸmpro', 16)

 while True:
 ...
 draw.setup(screen, font, 1)
 ...
```

```py name=draw.py
...
def setup(screen, font, turn):
 '''
 screen : pygame.display.set_mode
 font : pygame.font.SysFont
 フォント
 turn : int
 先攻(0)か後攻(1)か
 '''
 assert turn == 0 or turn == 1, 'draw.setup の引数 turn は 0, 1 の値を取ります'
 _text = font.render(
 ('先' if turn == 1 else '後') + '攻の駒の配置を決めてね（↓自分側　↑相手側）',
 True, (0, 0, 0))
 screen.blit(_text, (20, 20))
```

ここまででプログラムを起動するとこのようになります。

<postimage src="text" alt="テキスト表示" />

---

<pstlk label="次回" to="geister-app-dev-2" />はグリッドや決定ボタンの描画をしていきます。

お読みいただきありがとうございました～

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

<a href="https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A4%E3%82%B9%E3%82%BF%E3%83%BC" target="_blank" rel="noopener noreferrer">ガイスター</a>というボードゲームがあります。
お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。
…

ガイスターアプリ開発(1) 導入・駒を配置する画面（テキスト）

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 20 回です。

<pstlk label="前回" to="chess-app-devel-19" />でフェアリーチェスへのキャスリングの拡張が完了しました。

今回はポーンのプロモーションの拡張をしていきます。



拡張前のプロモーションの実装は第11回に載せています。

<relpos link="chess-app-devel-11" />

 

<toc />

## ゲーム毎にプロモーション先候補を指定

まずはゲームによって異なるプロモーション先候補を、各ゲームクラスの
<tltp label="プロパティ">オブジェクトが参照できるデータ</tltp>
として定義することが必要です。

これは<pstlk label="第15回" to="chess-app-devel-15/#ゲームを定義する" />ですでに完了しています。

```py name=games.py hl_lines=7-8
class Normal:
 '''通常のチェス'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen]
 # 駒の配置
 placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
 # 画像IDの割り当て
 ID = {}
 for rk in placers:
 for fl in range(size):
 if placers[rk][fl] is not None:
 ID['W' + placers[rk][fl].abbr] = size * rk + fl
 ID['B' + placers[rk][fl].abbr] = -(size * rk + fl)
```

`promote2`というリストの中からポーンのプロモーション先が選択されます。

 

## プロモーション時に表示する選択肢を一般化

次にプロモーションの選択肢として表示される駒を、このリストに合わせて変更しなければなりません。

現在プロモーション選択肢の表示部分のコードは次のようになっています。

```py name=main.py hl_lines=12-15
...
class Game:
 ...
 def draw(self):
 '''描画コールバック'''
 ...
 # プロモーション
 if self.prom:
 draw_balloon(*self.endpos)
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 draw_img(2.0, 3.5, piece_ID[piece_color + 'N'])
 draw_img(3.0, 3.5, piece_ID[piece_color + 'B'])
 draw_img(4.0, 3.5, piece_ID[piece_color + 'R'])
 draw_img(5.0, 3.5, piece_ID[piece_color + 'Q'])
 glDisable(GL_TEXTURE_2D)
 ...
```

12-15行目がプロモーション先を固定してしまっているので、この部分を変更します。

どの位置座標にどの駒の画像を配置するかもゲームによって変化しますので、

表示幅は 4 列までとして行を増やしていく形で描画します。

```py name=main.py ins=10-14 del=6-9
# プロモーション
if self.prom:
 draw_balloon(*self.endpos)
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 draw_img(2.0, 3.5, piece_ID[piece_color + 'N'])
 draw_img(3.0, 3.5, piece_ID[piece_color + 'B'])
 draw_img(4.0, 3.5, piece_ID[piece_color + 'R'])
 draw_img(5.0, 3.5, piece_ID[piece_color + 'Q'])
 for i in range(len(self.kind.promote2)):
 draw_img(2.0 + i % 4,
 3.5 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 self.kind.ID[piece_color +
 self.kind.promote2[i].abbr])
 glDisable(GL_TEXTURE_2D)
```

 

また、それに伴って吹き出しの縦幅も増やす必要があります。

吹き出しは`draw_balloon`関数が描画していますので、そちらの中身を書き換えます。

```py name=utils.py ins=2,10-11,19-22 del=1,15-18 inline_hl=2:8-11;19:6-24;20:6-24;21:2-13,18-36;22:2-13,18-36
def draw_balloon(x, y):
def draw_balloon(x, y, num=4):
 '''
 プロモーションのときの吹き出しを描画する

 Parameters
 ----------
 x, y : int
 駒の座標．
 num : int, default 4
 プロモーション選択肢数．
 '''
 glColor(0.5, 0.5, 0.5) # 色の指定
 glBegin(GL_QUADS) # 四角形を描画
 glVertex(1.0, 2.5)
 glVertex(1.0, 4.5)
 glVertex(6.0, 4.5)
 glVertex(6.0, 2.5)
 glVertex(1.0, 2.5 - ((num - 1) // 4) / 2)
 glVertex(1.0, 4.5 + ((num - 1) // 4) / 2)
 glVertex(2.0 + num if num <= 4 else 6.0, 4.5 + ((num - 1) // 4) / 2)
 glVertex(2.0 + num if num <= 4 else 6.0, 2.5 - ((num - 1) // 4) / 2)
 glEnd()
 glBegin(GL_TRIANGLES) # 三角形を描画
 glVertex(3.0, 3.5)
 glVertex(4.0, 3.5)
 glVertex(x, y)
 glEnd()
```

`glBegin`から`glEnd`までの間の４つの`glVertex`が四角形の各頂点の位置を指定しています。

新たに追加いた引数`num`=プロモーション選択肢の数によってこの座標を調整しています。

`(num - 1) // 4`は`num`が`4`までのとき`0`、`8`までのとき`1`というように増えていくので、

縦方向の座標`2.5`と`4.5`を基準に縦幅が増えていくことになります。

横幅は`2.0 + num if num <= 4 else 6.0`というふうに、選択肢が４つ以下かどうかで変えています。

 

吹き出し描画部分のコードも変更します。

```py name=main.py ins=4 del=3 inline_hl=4:6-16
# プロモーション
if self.prom:
 draw_balloon(*self.endpos)
 draw_balloon(*self.endpos, num=len(self.kind.promote2))
 piece_color = self.gameboard[self.endpos].color
 glEnable(GL_TEXTURE_2D)
 for i in range(len(self.kind.promote2)):
 draw_img(2.0 + i % 4,
 3.5 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 self.kind.ID[piece_color +
 self.kind.promote2[i].abbr])
 glDisable(GL_TEXTURE_2D)
```

これで通常のゲームのプロモーションでは下のようになり、

<postimage src="prom1" alt="プロモーション1" />

ユニコーンが加わったゲーム（`promote2 = [Knight, Bishop, Rook, Queen, Unicorn]`）では下のようになります。

<postimage src="prom2" alt="プロモーション2" />

縦幅が大きくなりました。

 

## マウスクリックを調整

マウスクリックでこの選択肢の中から駒を選択するわけですが、今のコードは次のようになっています。

```py name=main.py hl_lines=12-23
...
class Game:
 ...
 def mouse(self, button, state, x, y):
 '''
 マウス入力コールバック
 '''
 ...
 # プロモーション
 if self.prom:
 piece_color = self.gameboard[self.endpos].color
 if on_square(*self.mousepos, 1.5, 2.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Knight(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 2.5, 3.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Bishop(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 3.5, 4.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Rook(piece_color)
 self.prom = False
 if on_square(*self.mousepos, 4.5, 5.5, 3.0, 4.0):
 self.gameboard[self.endpos] = Queen(piece_color)
 self.prom = False
 ...
```

座標も駒も固定になっていますので、これを変更します。

```py name=main.py hl_lines=4-11
# プロモーション
if self.prom:
 piece_color = self.gameboard[self.endpos].color
 for i in range(len(self.kind.promote2)):
 if on_square(*self.mousepos,
 1.5 + i % 4,
 2.5 + i % 4,
 3.0 + ((len(self.kind.promote2) - 1)//4)/2 - i//4,
 4.0 + ((len(self.kind.promote2) - 1)//4)/2 - i//4):
 self.gameboard[self.endpos] = self.kind.promote2[i](piece_color)
 self.prom = False
```

`on_square`関数の最後の４つの引数`left, right, bottom, top`が有効範囲を指定しています。

この範囲内に`self.mousepos`=クリック時のマウスカーソル位置があれば、ポーンが指定の駒に置き換わります。

 

これでプロモーションの拡張が完了しました！

今回の変更も [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/9c258e1aea99093d34222f4ca29aa200c1057376) に上げておきます。

---

これまで20回かけてチェスのコードの編集やフェアリーチェスへの拡張をやってきました。

これにさらにチェックやメイトを知らせるダイアログを表示したり、手数を戻せるようにしたり、

あるいはコンピュータ対戦を導入しても面白いでしょう。

が、いったんこのシリーズは一区切りついたことにしたいと思います。

お読みいただきありがとうございました～

では<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 20 回です。
前回でフェアリーチェスへのキャスリングの拡張が完了しました。
今回はポーンのプロモーションの拡張をしていきます。
…

チェスアプリ開発(20) プロモーションの拡張

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。

<pstlk label="前回" to="chess-app-devel-18" />はキャスリングの条件判定のコードを編集しました。

今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。



 

<toc />

## キャスリングするかどうか確認

キングがルーク方向に１歩だけ動いたとき、

それがキャスリングを意図してのものか、はたまた単に動いただけなのかが曖昧です。

これをはっきりさせるために、「その動きはキャスリングを意図していますか？」とユーザに尋ねるダイアログを表示させます。

この表示には、<pstlk label="第11回" to="chess-app-devel-11/#選択肢を表示する吹き出しを描画" />で作成した吹き出しを利用します。

 

まず、確認が必要な場合とそうでない場合があるので、確認が必要かどうかを示す変数、

そして確認の結果キャスリングすることを選択したかを示す変数を設定します。

```py name=main.py hl_lines=7-10
class Game:
 def __init__(self):
 ...
 # キャスリング
 # キャスリングのポテンシャルが残っているか
 self.can_castling = {'W': [True, True], 'B': [True, True]}
 # キャスリングするかどうかをプレイヤーに確認するか
 self.confirm_castling = False
 # キャスリングできる状態にあるか
 self.do_castling = False
 ...
```

確認が必要な場合とは曖昧な場合、つまりキャスリング完了位置にキングがただ１歩動いた場合ですので、

このときの条件を記述していきます。

```py name=main.py
class Game:
 ...
 def castle_or_not(self, piece, endpos):
 '''
 キャスリングするかしないかを確認するか

 Parameters
 ----------
 piece : obj
 駒．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Notes
 -----
 if文の条件式について．

 キングの移動終了位置が，キャスリング終了位置としてありうる4つの位置のうちのいずれかにあてはまる
 and (クイーンサイドキャスリングの条件にあてはまる
 or キングサイドキャスリングの条件にあてはまる)
 and キングの初期位置とキャスリング終了位置のx座標の差 == 1
 and 移動先に駒がない（＝キングが敵駒を取ったのではない）
 '''
 if (endpos in [(2, 0), (self.kind.size - 2, 0), (2, self.kind.size - 1), (self.kind.size - 2, self.kind.size - 1)]
 and (self.castling_requirements(piece, endpos, 0, self.gameboard)
 or self.castling_requirements(piece, endpos, 1, self.gameboard))
 and abs(self.kind.placers[1].index(King) - endpos[0]) == 1
 and endpos not in self.gameboard):
 self.confirm_castling = True
```

次に、この判定をマウスクリック時に行わせ、

```py name=main.py
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # 駒選択
 elif (self.parse_mouse() in self.gameboard
 and not self.prom and not self.confirm_castling):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 ...
```

キャスリングを確認するときには、吹き出しとボタンで確認ダイアログを作成して表示します。

```py name=utils.py
def draw_castling_confirmation(endpos):
 '''キャスリング確認ダイアログを表示する'''
 draw_balloon(*endpos)
 glColor(1.0, 1.0, 1.0)
 draw_str(2.0, 4.0, 'Castling?')
 draw_button(1.5, 3.0, 3.0, 3.5, 'Yes',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
 draw_button(4.0, 5.5, 3.0, 3.5, 'No',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
```

```py name=main.py
class Game:
 ...
 def draw(self):
 ...
 if self.time == 1 and not self.confirm_castling:
 self.main()
 ...
 # キャスリングするかどうかの確認
 if self.confirm_castling:
 draw_castling_confirmation(self.endpos)
 ...
```

表示されたボタンをクリックすることで、キャスリングの意図があるかどうかが確認できます。

```py name=main.py hl_lines=10-22
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 if self.confirm_castling:
 if on_square(*self.mousepos, 1.5, 3.0, 3.0, 4.0):
 self.do_castling = True
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 if on_square(*self.mousepos, 4.0, 5.5, 3.0, 4.0):
 self.do_castling = False
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 ...
```

これで確認ができるようになりました。

<postimage src="castling_confirmation" alt="キャスリング確認" />

 

## 駒の再配置

キャスリングした後には、ルークが特定の位置に移動します。

コードでは、もとの位置にあった駒（＝ルーク）を削除して特定の位置に再配置しています。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 ...
 # キャスリング
 if (gameboard[endpos].abbr == 'K'
 and abs(startpos[0] - endpos[0]) == 2):
 # クイーンサイド
 # 白
 if endpos == (2, 0):
 del gameboard[(0, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if endpos == (2, 7):
 del gameboard[(0, 7)]
 gameboard[(3, 7)] = Rook('B')
 # キングサイド
 # 白
 if endpos == (6, 0):
 del gameboard[(7, 0)]
 gameboard[(5, 0)] = Rook('W')
 # 黒
 if endpos == (6, 7):
 del gameboard[(7, 7)]
 gameboard[(5, 7)] = Rook('B')
```

まず駒の移動先に移動前の駒<tltp label="インスタンス">クラスをもとに作られた実体</tltp>を移してから、もとの位置を削除しています（キングの動き）。

キャスリングが起こるのはキングが２歩動いたときのみであることを利用して条件文を立て、

位置によってキャスリングが起こる箇所を判定し、ルークを消して別の位置に新たなルークを置いています（ルークの動き）。

 

キングの動きに関しては、キングが１歩も動かないこともありえるので、`startpos != endpos`のときのみ`del gameboard[startpos]`を実行するようにします。

そうしないとキングが消えてしまうからです。

ルークの動きのほうは、キャスリング発生の条件を主に`do_castling`によって判定し、

ルークの初期位置にある駒がルークであれば、その駒を消して新たなルークを置いています。

これをもとに拡張して書き換えると、以下のようになります。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 if startpos != endpos:
 del gameboard[startpos]
 ...
 # キャスリング
 # キャスリングできるゲームである
 # キャスリング確認中でない
 # キャスリングできる
 # 終了位置指定がある
 if (self.kind.castling
 and not self.confirm_castling
 and self.do_castling
 and None not in endpos):
 rook_init_pos = [pos for pos, piece in enumerate(self.kind.placers[1])
 if piece == Rook]
 size = self.kind.size
 piece = gameboard[endpos]
 # クイーンサイド
 rook_pos = rook_init_pos[0]
 # 白
 if (endpos == (2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if (endpos == (2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(3, size - 1)] = Rook('B')
 # キングサイド
 rook_pos = rook_init_pos[1]
 # 白
 if (endpos == (size - 2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(size - 3, 0)] = Rook('W')
 # 黒
 if (endpos == (size - 2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(size - 3, size - 1)] = Rook('B')
```

これでキャスリングの曖昧性の排除、そして駒の再配置ができるようになりました。

<video src="castling1" />

<video src="castling2" />

 

ここ数回分の変更は [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/06886ba60cbe2856db1e7cc52bc9fba67693c328#diff-6707418c2a43eec365d78e30985aafe1) で見ることができます。

---

フェアリーチェスが作れるようになって、

ゲームによって出現する駒が変わるので、

<pstlk label="次回" to="chess-app-devel-20" />はプロモーションの拡張について書きたいと思います。

お読みいただきありがとうございました～

ではまた<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。
前回はキャスリングの条件判定のコードを編集しました。
今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。
…

チェスアプリ開発(19) キャスリングの拡張（曖昧性の排除と駒の再配置）

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 18 回です。

<pstlk label="前回" to="chess-app-devel-17" />はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。

しかしチェス960のキャスリングは通常のキャスリングを拡大解釈する必要があります。



今回はキャスリングの部分のコードを書き換えていきます。

拡張前のキャスリングの実装は第12回に載せています。

<relpos link="chess-app-devel-12" />

 

<toc />

## チェス960におけるキャスリング

チェス960におけるキャスリングは、**通常のチェスのキャスリング後のキングとルークの位置と同じになるように**キングとルークを動かします。

つまり、a ファイル（白から見て左側）へのキャスリング（通常のチェスでのロングキャスリング）ではキングが c ファイルに、ルークが d ファイルに移動し、

h ファイル（白から見て右側）へのキャスリング（通常のチェスでのショートキャスリング）ではキングが g ファイルに、ルークが f ファイルに移動します。

キャスリングの条件も通常のチェスと変わりません。

 

通常のチェスと異なるのは、初期位置が異なるために、

キングやルークが全く移動しなかったり、かなり大きく移動したりすることがあるということです。

キングが１歩しか移動しないキャスリングもありえ、その場合は**キャスリングなのかキングが動いただけなのかが曖昧**になります。

そのあたりも考えながらコードに落とし込んでいきます。

 

## キャスリングのコードを編集

通常のチェスのキャスリングの実装は<pstlk label="第12回" to="chess-app-devel-12" />で行いました。

この時点では「キングは必ず２歩移動する」など固定的な性質を利用して書いていた部分がありますので、これを一般化していきます。

 

キャスリングの条件を満たすかどうかを返すメソッドでは、

`common_req`, `piece_req`, `special_req`という３つの条件がすべて`True`のときに`True`を返すようにしていました。

```py name=main.py hl_lines=59,60,63-65,68-75,78-84,87-89,92-99,102-108
def castling_requirements(self, piece, endpos, side, gameboard):
 '''
 キャスリングの条件を満たすとき，True
 side == 0 -> aファイル側
 side == 1 -> hファイル側

 Parameters
 ----------
 piece : obj
 駒．キングでなければ return は False．
 endpos : tuple > (int, int)
 終了位置．絶対座標．
 side : int > 0, 1
 0 -- クイーンサイド
 1 -- キングサイド
 gameboard : dict > {(int, int): obj, ...}
 盤面．

 Returns
 -------
 bool
 '''
 def create_tmp_board(startpos_y, endpos):
 '''
 キングの通過するマスが攻撃されていないことを確認するために，
 キングがそのマスに動いたときに攻撃されるかを見るための
 仮の盤面を出力する
 
 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Returns
 -------
 gameboard_tmp : dict > {(int, int): obj, ...}
 '''
 ...

 def path_is_not_attacked(startpos_y, king_route):
 '''
 キングが通るマスのどれかが相手の駒に攻撃されていれば False を返す
 
 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 king_route : list > [int, ...]
 キングが通る位置x座標のリスト．

 Returns
 -------
 bool
 '''
 ...

 common_req = (self.can_castling[piece.color][side] # キャスリングに関与する駒が一度も動いていない
 and not self.is_check(piece.color, gameboard)) # キングがチェックされていない
 # 白のキャスリング
 if piece.color == 'W':
 piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 # クイーンサイド
 if side == 0:
 special_req = (endpos == (2, 0)
 # キングとルークの間に駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 )
 # キングサイド
 if side == 1:
 special_req = (endpos == (6, 0)
 # キングとルークの通過するマスに駒がない
 and (6, 0) not in self.gameboard
 and (5, 0) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [6, 5])
 )
 # 黒のキャスリング
 if piece.color == 'B':
 piece_req = (piece.name == 'BK'
 and (7*side, 7) in gameboard
 and gameboard[(7*side, 7)].name == 'BR')
 # クイーンサイド
 if side == 0:
 special_req = (endpos == (2, 7)
 # キングとルークの通過するマスに駒がない
 and (1, 7) not in self.gameboard
 and (2, 7) not in self.gameboard
 and (3, 7) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [2, 3])
 )
 # キングサイド
 if side == 1:
 special_req = (endpos == (6, 7)
 # キングとルークの通過するマスに駒がない
 and (6, 7) not in self.gameboard
 and (5, 7) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [6, 5])
 )

 return common_req and piece_req and special_req
```

このうち`common_req`については編集する必要がありません。

これは「キャスリングに関与する駒が一度も動いていない」および「キングがチェックされていない」ことを保証する変数ですが、

これらはキングやルークの初期位置が関わらないからです。

 

`piece_req`はどうでしょう。

これは「動かす駒が自分のキングであること」と「キャスリングに関与するルークが初期位置にあること」を保証します。

前半は関係しませんが、後半は初期位置が関係してくるので、編集が必要です。

必要になるのはルークの初期位置です。

 

`special_req`も編集が必要です。

これには「キングのキャスリング後の位置」「ルークの通過するマスの座標」「キングが通過するマスの座標」の３つが必要であり、

このうち後ろの２つを変更しなければなりません。

それには「ルークの初期位置」「キングの初期位置」が最低限必要になります。

### ルーク・キングの初期位置を取得する

初期位置といっても x 座標しか使いませんので、それだけ取得できれば十分です。

初期位置は`games`モジュールに定義されている各クラスのプロパティ`placers`に、次のような形で定義されています。

```py
placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
```

x 座標はリストのインデックスと等しいので、`enumerate`関数を使って次のように初期位置のリストを取得することができます。

```py
rook_init_pos = [pos for pos, piece in enumerate(placers[1]) if piece == Rook]
king_init_pos = placers[1].index(King)
```

ルークは複数個存在しえますが、キングはひとつしか存在しえないので、`index`を使えばよいでしょう。

 

これらを使って、`piece_req`と`special_req`を書き換えると、例えば次のようになります。

```py ins=4-5 del=2-3 inline_hl=2:4-6;3:5-7;4:4-7;5:5-8
piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 and (rook_init_pos[side], 0) in gameboard
 and gameboard[(rook_init_pos[side], 0)].name == 'WR')
```

```py ins=1-9,15-16,19 del=12-14,18 inline_hl=18:7-12;19:7-19
gameboard_tmp = copy(gameboard)
# キャスリングに関与するキングとルークは除外して考える
if (king_init_pos, 0) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, 0)]
if (rook_init_pos[side], 0) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], 0)]
# キングとルークの通過するマス
king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
special_req = (endpos == (2, 0)
 # キングとルークの通過するマスに駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 and path_is_not_attacked(0, list(x for x in range(2, king_init_pos))
 )
```

同様にして他の場合についても書き換えると次のようになります。

盤面の大きさはゲームによっては8とは限らないので、`size`から計算しています。

```py name=main.py ins=3-6,15-22,25-27,33-34,37,41-43,45,49-50,53,60-67,70-72,74,79-80,83,87-89,91,95-96,99 del=13-14,30-32,36,44,47-48,52,58-59,73,76-78,82,90,93-94,98 inline_hl=13:4-6;14:5-7;15:4-7;16:5-8;36:7-12;37:7-20;44:8;45:8-11;52:7-12;53:7-27;58:4-6;59:5-7;60:4-7;61:5-8;73:11;74:10-13;82:4-12;83:4-23;90:8-11;91:8-16;98:4-12;99:4-30
def castling_requirements(self, piece, endpos, side, gameboard):
 ...
 size = self.kind.size
 
 rook_init_pos = [pos for pos, piece in enumerate(self.kind.placers[1]) if piece == Rook]
 king_init_pos = self.kind.placers[1].index(King)
 ...
 common_req = (self.can_castling[piece.color][side] # キャスリングに関与する駒が一度も動いていない
 and not self.is_check(piece.color, gameboard)) # キングがチェックされていない
 # 白のキャスリング
 if piece.color == 'W':
 piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 and (rook_init_pos[side], 0) in gameboard
 and gameboard[(rook_init_pos[side], 0)].name == 'WR')
 gameboard_tmp = copy(gameboard)
 # キャスリングに関与するキングとルークは除外して考える
 if (king_init_pos, 0) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, 0)]
 if (rook_init_pos[side], 0) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], 0)]
 # クイーンサイド
 if side == 0:
 # キングとルークの通過するマス
 king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
 rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
 special_req = (endpos == (2, 0)
 # キングとルークの間に駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 and path_is_not_attacked(0, list(x for x in range(2, king_init_pos)))
 )
 # キングサイド
 if side == 1:
 # キングとルークの通過するマス
 king_route = list(range(size - 2, king_init_pos)) + list(range(size - 2, king_init_pos, -1))
 rook_route = list(range(size - 3, rook_init_pos[side])) + list(range(size - 3, rook_init_pos[side], -1))
 special_req = (endpos == (6, 0)
 special_req = (endpos == (size - 2, 0)
 # キングとルークの通過するマスに駒がない
 and (6, 0) not in self.gameboard
 and (5, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [6, 5])
 and path_is_not_attacked(0, list(x for x in range(size - 2, king_init_pos, -1)))
 )
 # 黒のキャスリング
 if piece.color == 'B':
 piece_req = (piece.name == 'BK'
 and (7*side, 7) in gameboard
 and gameboard[(7*side, 7)].name == 'BR')
 and (rook_init_pos[side], size - 1) in gameboard
 and gameboard[(rook_init_pos[side], size - 1)].name == 'BR')
 gameboard_tmp = copy(gameboard)
 # キャスリングに関与するキングとルークは除外して考える
 if (king_init_pos, size - 1) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, size - 1)]
 if (rook_init_pos[side], size - 1) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], size - 1)]
 # クイーンサイド
 if side == 0:
 # キングとルークの通過するマス
 king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
 rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
 special_req = (endpos == (2, 7)
 special_req = (endpos == (2, size - 1)
 # キングとルークの通過するマスに駒がない
 and (1, 7) not in self.gameboard
 and (2, 7) not in self.gameboard
 and (3, 7) not in self.gameboard
 and not any((x, size - 1) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [2, 3])
 and path_is_not_attacked(size - 1, list(x for x in range(2, king_init_pos)))
 )
 # キングサイド
 if side == 1:
 # キングとルークの通過するマス
 king_route = list(range(size - 2, king_init_pos)) + list(range(size - 2, king_init_pos, -1))
 rook_route = list(range(size - 3, rook_init_pos[side])) + list(range(size - 3, rook_init_pos[side], -1))
 special_req = (endpos == (6, 7)
 special_req = (endpos == (size - 2, size - 1)
 # キングとルークの通過するマスに駒がない
 and (6, 7) not in self.gameboard
 and (5, 7) not in self.gameboard
 and not any((x, size - 1) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [6, 5])
 and path_is_not_attacked(size - 1, list(x for x in range(size - 2, king_init_pos, -1)))
 )

 return common_req and piece_req and special_req
```

`create_tmp_board`の中身も変更しておきます。

```py name=main.py ins=24-26 del=21-23 inline_hl=21:4;22:9;23:5;24:4;25:9;26:5
def castling_requirements(self, piece, endpos, side, gameboard):
 ...
 def create_tmp_board(startpos_y, endpos):
 '''
 キングの通過するマスが攻撃されていないことを確認するために，
 キングがそのマスに動いたときに攻撃されるかを見るための
 仮の盤面を出力する

 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Returns
 -------
 gameboard_tmp : dict > {(int, int): obj, ...}
 '''
 gameboard_tmp = copy(gameboard)
 if (4, startpos_y) in gameboard_tmp:
 gameboard_tmp[endpos] = gameboard_tmp[(4, startpos_y)]
 del gameboard_tmp[(4, startpos_y)]
 if (king_init_pos, startpos_y) in gameboard_tmp:
 gameboard_tmp[endpos] = gameboard_tmp[(king_init_pos, startpos_y)]
 del gameboard_tmp[(king_init_pos, startpos_y)]
 return gameboard_tmp
```


 

これでキャスリングの条件判定は正しく行えるようになりました。

ただし、まだ駒の再配置のコードの変更や、キングが１歩しか移動しない場合の曖昧性の排除が必要です。

長くなってしまったので、それは<pstlk label="次回" to="chess-app-devel-19" />以降にまわしたいと思います。

お読みいただきありがとうございました。

ではまた<img className="emoji" draggable="false" alt="👋" src="https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 18 回です。
前回はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。
しかしチェス960のキャスリングは通常のキャスリングを拡大解釈する必要があります。
…