目次と前回の記事

これまでに作成したモジュール

以下のリンクから、これまでに作成したモジュールを見ることができます。

ルールベースの AI の一覧

ルールベースの AI の一覧については、下記の記事を参照して下さい。

イベントハンドラ内で、着手を行うプログラム

前回の記事で、イベントハンドラ内 で、マウス が 押された場所 の ゲーム盤 の マスの座標 が 計算できる ようになったので、今回の記事では イベントハンドラの中 で、そのマス に 着手を行うプログラム を記述します。

ローカル関数としてのイベントハンドラの定義

指定したマス に着手する処理を行う move メソッドは Marubatsu クラスのメソッドなので、move メソッドを利用するためには、着手を行う ゲーム盤 を表す Marubatsu クラスの インスタンス が必要になります。一般的な関数 であれば、Marubatsu クラスの インスタンス を代入する 仮引数を追加 すればよいのですが、残念ながら、イベントハンドラ は、イベントループ から、あらかじめ決められた実引数 を記述して 呼び出される という 仕組み になっているので、自分で 新しい仮引数 を追加することは できません¹。

Marubatsu クラスの インスタンス を、イベントハンドラの中 で 利用できる ようにする方法として、イベントハンドラ を、Marubatsu クラスの メソッドの中 で、ローカル関数 として定義するという方法があります。以前の記事で説明したように、ローカル関数 の ブロックの中 では、その ローカル関数 が 定義された関数（または メソッド）の ブロックの中 の名前を そのまま利用 することが できます。

draw_board メソッドの ブロックの中 に、ローカル関数 として on_mouse_down を定義 することで、draw_board メソッドの 仮引数 self を、on_mouse_down の ブロックの中 で 利用できます。draw_board メソッドの 仮引数 self には、〇×ゲーム を表す Marubatsu クラスの インスタンス が代入されているので、下記のプログラムのように、self という名前を そのまま利用 して move メソッドを呼び出して 着手を行う ことが できます。

13 ~ 19 行目：on_mouse_down を、draw_board の ローカル関数 として定義する
16、17 行目：マウス を 押した場所 の ゲーム盤の座標 を計算し、x と y に代入する
18 行目：self には、draw_board メソッドを 呼び出し た Marubatsu クラスの インスタンス が代入されているので、move メソッドを 呼び出し て (x, y) のマスに 着手を行う
19 行目：ゲーム盤の描画 を更新するために、draw_board メソッドを 呼び出す
22 行目：画像の上 で マウスを押した際 に on_mouse_down の イベントハンドラ を 呼び出すようにする処理 を、on_mouse_down の 定義の後 に移動する

なお、on_mouse_down の定義は、22 行目 で on_mouse_down を使って画像と イベントハンドラ を 結び付ける処理より も 前に記述 しなければならない点に注意して下さい。

 1  %matplotlib widget
 2  from marubatsu import Marubatsu
 3  import matplotlib.pyplot as plt
 4
 5  def draw_board(self, size=3):
 6      fig, ax = plt.subplots(figsize=[size, size])
 7      fig.canvas.toolbar_visible = False
 8      fig.canvas.header_visible = False
 9      fig.canvas.footer_visible = False
10      fig.canvas.resizable = False       
11
12      # ローカル関数としてイベントハンドラを定義する
13      def on_mouse_down(event):
14          # Axes の上でマウスを押していた場合のみ処理を行う
15          if event.inaxes:
16              x = math.floor(event.xdata)
17              y = math.floor(event.ydata)
18              self.move(x, y)
19              self.draw_board()
20
21      # fig の画像にマウスを押した際のイベントハンドラを結び付ける
22      fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
以下同じなので省略
23
24  Marubatsu.draw_board = draw_board

行番号のないプログラム

%matplotlib widget
from marubatsu import Marubatsu
import matplotlib.pyplot as plt
import math

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.footer_visible = False
    fig.canvas.resizable = False       

    # ローカル関数としてイベントハンドラを定義する
    def on_mouse_down(event):
        # Axes の上でマウスを押していた場合のみ処理を行う
        if event.inaxes:
            x = math.floor(event.xdata)
            y = math.floor(event.ydata)
            self.move(x, y)
            self.draw_board()
            
    # fig の画像にマウスを押した際のイベントハンドラを結び付ける
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
            
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

    # ゲーム盤を描画する
    plt.show()          

Marubatsu.draw_board = draw_board

修正箇所

%matplotlib widget
from marubatsu import Marubatsu
import matplotlib.pyplot as plt

def draw_board(self, size=3):
    fig, ax = plt.subplots(figsize=[size, size])
-   fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.footer_visible = False
    fig.canvas.resizable = False       

    # ローカル関数としてイベントハンドラを定義する
+   def on_mouse_down(event):
+       # Axes の上でマウスを押していた場合のみ処理を行う
+       if event.inaxes:
+           x = math.floor(event.xdata)
+           y = math.floor(event.ydata)
+           self.move(x, y)
+           self.draw_board()
            
    # fig の画像にマウスを押した際のイベントハンドラを結び付ける
