概要
旅先のカフェに手作りのペグソリティアが置いてあったのですが、攻略できなかったのでthree.jsで作ることにしました。
three.jsを使ったのは作品例が綺麗だったからで、特に意味はありません。
むしろ普通に作るときは使わないほうが楽です。
ペグソリティア
盤上の杭（ペグ）を一つを残して取り除くゲーム。
ペグは以下のルールで動かすことができます(wikiより)。
- 駒が縦横に並んでいてかつその隣に駒がないとき、駒は他の駒を飛び越えることが出来る。
- 飛び越えられた駒は盤から取り除く。
今回はドイツスタイルのペグソリティアを作ります。
three.js
3Dアニメーションを手軽に作れるライブラリです。
カメラと光源クラスを用いて物体からの光の反射を表現したりします。
マウスでのオブジェクト操作には raycasterクラス を使います。
このクラスを使うと、カメラとクリックした点を結ぶ線分上にある物体を取得することができます。
今回は色を変えるのに使っています。
作ったもの（gifです）
緑の玉がペグ、赤い玉がペグが取り除かれた位置を表します。
コードはこちら。手っ取り早くVue.jsでつくりました。
https://github.com/dshintani404/peg_solitaire
感想
「飛び越えられたペグ」はマウスクリックしないので、どうやってオブジェクトを取得するか考えました。
クリックされた2点の中点にマウスを配置して、クリックしたことにする、という雑な手段をとりました。