【将棋盤 第8回】駒台の駒を使う

コツコツ将棋盤を作ってます。

使用技術

• Vue.js3
• Vite
• SCSS

yushi-dev.hatenablog.com

今回は、駒台の駒を使えるようにします。

製作中の盤はgithub pagesで公開しています。

nek0meshi.github.io

実装

今回は、既存の機能にちょこちょこ追記するだけです。

駒台の駒を選択した場合は、駒の種類だけを管理します。
（手番や駒のIDは不要）

  data() {
    return {
      selectedTypeOnStand: null,
    }
  },

動かせるマスリストにも、駒台の駒を選択中の処理を追加します。。すでに駒がないマスは、どこにでもおけます。
（厳密には、前にしか進めない歩・香・桂にはさらに制限があるのですが、それは今後の実装）

    currentMovableList() {
      if (this.isSelectedStandPiece) {
        // 駒台の駒が選択されている場合
        const boxes = []
        for (const c of COLUMNS) {
          for (const r of ROWS) {
            if (!this.pieces.find((p) => p.column === c && p.row === r)) {
              boxes.push([c, r])
            }
          }
        }
        return boxes
      }

      ...

駒台上の駒を選択した状態で、盤のマスを選択した時のロジックです。
手番の駒台の駒で、選択した種類の駒を選びます（複数ある場合は先頭の1つ）。

      if (this.selected) {
        this.movePiece(this.selected, column, row)
      } else {
        const piece = this.pieces
          .filter((p) => p.isFirst === this.isFirst)
          .filter((p) => !p.column)
          .find((p) => p.type === this.selectedTypeOnStand)
        this.movePiece(piece, column, row, null, true)
      }

動かす処理（movePiece）の中身は、ほぼそのまま流用できます。
駒を成る処理だけ除いておく必要があることに注意です。

     if (!fromStand) {
        // 駒を成る処理
     }        

作成した画面

角交換四間飛車の、乱戦模様な序盤が再現できるようになりました。

PR

https://github.com/nek0meshi/shogi-board/pull/8

まとめ

将棋のルールいっぱいありすぎてちっとも終わらない...。

そういえば入社して一年過ぎていたので、そんな振り返りの記事もそのうち書きたい。