+   fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
以下同じなので省略

Marubatsu.draw_board = draw_board

上記の 修正後 に、下記のプログラムを実行し、マスの上 で マウスを押して みて下さい。下記は、(0, 0) の マスの上 で マウスを押した 場合の図です。実行結果 からわかるように、(0, 0) に 〇が配置 された、新しい画像 が 描画される ようになります。

mb = Marubatsu()
mb.play(ai=[None, None], gui=True)

実行結果

なお、これまでに グローバル関数 として定義した on_mouse_down は 必要が無くなった ので、marubatsu.py から削除 します。

画像が毎回描画される問題の原因

ゲーム盤の マスの上 で マウスで押す ことで着手を 行える ようになりましたが、着手を 行うたび に 新しい画像 が描画されるという問題が あります。このようなことが起きる原因は、draw_board メソッドの最後で plt.show() を 実行している からです。

以前の記事で説明したように、%matplotlib widget を実行した場合は、plt.show() を実行すると、画像を更新 するの ではなく、新しい画像 が描画されてしまうため 一般的 には plt.show() は 実行しません。そこで、下記のプログラムのように、draw_board の最後の plt.show() を削除することにします。

def draw_board(self, size=3):
元と同じなので省略
    # 最後に行っていた、この下のゲーム盤を描画する `plot.show()` を削除する

Marubatsu.draw_board = draw_board

プログラム全体

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
    fig.canvas.toolbar_visible = False
    fig.canvas.header_visible = False
    fig.canvas.footer_visible = False
    fig.canvas.resizable = False       

    # ローカル関数としてイベントハンドラを定義する
    def on_mouse_down(event):
        # Axes の上でマウスを押していた場合のみ処理を行う
        if event.inaxes:
            x = math.floor(event.xdata)
            y = math.floor(event.ydata)
            self.move(x, y)
            self.draw_board()
            
    # fig の画像にマウスを押した際のイベントハンドラを結び付ける
    fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
            
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):
元と同じなので省略
    # ゲーム盤を描画する
-   plt.show()          

Marubatsu.draw_board = draw_board

実行結果 は 先ほどと同じ なので省略しますが、上記の 修正後 に、下記のプログラムを実行し、マスの上 で マウスを押した 際に、相変わらず 新しい画像 が 描画される ことを確認して下さい。このようなことが起きる原因について少し考えてみて下さい。

mb.play(ai=[None, None], gui=True)

以前の記事で説明したように、%matplotlib widget を実行した場合は、Figure を 作成するだけ で、画像が描画される ようになります。上記のようなことが起きる原因は、下記のプログラムのように、draw_board メソッドの 最初の行 で、subplots メソッドを実行して、新しい Figure を作成しているからです。

def draw_board(self, size=3):   
    fig, ax = plt.subplots(figsize=[size, size])
以下略

画像を 更新する ためには、draw_board で 毎回新しい Figure を作成するの ではなく、Figure は 一度だけ作成 し、以後は その Figure に対して画像を 描画する処理 を 行う必要 が あります。どのように修正すればよいかについて少し考えてみて下さい。

`play` メソッドでの Figure の作成

まず、一度だけ 行う Figure の作成 を、どこで行うか を 考える必要 があります。play メソッドは、〇×ゲームを遊ぶ際 に 一度だけ実行 するので、play メソッド の最初で その処理を行う という方法が良いでしょう。

`play` メソッドの修正

そこで、下記のプログラムのように、play メソッドの最初で、gui=True の場合に Figure を 作成する ように修正することにします。その際に、Figure の設定 、イベントハンドラの定義 と 結びつけ の処理など、Figure に 関する処理 も play メソッドで 行う必要がある 点に注意して下さい。

10 ~ 27 行目：gui が True の場合 に draw_board に記述されていた Figure の作成、設定、イベントハンドラの定義 と 結び付け の処理を そのまま記述 する

なお、draw_board は、play メソッドから self.draw_board によって 呼び出される ので、draw_board の self と、play メソッドの self には 同じ Marubatsu クラスの インスタンス が代入されています。そのため、draw_board の on_mouse_down の定義を、play メソッドに 移動しても、on_mouse_down の中では 同じ処理 が 行われます。

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
 2      # seed が None でない場合は、seed を乱数の種として設定する
 3      if seed is not None:
 4          random.seed(seed)
 5   
 6      # 〇×ゲームを再起動する
 7      self.restart()
 8
 9      # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
10      if gui:
11          fig, ax = plt.subplots(figsize=[size, size])
12          fig.canvas.toolbar_visible = False
13          fig.canvas.header_visible = False
14          fig.canvas.footer_visible = False
15          fig.canvas.resizable = False  
16        
17          # ローカル関数としてイベントハンドラを定義する
18          def on_mouse_down(event):
19              # Axes の上でマウスを押していた場合のみ処理を行う
20              if event.inaxes:
21                  x = math.floor(event.xdata)
22                  y = math.floor(event.ydata)
23                  self.move(x, y)
24                  self.draw_board()
25        
26          # fig の画像にマウスを押した際のイベントハンドラを結び付ける
27          fig.canvas.mpl_connect("button_press_event", on_mouse_down)     
元と同じなので省略
28            
29  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
                self.draw_board()
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board()
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board()
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
+   if gui:
+       fig, ax = plt.subplots(figsize=[size, size])
+       fig.canvas.toolbar_visible = False
+       fig.canvas.header_visible = False
+       fig.canvas.footer_visible = False
+       fig.canvas.resizable = False  
    
        # ローカル関数としてイベントハンドラを定義する
