Brynhildr

KeroRemote

リモートデスクトップエンジニアのブログ。

対人戦専用Web版リバーシ完成

ブラウザで動く対人戦専用Web版リバーシできました。

https://reversi.x-row.net

事の発端は息子がオセロがしたいとゆーのでタブレットで動く無料のオセロのアプリをダウンロードして2人で遊んでいたんですけど遊んでいるうちにその広告がちょっとわずらわしくなってきたので

パパ、作りました。

まだ学校も始まっていない地域もあると思いますし、お子様とオセロで遊ぶようなそんな同じような状況の方がいらっしゃればどうぞどうぞ。我が家にはリアルオセロすらありませんでしたので。

広告も出ないので使いやすいと思います。ダイアログもでないですし文字もでないですしわずらしいものは何もないです。ただリバーシがそこにポツンとあるだけです。

オセロって名前はアカンとゆーのは存じ上げておりますので19世紀のロンドンで生まれたリバーシの方で。

ま、対人戦をメインなんでCPU戦もいらんですしサポート機能みたいのは一切合切なしにしてみました。なるべく画面いっぱいに広がるようになってて文字も出ませんしシンプルの極みです。機能としては挟んだ駒をひっくり返す程度です。終局した時のそれぞれの駒もセルフで数えてください。

今どっちのターンや?は枠の色で判別できるよーになってます。これなかなか良いんじゃないですかね、わかりやすくて。もう既にどっかにありそーですけど。

あと、打てない場合は勝手にスキップします。両者とも打てない場合は終局ですけど特に案内出してませんのでセルフで判断してください。さすがに1色になってしまった場合は分かると思いますけど。

あと、リセットは真ん中の4つの駒をどれかを3回クリックするとリセットされます。終局でなくてもいつでもリセットできます。iOS版のSafariのブラウザとかだとダブルタップで拡大されちゃうので違う駒をタップすると良いかもです。

ちなみに、ブラウザなんで開発言語はJavascriptがメインですかね。PHPで書いてるんですけど。HTMLとCSSも使ってますけど専門じゃないんでかなーりヤヴァイソースです。いや専門でもヤヴァイんですけど。なかなかの面白ソースコードですんでみんといてくださいw

for (;;) { のとことか震え上がりますよね。

あ、でも作っていて意外と楽しかったので小中学校くらいのプログラムの教材としてはリバーシは丁度良いんじゃないかと思いました、マル。

バグあるかもしれんですのでもしあったら修正しますんでご報告おねしゃす。

ネット対戦とか将来的にできたらーいーなーとか。

てことでリバーシを作ってみたんですけど実は仕事の依頼の中にもリバーシがあったので一石二鳥で丁度ええ的な感じでしたんで結果オーライです。ミニゲームのSDKを探すよりこれくらいだったら作った方が早かった的な。こんな感じだったらブラウザコントロールでも動きますしねー。いやこっちの話ですけど。

以上でヤス。




2件のコメント ... ( 管理人承認制 )



はじめまして 初コメントで緊張しますが
リバーシを使ってみて 端の処理にバグがある気がします。(角は問題ないです)
黒のコマで置けないときに置けたり 端の一列が白である場合 逆サイドに黒がないのに
黒を1個置くだけで一列ひっくり返ったりする動きをします。
私の環境だけかもしれませんので違っていたらごめんなさい。
確認をよろしくお願いします。


———-  —————   ———— ←端
 〇      〇 ●      〇 ●
  〇  →   〇   →    ●
  〇〇     〇〇       〇〇


———-   ————  ———– ←端
 〇〇〇  → ●〇〇〇 → ●●●● 


環境:
Windows10 Pro 64bit
Google Chrome バージョン: 83.0.4103.61(Official Build) (64 ビット)
シークレットモードで使用(会社のPC・・・ゴフッ)


不仕事人  2020/05/28


> 端の処理にバグがある気がします


おお、マジですか・・・。早速にソースを確認をしましたところ、途中に駒が置いてなかったらひっくり返せないとゆー判定の部分は「== “n.png”」にしないといけないとこが、なぜか「== “rn.png”」になってまして・・・。完全にバグです!すみませんでした!すぐ直しました!


ご報告ありがとうございます!


IchiGeki  2020/05/28




... 不具合報告の際は、アプリのバージョンやOS等の動作環境の記載を御願い致します。

表記されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
当サイトはAmazon.co.jpアソシエイトプログラムに参加しています。
© 2010 IchiGeki