xfy でリバーシゲームをつくってみないか(その2)
svg で オセロ(リバーシ)の画面材料を作ってみた。
マウスでクリックしたら、アクションを起動させたいが、どうすべきなのかが不明。
- http://www.xfy.com/jp/manual/compo/svg/
> > SVGコンポーネント ヘルプ
のオンラインヘルプなどにも説明が見当たらない orz...
$ cat reversi.xvc
<?xml version="1.0"?>
<?com.xfy vocabulary-connection href="reversi.xvcd" ?>
<test:root version="0.1" xmlns:test="http://xmlns.xfy.com/community/samples/test">
</test:root>
$ cat reversi.xml
<?xml version="1.0" encoding="UTF-8"?>
<xvcd:xvcd version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xvcd="http://xmlns.xfy.com/xvcd"
xmlns:instruction="http://xmlns.xfy.com/instruction"
xmlns:function="http://xmlns.xfy.com/function"
xmlns:ctrl="http://xmlns.xfy.com/controls"
xmlns:command="http://xmlns.xfy.com/command"
xmlns:svg="http://www.w3.org/2000/svg"xmlns:test="http://xmlns.xfy.com/community/samples/test"
>
<!-- =====================================================================
Vocabulary
====================================================================== -->
<xvcd:vocabulary name="Reversi" match="test:root" call-template="Root" /><!-- =====================================================================
Template
====================================================================== -->
<xvcd:template name="Root">
<html>
<head>
<title>Reversi</title>
</head>
<body style="background-color:gray;"><div style="padding:5px;">
</div><div style="padding:5px;">
<xvcd:call-template name="svg-part"/>
</div></body>
</html>
</xvcd:template><xvcd:template name="svg-part">
<svg height="240" width="240"
xmlns="http://www.w3.org/2000/svg">
<g transform="translate(40 40)"><rect x="0" y="0" width="160" height="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(13.333%,54.51%,13.333%);fill-rule:nonzero" /><line x1="20" y1="0" x2="20" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="40" y1="0" x2="40" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="60" y1="0" x2="60" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="80" y1="0" x2="80" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="100" y1="0" x2="100" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="120" y1="0" x2="120" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="140" y1="0" x2="140" y2="160"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" /><line x1="0" y1="20" x2="160" y2="20"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="40" x2="160" y2="40"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="60" x2="160" y2="60"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="80" x2="160" y2="80"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="100" x2="160" y2="100"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="120" x2="160" y2="120"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" />
<line x1="0" y1="140" x2="160" y2="140"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter" /><g transform="translate(5 -3)">
<text x="0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">a</text>
<text x="20.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">b</text>
<text x="40.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">c</text>
<text x="60.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">d</text>
<text x="80.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">e</text>
<text x="100.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">f</text>
<text x="120.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">g</text>
<text x="140.0" y="0.0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">h</text>
</g><g transform="translate(-15 18)">
<text x="0" y="0"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">1</text>
<text x="0" y="20"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">2</text>
<text x="0" y="40"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">3</text>
<text x="0" y="60"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">4</text>
<text x="0" y="80"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">5</text>
<text x="0" y="100"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">6</text>
<text x="0" y="120"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">7</text>
<text x="0" y="140"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:20px;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;"
xml:space="preserve">8</text>
</g><g transform="translate(0 160)">
<circle cx="0" cy="20" r="8"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(100%,100%,100%);fill-rule:nonzero" />
<text x="15" y="25"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
xml:space="preserve">xx</text>
<circle cx="50" cy="20" r="8"
style="stroke-opacity:1;stroke:rgb(100%,100%,100%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(0%,0%,0%);fill-rule:nonzero" />
<text x="65" y="25"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
xml:space="preserve">yy</text>
<circle cx="100" cy="20" r="8"
style="stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;fill-opacity:1;fill:rgb(50.196%,50.196%,50.196%);fill-rule:nonzero" />
<text x="115" y="25"
style="fill-opacity:1;fill:rgb(0%,0%,0%);font-size:16;writing-mode:lr-tb;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;"
xml:space="preserve">zz</text>
</g>
</g>
</svg>
</xvcd:template></xvcd:xvcd>
思考ルーチンは、書籍
で入手済み。
このソースは コンソールで操作するアプリ + 思考ルーチンである。
# java ソースを jruby に書き換えてみたりすると、ruby の勉強になるかもしれない。
思考ルーチンを マウスアクションに応じて xvcd から呼び出すようにするだけで xfy での
リバーシベームがつくれるはずだ。
SVG 上でのマウスクリック補足ができなければ、xhtml の textエリアかリスト選択で
打ち手を指定するようにするかな。
web 上では 次の reversi 情報ページを見つけた。
- http://sealsoft.jp/thell/index.html
> > Thell
- http://www.geocities.jp/krp87930/link/reversi.html
> > リバーシのリンク集
- http://www.cs.ualberta.ca/~mburo/ggsa/ggsa.html
> > GGSA homepage
« ピックアップ:DBをファイルシステムのかわりにする Apache モジュール, Undocumented Mac OS X, etc... | トップページ | ピックアップ: 辞書不要の形態素解析エンジン「マリモ」, ポストSVM候補, etc... »
この記事へのコメントは終了しました。
« ピックアップ:DBをファイルシステムのかわりにする Apache モジュール, Undocumented Mac OS X, etc... | トップページ | ピックアップ: 辞書不要の形態素解析エンジン「マリモ」, ポストSVM候補, etc... »
コメント