+       def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
+           if event.inaxes:
+               x = math.floor(event.xdata)
+               y = math.floor(event.ydata)
+               self.move(x, y)
+               self.draw_board()
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
+       fig.canvas.mpl_connect("button_press_event", on_mouse_down)     
元と同じなので省略

Marubatsu.play = play

`draw_board` の修正

次に、draw_board から、play メソッドに 移動した処理 を下記のプログラムのように削除する必要が あります。

def draw_board(self, size=3): 
    # ここにあった、Figure の作成と設定、イベントハンドラの定義と結び付けを行う処理を削除する

元と同じなので省略

Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, size=3):             
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)       

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, size=3):             
-   fig, ax = plt.subplots(figsize=[size, size])
-   fig.canvas.toolbar_visible = False
-   fig.canvas.header_visible = False
-   fig.canvas.footer_visible = False
-   fig.canvas.resizable = False       

    # ローカル関数としてイベントハンドラを定義する
-   def on_mouse_down(event):
-       # Axes の上でマウスを押していた場合のみ処理を行う
-       if event.inaxes:
-           x = math.floor(event.xdata)
-            y = math.floor(event.ydata)
-           self.move(x, y)
-           self.draw_board()
           
    # fig の画像にマウスを押した際のイベントハンドラを結び付ける
-   fig.canvas.mpl_connect("button_press_event", on_mouse_down)  
元と同じなので省略   

Marubatsu.draw_board = draw_board

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、実行結果 のように エラーが発生 します。エラーの原因 について少し考えてみて下さい。

mb.play(ai=[None, None], gui=True)

実行結果

略
Cell In[5], line 11
      9 # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
     10 if gui:
---> 11     fig, ax = plt.subplots(figsize=[size, size])
     12     fig.canvas.toolbar_visible = False
     13     fig.canvas.header_visible = False

NameError: name 'size' is not defined

仮引数 `size` の移動

上記の エラー は、play メソッドの 下記の行 で、Figure を 作成するため に subplots メソッドを 呼び出す際 に 実引数に記述 した size が 定義されていない ことが原因です。

        fig, ax = plt.subplots(figsize=[size, size])

この size は、draw_board メソッドの 仮引数 でしたが、Figure の 作成の処理 を play メソッドに 移動した ので、play メソッドの 仮引数に移動 する必要が あります。そこで、下記のプログラムのように、play メソッドに、draw_board メソッドの 仮引数 size を そのままの形 で デフォルト引数 として追加することにします。

1 行目：仮引数 に デフォルト値 を 3 とする デフォルト引数 size を追加する

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
以下同じなので省略

Marubatsu.play = play

プログラム全体

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False   
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
                self.draw_board()
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board()
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board()
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

-def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False):
+def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
以下同じなので省略

Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、実行結果 のように 別のエラーが発生 し、その後 で ゲーム盤 が 描画されていない画像 が 表示される ようになります。エラーの原因 について少し考えてみて下さい。

mb.play(ai=[None, None], gui=True)

実行結果

略
Cell In[6], line 3
      1 def draw_board(self, size=3):             
      2     # y 軸を反転させる
----> 3     ax.invert_yaxis()
      5     # 枠と目盛りを表示しないようにする
      6     ax.axis("off")

NameError: name 'ax' is not defined

`draw_board` への仮引数 `ax` の追加

上記の エラー は draw_board メソッドの中の ax.invert_yaxis() を実行する際に、ax が 定義されていない（is not defined）ことが原因です。また、draw_board の中で ax が 定義されなくなった のは、ax に 値を代入 する下記の subplots を呼び出す処理を、play メソッドに移動したことが原因です。

fig, ax = plt.subplots(figsize=[size, size])

上記のように、定義されていない名前 を利用するプログラムを記述した場合は、VSCode では、下図のように、オレンジ色 の波線が表示されます

また、波線の上 に マウスを移動 すると、下図のように、その原因 が表示されるので、波線に 気づいた場合 は 参考にすると良い でしょう。

なお、VSCode では、赤色の波線 は 文法エラー を表すので、修正しなければ プログラムを実行することが できません。一方、オレンジ色の波線 は何かが おかしい可能性がある という警告なので、間違っている とは 限りません。また、オレンジ色の波線 が 表示されても、その文が 実行されなければ エラーは 発生しません。

そこで、play メソッドの ax を draw_board メソッドに 伝える ことが できるようにする ために、draw_board メソッドに 仮引数 ax を追加し、play メソッド内で draw_board メソッドを 呼び出す際 に、ax を 実引数 に記述するように修正します。

