以前、将棋掲示板を作りたいなと考えてましたが、盤面をTwitterに投稿するだけでも面白いかなと思っていたので、将棋よりも簡単にできそうなオセロをJavaScriptで作ってみることにしました。
今回作った最初の目的は、オセロの盤面をそのままTwitterに投稿し、それを見た挑戦者に続きを打ってもらおうというものです。
また、盤面がTL上では目障りになるかもしれないので、URLでの投稿も可能にして、その場合には盤面の情報も引き継いで二人で打ち合えるように考えました。
Twitterの投稿文字数を考えて、盤面とURLを両方載せるのは無理だと思ってましたが、URLは自動的に短縮してくれるので、両対応もしてみました。
http://www.shurey.com/js/board/reversi.html
画面上の盤面をクリックすると石が表示されたり、ひっくりかえります。
最初は黒石の手番なので置ける石は黒のみになっています。間違って置いた石もそのままでは消すことができません。
配置制限を解除すると、自由に石を動かせるようになります。
Twitterで対戦する場合は、名前欄にお互いのアカウント名を入れます。@から始まるやつです。
自分の手を打ったら、盤面出力、URL出力、対戦出力のどれかのTwitterボタンを押して投稿します。
盤面出力の場合は、相手はそれを見て手動で盤面を作ります。
URL出力の場合は、盤面がないのでURLをクリックすると、次の手順が表示されます。
対戦出力では、盤面とURLが出力されます。
他の掲示板などでも使えるようにテキストの出力も用意してあります。
【課題】
HPでは石部分に記号である●○を使っています。
これをTwitterに投稿すると少しやせて表示されてしまうので、絵文字の⚫⚪を使うようにしてみたら、Androidでは表示できませんでした。
そのため出力は記号のままになっています。
※コメント投稿者のブログIDはブログ作成者のみに通知されます