1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

React で 19路盤の碁盤 を作ってみた

Last updated at Posted at 2022-04-19

19路盤の碁盤

完成品 ↓

石を取る

石をブロックとして数えてから、囲われているかを確認しました。
useState だと 描画絡みで変数保持するのが難しいと思ったので、useRef で内部変数を保持しました。
また、石のブロックを取得するのに何も考えないとループしてしまうので、探索時には石を戻らないのと、2次元情報を保持して同一ベクトルが出てきた場合は処理を飛ばす(石探索が例えば「下→右→上→左」の順番になるとループが生じてしまう)のような処理を実装した。

数えられたブロックで、forEach 文を回すところから始まっています。
全てのブロックで、ブロックの周りが違う色の石で囲われているかを確認して、石を取っています。

コウ

自殺手

ただ自殺手か判定するのみならず、取れる石があった場合は自殺手の判定を止める必要があって、苦労しました(155行目からや245行目から)。

棋譜自動再生

SGF ファイルをアップロードすることで、棋譜再生ができる機能も作りました。棋譜の再生「開始」「停止」「再開始」ができます。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?