下記は、そのように draw_board を修正したプログラムです。なお、仮引数 size はもう 必要が無くなった ので削除しました。

def draw_board(self, ax):  
元と同じなので省略

Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, ax):             
    # y 軸を反転させる
    ax.invert_yaxis()

    # 枠と目盛りを表示しないようにする
    ax.axis("off")

    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

Marubatsu.draw_board = draw_board

修正箇所

-def draw_board(self, size=3):  
+def draw_board(self, ax):  
元と同じなので省略

Marubatsu.draw_board = draw_board

下記は、そのように play メソッドを修正したプログラムです。

9、15、22 行目：draw_board を 呼び出す際 に、実引数　ax を記述する

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
 2          # ローカル関数としてイベントハンドラを定義する
 3          def on_mouse_down(event):
 4              # Axes の上でマウスを押していた場合のみ処理を行う
 5              if event.inaxes:
 6                  x = math.floor(event.xdata)
 7                  y = math.floor(event.ydata)
 8                  self.move(x, y)
 9                  self.draw_board(ax)
元と同じなので省略
10      # ゲームの決着がついていない間繰り返す
11      while self.status == Marubatsu.PLAYING:
12          # ゲーム盤の表示
13          if verbose:
14              if gui:
15                  self.draw_board(ax)
16                  return
17              else:
18                  print(self)
元と同じなので省略
19      # 決着がついたので、ゲーム盤を表示する
20      if verbose:
21          if gui:
22              self.draw_board(ax)
23          else:
24              print(self)
25            
26      return self.status
27    
28  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
                self.draw_board(ax)
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board(ax)
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board(ax)
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
-               self.draw_board()
+               self.draw_board(ax)
元と同じなので省略
    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
-               self.draw_board()
+               self.draw_board(ax)
                return
            else:
                print(self)
元と同じなので省略
    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
-           self.draw_board()
+           self.draw_board(ax)
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play を実行し、マスの上 で マウスを押す と、マウスを押すたび に、同じ画像 に マークが配置 されるように なります が、いくつかの点 で おかしな描画 が行われてしまいます。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

上図の 実行結果 は、(0, 0) の マスの上 で マウスを押した場合 の図です。図を よく見る と 以下の 3 つ の点が おかしい ことが わかります。

マウスを押した (0, 0) ではなく、(0, 2) のマスに マークが表示 される
手番を表す 文字列 が 上部ではなく、下部に表示 される
手番を表す 文字列 の Turn の後 に、〇と × が 重ねて表示 される

マークと手番の表示位置が変になる理由の検証と解決

まず、マーク と手番の 表示位置 が 変になる理由 を検証することにします。そのためには、どのような法則 で 変な位置 に 表示されるか を 調べる必要 があるので、上記に 続けて (1, 0) の マスの上 で マウスを押してみる ことにします。下図は (1, 0) の マスの上 で マウス を 押した後 に表示される図です。

図から、今度は以下のような表示が行われることが分かります。

最初に着手 した (0, 0) の〇が 正しいマス に表示されるようになる
今回着手 した (1, 0) の × が (1, 2) に表示される
手番を表す 文字列 が 正しく上部 に表示されるが、〇と × が 重ねて表示 される現象は 解消されない

勘の良い方 は法則が わかったかも しれませんが、続けて (2, 0) に着手を行ってみることにします。下図は (2, 0) の マスの上 で マウス を 押した後 に表示される図です。

下図は、それぞれの着手 で表示された画像を 並べた ものです。

　　
　
下記の表は、それぞれの着手 で、それぞれのマーク と 手番の文字列 が表示された場所を まとめたもの です。上図と 下記の表 から法則を 考えてみて下さい。

	1 手目	2 手目	3 手目	手番の文字列
(0, 0)	(0, 2)	(0, 0)	(0, 2)	下部
(1, 0)		(1, 2)	(1, 0)	上部
(2, 2)			(2, 0)	下部

上記でよくわからない人は、上記以外 の 様々なマス に着手を行ってみて下さい。

表示の法則

上記の 図と表 から、着手を 行うたび に、マーク や手番を表す 文字列 の 表示位置 が上下で 反転する ことが 分かります。そのこと に 気づく ことが できれば、上下を 反転する ような処理が原因である 可能性が高い ことが 推測できる ようになります。

これまでに記述 したプログラムの中で、上下を 反転する処理 は、draw_board メソッドの 最初で記述 した下記プログラムの 3 行目 の Axes の y 軸 を反転する処理です。

1  def draw_board(self, ax):             
2      # y 軸を反転させる
3      ax.invert_yaxis()
4    
5      # 枠と目盛りを表示しないようにする
6      ax.axis("off")
以下略

draw_board メソッドは、着手を 行うたび に 実行される ので、ax.invert_yaxis() によって、着手を 行うたび に ゲーム盤の画像 の上下が 反転する ことになります。

Axes の y 軸 を 反転する処理 は、以前の記事で説明したように、必要な処理 ですが、Figure を 作成した際 に、一度だけ 行えば十分です。従って、この処理 を play メソッド に移動することで、問題を解決 することが できます。なお、上記のプログラムの 6 行目 の 枠と目盛り を 表示しない ようにする ax.axis("off") という処理は、draw_board の中 で記述しても、元々 表示されていない枠と目盛り を、もう一度表示しないようにする ことになるので、このままでも 特に 問題はありません が、この処理 も Figure を 作成した際 に一度だけ 行えば良い処理 なので、ついでに play メソッドに 移動する ことにします。

`play` メソッドと `draw_board` メソッドの修正

下記は、そのように draw_board メソッドを修正したプログラムです。

def draw_board(self, ax):             
    # ここにあった、y 軸の反転処理と、枠と目盛りを表示しないようにする処理を削除する
元と同じなので省略

Marubatsu.draw_board = draw_board

プログラム全体

def draw_board(self, ax):             
    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, ax):             
    # y 軸を反転させる
-   ax.invert_yaxis()
    
    # 枠と目盛りを表示しないようにする
-   ax.axis("off")
元と同じなので省略

Marubatsu.draw_board = draw_board

下記は、そのように play メソッドを修正したプログラムです。

6 行目：Axes の y 軸 を 反転する処理 を追加する
9 行目：Axes の 枠と目盛り を 表示しないようにする処理 を追加する

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略       
 2          # fig の画像にマウスを押した際のイベントハンドラを結び付ける
 3          fig.canvas.mpl_connect("button_press_event", on_mouse_down)     
 4
 5          # y 軸を反転させる
 6          ax.invert_yaxis()
 7      
 8          # 枠と目盛りを表示しないようにする
 9          ax.axis("off")
元と同じなので省略       
10   
11  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
                self.draw_board(ax)
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

        # y 軸を反転させる
        ax.invert_yaxis()
    
        # 枠と目盛りを表示しないようにする
        ax.axis("off")

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board(ax)
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board(ax)
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略       
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

        # y 軸を反転させる
+       ax.invert_yaxis()
    
        # 枠と目盛りを表示しないようにする
+       ax.axis("off")
元と同じなので省略       
   
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play を実行し、マスの上 で マウスを押す と、上下が反転 する 問題点 が修正されていることが確認できます。ただし、手番の文字列 の中で〇と × が 重なって表示 される問題は 解決できていません。

下記の 実行結果 は、(0, 0)、(1, 0)、(0, 2) の順で マスの上 で マウスを押した場合 の図で、正しいマス に着手が 行われている ことが確認できます。実際に JupyterLab 上で 様々なマスに着手を行って確認してみて下さい。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

〇と × が重なって表示される問題の原因と解決

%matplotlib widget を実行することで、Figure の内容 を描画した画像に 対して、線や 文字列 などを 後から描画 して更新することが できる ように なります。その際 に、当然ですが、それまで に 描画した内容 は 残り続けます。

そのため、draw_board メソッドを 実行するたび に、ゲーム盤の画像 を表す Figure に「ゲーム盤の枠線」、「配置されたマーク」、「手番の情報」が描画されますが、その際 に それ以前 に 描画した内容 が 自動的 に 削除される ことは ありません。

従って、〇と × が 重なって表示 される問題は、それ以前 の手番で draw_board メソッドを 実行した際 に描画した 手番を表す文字列 の上に、新しい手番を表す文字列 が 重ねて描画された ことが原因です。

この問題 は、draw_board メソッドで ゲーム盤の画像 を 描画する際 に、Figure に対して登録した 線や文字列 などの Artist の情報 を削除することで解決することができます。

別の言葉 で説明すると、ゲーム盤 を 描画するたび に、それまで に 描画した内容 を すべて消して から、改めて ゲーム盤を 一から描画し直す ということです。

その処理 は、Axes の clear メソッド²を 呼び出す ことで 行うことができる ので、その処理 を、下記のプログラムのように、draw_board の 最初に記述 します。

3 行目：ax の clear メソッドを実行して、Axes の内容を クリア する

def draw_board(self, ax):             
    # Axes の内容をクリアして、これまでの描画内容を削除する
    ax.clear()
元と同じなので省略

Marubatsu.draw_board = draw_board

プログラム全体

def draw_board(self, ax):             
    # Axes の内容をクリアして、これまでの描画内容を削除する
    ax.clear()
    
    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, ax):             
    # Axes の内容をクリアして、これまでの描画内容を削除する
+   ax.clear()
元と同じなので省略

上記の 修正後 に、下記のプログラムで play を実行すると、実行結果 のように、Axes の 枠と目盛 りが 表示され、手番の情報 が 下部に表示される ようになってしまいます。また、目盛り を よく見る ことでも、y 軸 の 上下の反転 が 行われていない ことが わかります。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

Axes の clear メソッドの詳細については、下記のリンク先を参照して下さい。

`clear` メソッドが行う処理

上記のような 問題が発生 する理由は、Axes の clear メソッドが、Axes への Artist の登録の情報 だけでなく、軸の反転 や、目盛りの非表示 など、Axes に対して行った すべての処理 を クリアしてしまう からです。

そのため、Axes の clear メソッドを 実行した場合 は、下記のプログラムの 6、9 行目 のように、軸の反転 と 枠と目盛りの非表示 の処理を 改めて実行 する必要が あります。

 1  def draw_board(self, ax):             
 2     # Axes の内容をクリアして、これまでの描画内容を削除する
 3     ax.clear()
 4   
 5     # y 軸を反転させる
 6     ax.invert_yaxis()
 7   
 8     # 枠と目盛りを表示しないようにする
 9     ax.axis("off")
元と同じなので省略
10
11  Marubatsu.draw_board = draw_board

行番号のないプログラム

def draw_board(self, ax):             
    # Axes の内容をクリアして、これまでの描画内容を削除する
    ax.clear()
    
    # y 軸を反転させる
    ax.invert_yaxis()
    
    # 枠と目盛りを表示しないようにする
    ax.axis("off")
    
    # 上部のメッセージを描画する
    # ゲームの決着がついていない場合は、手番を表示する
    if self.status == Marubatsu.PLAYING:
        text = "Turn " + self.turn
    # 決着がついていれば勝者を表示する
    else:
        text = "winner " + self.status
    ax.text(0, -0.2, text, fontsize=20)

    # ゲーム盤の枠を描画する
    for i in range(1, self.BOARD_SIZE):
        ax.plot([0, self.BOARD_SIZE], [i, i], c="k") # 横方向の枠線
        ax.plot([i, i], [0, self.BOARD_SIZE], c="k") # 縦方向の枠線   

    # ゲーム盤のマークを描画する
    for y in range(self.BOARD_SIZE):
        for x in range(self.BOARD_SIZE):
            color = "red" if (x, y) == self.last_move else "black"
            self.draw_mark(ax, x, y, self.board[x][y], color)

Marubatsu.draw_board = draw_board

修正箇所

def draw_board(self, ax):             
    # Axes の内容をクリアして、これまでの描画内容を削除する
    ax.clear()
    
    # y 軸を反転させる
+   ax.invert_yaxis()
    
    # 枠と目盛りを表示しないようにする
+   ax.axis("off")
元と同じなので省略

Marubatsu.draw_board = draw_board

軸の反転 と 枠と目盛りの削除 の処理を draw_board で行う ようにしたので、下記のプログラムのように、play メソッドから それらの処理 を削除することにします。

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

        # この下にあった、軸の反転と枠と目盛りの非表示の処理を削除する
元と同じなので省略
    
Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合のみ処理を行う
            if event.inaxes:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)
                self.draw_board(ax)
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board(ax)
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board(ax)
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     

        # y 軸を反転させる
-       ax.invert_yaxis()
    
        # 枠と目盛りを表示しないようにする
-       ax.axis("off")        
元と同じなので省略
    
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、今度は 問題なく 〇× ゲームを 遊べるようになっている ことが確認できます。実際に 何度か遊んでみて、問題が発生 しないかどうかを確認してみて下さい。

下記の 実行結果 は、決着がつく まで 着手を行った場合 の図です。

mb.play(ai=[None, None], gui=True)

実行結果（下図は、画像なので操作することはできません）

実は、上記のプログラムには一つ 問題があります。それが何かを少し考えてみて下さい。

今回の記事で、先程 わざわざ draw_board から play へ移動 した、軸の反転などの処理 を、再び draw_board へ戻す ような手順で 〇×ゲームを実装 したことに 疑問を覚えた人 が いるのではないか と思います。

実際に、プログラミング に ある程度慣れた上 で、matplotlib の 仕組み を よく理解 していれば、今回の記事 のような まどろっこしい修正 を 何度も行わず に、一度で 正しいプログラム を記述する事が できるかもしれません。

しかし、一度別の場所に移動 した プログラム を、後から 様々な理由で 元の場所に戻す ようなことは、実際の プログラミング でも よくあること です。正直に告白 すると、今回の記事 を 執筆した際 に、筆者は実際に 軸の反転などの処理 を、play へ 移した後 で、移す必要がなかったこと に 気づいて 元に 戻しました 。

そのようなことの経験 は、プログラミング の 力の上達 に 役立つと思いました ので、あえて一度でうまくいく プログラムを 紹介するのではなく、今回の記事 のような 回り道になる ような手順を 紹介しました。

clear メソッドは、Figure と Axes の両方に対して 行うことができます が、ゲーム盤 の枠や 文字列 を表す Artist は、ax.plot() や ax.text() によって行うことからわかるように、Axes に 対して 登録している ので、ゲーム盤の描画 の情報を表す Artist を 削除する場合 は、Axes の clear メソッドを 実行します。

fig.clear() を実行することでも、Figure から、ゲーム盤 の Artist の情報 を削除することが できます が、その場合 は、Figure に登録された Axes までも が 削除されてしまう³ ため、Axes の 再登録が必要 になる点に注意が必要です。

Figure の clear メソッドの詳細については、下記のリンク先を参照して下さい。

決着後の着手の禁止

上記のプログラムの問題は、ゲーム の 決着後 も着手が 行えてしまう というものです。例えば、下図右 は、下図左 で〇が 勝利した後 に (2, 1) のマスの上で マウスを押した 場合の図で、実際に ゲームの決着後 に着手が 行えています。

gui=False を記述（またはキーワード引数 gui を省略）して play メソッドを 実行した場合 に、ゲーム の 決着後 に着手を 行えない理由 は以下の通りです。

決着が付いた時点 で、play メソッドの中の 繰り返し処理 が終了する
イベントハンドラ を 登録しない ので、play メソッドの 処理が終了 した時点で、play メソッドに 関連する処理 が 完全に終了 する

一方、gui=True を記述して play メソッドを 実行した場合 は、イベントハンドラ を登録するため、play メソッドの 処理が終了 しても、ゲーム盤 の 画像の上 で マウスを押す ことで、登録した イベントハンドラ が 何度でも 呼び出されて 実行されます。

従って、ゲームの決着後 に着手を 行えない ようにするためには、下記のプログラムのように、イベントハンドラ の 処理の中 で、ゲーム が 決着していない場合 のみ 着手を行う ような 処理を記述 する必要が あります。

5 行目：着手を行う場合 を判定する 条件式 に、ゲームの状態 を表す self.status が、ゲーム の 決着がついていない ことを表す Marubatsu.PLAYING であることを 加える

 1  def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
 2          # ローカル関数としてイベントハンドラを定義する
 3          def on_mouse_down(event):
 4              # Axes の上でマウスを押していた場合で、ゲーム中の場合のみ処理を行う
 5              if event.inaxes and self.status == Marubatsu.PLAYING:
 6                  x = math.floor(event.xdata)
 7                  y = math.floor(event.ydata)
 8                  self.move(x, y)                
 9                  self.draw_board(ax)
元と同じなので省略               
10    
11  Marubatsu.play = play

行番号のないプログラム

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
    # seed が None でない場合は、seed を乱数の種として設定する
    if seed is not None:
        random.seed(seed)
    
    # 〇×ゲームを再起動する
    self.restart()

    # gui が True の場合に、ゲーム盤を描画する画像を作成し、イベントハンドラに結びつける
    if gui:
        fig, ax = plt.subplots(figsize=[size, size])
        fig.canvas.toolbar_visible = False
        fig.canvas.header_visible = False
        fig.canvas.footer_visible = False
        fig.canvas.resizable = False          
        
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合で、ゲーム中の場合のみ処理を行う
            if event.inaxes and self.status == Marubatsu.PLAYING:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)                
                self.draw_board(ax)
        
        # fig の画像にマウスを押した際のイベントハンドラを結び付ける
        fig.canvas.mpl_connect("button_press_event", on_mouse_down)     
               

    # ゲームの決着がついていない間繰り返す
    while self.status == Marubatsu.PLAYING:
        # ゲーム盤の表示
        if verbose:
            if gui:
                self.draw_board(ax)
                return
            else:
                print(self)
        # 現在の手番を表す ai のインデックスを計算する
        index = 0 if self.turn == Marubatsu.CIRCLE else 1
        # ai が着手を行うかどうかを判定する
        if ai[index] is not None:
            x, y = ai[index](self, **params[index])
        else:
            # キーボードからの座標の入力
            coord = input("x,y の形式で座標を入力して下さい。exit を入力すると終了します")
            # "exit" が入力されていればメッセージを表示して関数を終了する
            if coord == "exit":
                print("ゲームを終了します")
                return       
            # x 座標と y 座標を要素として持つ list を計算する
            xylist = coord.split(",")
            # xylist の要素の数が 2 ではない場合
            if len(xylist) != 2:
                # エラーメッセージを表示する
                print("x, y の形式ではありません")
                # 残りの while 文のブロックを実行せずに、次の繰り返し処理を行う
                continue
            x, y = xylist
        # (x, y) に着手を行う
        try:
            self.move(int(x), int(y))
        except:
            print("整数の座標を入力して下さい")

    # 決着がついたので、ゲーム盤を表示する
    if verbose:
        if gui:
            self.draw_board(ax)
        else:
            print(self)
            
    return self.status
    
Marubatsu.play = play

修正箇所

def play(self, ai, params=[{}, {}], verbose=True, seed=None, gui=False, size=3):
元と同じなので省略
        # ローカル関数としてイベントハンドラを定義する
        def on_mouse_down(event):
            # Axes の上でマウスを押していた場合で、ゲーム中の場合のみ処理を行う
-           if event.inaxes:
+           if event.inaxes and self.status == Marubatsu.PLAYING:
                x = math.floor(event.xdata)
                y = math.floor(event.ydata)
                self.move(x, y)                
                self.draw_board(ax)
元と同じなので省略               
    
Marubatsu.play = play

上記の 修正後 に、下記のプログラムで play メソッドを実行すると、ゲーム の 決着後 にゲーム盤の 空のマスの上 で マウスを押して も着手を 行えなくなっている ことが確認できます。実際に 何度か遊んで みて確認して下さい。なお、実行結果 は省略します。

mb.play(ai=[None, None], gui=True)

本記事 では 採用しません が、ゲーム が 決着した際 に、ipywidgets から、イベントハンドラ の 登録を削除 することで、着手を 行えなくする という方法もあります。

本記事 がその方法を 採用しない理由 は、今後の記事で、ゲーム の リセットボタン を表示することで、play メソッドを 新しく実行しなくても、新しいゲーム を 開始できる ようにするからです。ゲーム が 決着した際 に、ipywidgets から、イベントハンドラ の 登録を削除 すると、リセットボタンを押して 新しいゲーム を 開始する際 に、再びイベントハンドラを ipywidgets に 登録する必要 が 生じてしまいます。

なお、ipywidgets から、イベントハンドラ の 登録を削除 する方法は、mpl_disconnect というメソッドを利用します。

mpl_disconnect の詳細は、下記のリンク先を参照して下さい。

フロー駆動型とイベント駆動型のフローチャート

2024/04/08：図と説明が 一部間違っていた ので修正しました。

処理の流れ が良く わからなくなっている人 が いるかもしれません ので、gui が False の場合に play メソッドを実行した際に行われる フロー駆動型プログラミングの処理 と、gui が True の場合に play メソッドを実行した際に行われる イベント駆動型プログラミングの処理 の フローチャート を示します。

下図は、play メソッドの フローチャート です。オレンジ色 の 長方形 が、play メソッドが 終了する処理 であることを表します。なお、ゲームの 途中経過 や、結果を表示する場合の 処理の流れ を 示したい ので、verbose には True が代入されているものとして verbose に 関する処理 は省略しました。また、テキストボックスに exit を入力 して ゲーム を 途中で終了 する 処理など の 例外的な処理 も省略しました。

フロー駆動型の `play` メソッドのフローチャート

CUI で 〇×ゲーム を 遊ぶ場合 は、下記の方法で play メソッドを実行します。

%matplotlib widget を 実行しない（既に実行していた場合は、%matplotlib inline を実行して %matplotlib widget を 実行する前 の 状態に戻す）
仮引数 gui に対応する 実引数 を省略するか、gui=False を記述して実行する

この場合は、play メソッドの フローチャート は、下図のような フロー駆動型 の処理を 行います。なお、図の点線と 灰色の図形 は、その部分が 実行されない ことを 表します。

フロー駆動型 では %matplotlib widget を 実行しない ので、イベントループ は 実行されません。そのため、play メソッドの処理が 終了した時点 で すべての処理 が終了します。

イベント駆動型の `play` メソッドのフローチャート

GUI で 〇×ゲーム を 遊ぶ場合 は、下記の方法で play メソッドを実行します。

%matplotlib widget を 実行する
gui=True を記述して実行する

この場合は、play メソッドの フローチャート は、下図の 赤線の処理 を行い、イベントハンドラ の登録を 行った後 で、着手を行う前 に play メソッドの 処理が終了 します。

図の「決着がついた？」が no になる のは、以下のような理由です。

ゲーム開始時 の局面は 決着がついていない
次の繰り返し処理 が 行われる前 に play メソッドの 処理が終了 するので、「決着がついた？」が yes に なることはない

%matplotlib widget を 実行する と、下図の フローチャート の処理を行う、イベントループ の処理が実行され、イベント駆動型 の処理が 行われる ようになります。

play メソッドの 処理の中 で、ゲーム盤 の 画像の上 で マウスを押した際 に実行する イベントハンドラ を登録したので、その操作 を 行うたび に、イベントループ から、下図の フローチャート の イベントハンドラ の処理が 呼び出され て実行されます。

イベントループ の フローチャート からわかるように、イベントループ の処理は 終了しない ので、登録した イベントハンドラ は、対応する イベント が 発生するたび に、何度でも 呼び出されて実行されます。そのため、play メソッドが 終了した後 で、画像の上 で マウス を 押すたび に 着手を行う 処理が実行されます。

フロー駆動型とイベント駆動型の違いのまとめ

フロー駆動型 と イベント駆動型 の違いは以下の通りである。

フロー駆動型 は、実行した プログラムが終了 すると、すべての処理 が 終了する
イベント駆動型 は、イベントハンドラ を登録することによって、実行した プログラム の 終了後 に、イベントループ によって、登録した イベントハンドラの処理 が 何度でも実行される

今回の記事のまとめ

今回の記事では、イベント駆動型プログラミング の手法で、マウスを押す ことで 着手を行う という、〇×ゲーム の GUI の 入力部分 を実装し、GUI で 人間どうしの対戦 が 行える ようにしました。次回の記事 では、GUI で AI と対戦 する 処理を記述 します。

本記事で入力したプログラム

以下のリンクから、本記事で入力して実行した JupyterLab のファイルを見ることができます。

以下のリンクは、今回の記事で更新した marubatsu.py です。

次回の記事

更新日時	更新内容
2024/4/8	フローチャートの図と説明が一部間違っていたので修正しました

イベントハンドラ に、決められた以外 の 仮引数 を 勝手に追加 すると エラーが発生 します ↩
cla というメソッドでも clear メソッドと 同じ処理 を行うことができます ↩
Axes も Figure に登録された Artist の一種 だからです ↩