スロットマシン - 章 DOM 67 - SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen

第 8 章 DOM 67

A.2 スロットマシン

"transform", attribute);

} };

function Minute() {

this.element = document.getElementById("minute");

this.rotate = function(m, s) { var angle = m * 6 + s * 0.1;

attribute = "rotate(" + angle + ", 200, 200)";

this.element.setAttributeNS(null,

"transform", attribute);

} };

function Second() {

this.element = document.getElementById("second");

this.rotate = function(s) { var angle = s * 6;

attribute = "rotate(" + angle + ", 200, 200)";

this.element.setAttributeNS(null,

"transform", attribute);

} };

]]></script>

</svg>

A.2 スロットマシン

A.2.1 スロットマシンとは何か

この節では、「スロットマシン」と呼ばれるギャンブル機械のSVG文書を紹介したいと思います。

「スロットマシン」(slot machine)という言葉は、もともとはコインを投入することによって作動するギャンブル機械の総称でしたが、現在では、「リールマシン」と呼ばれるギャンブル機械を指して使われることが多いようです。

「リールマシン」(reel machine)というのは、絵柄が描かれた複数個の円筒を回転させて、その回転が停止したときの絵柄の並び方によって配当を決定する、というギャンブル機械のことです。絵柄が描かれたそれぞれの円筒は、「リール」(reel)と呼ばれます。リールマシンを発明したのは、アメリカのCharles Fey(1862–1944)という人です。

A.2.2 スロットマシンのSVG文書

次のSVG文書がスロットマシンなのですが、ただし、かなり単純化してあります。

SVG文書の例 slot.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

</g>

<rect x="50" y="140" width="60" height="30"

onclick="reel1.stop()"/>

<rect x="170" y="140" width="60" height="30"

96 付録A 応用的なSVG文書 onclick="reel2.stop()"/>

<rect x="290" y="140" width="60" height="30"

onclick="reel3.stop()"/>

</g>

<rect x="170" y="220" width="60" height="30"

onclick="start()"/>

<text x="200" y="270">start</text>

</g>

<text id="message" x="200" y="100" font-size="32"

fill="midnightblue">

</text>

</g>

var messageobj =

document.getElementById("message").firstChild;

var reel1 = new Reel("reel1");

var reel2 = new Reel("reel2");

var reel3 = new Reel("reel3");

var status = 0;

setInterval(function() { reel1.increment();

reel2.increment();

reel3.increment();

}, 100);

function Reel(reelid) { this.reelobj =

document.getElementById(reelid).firstChild;

this.n = 1;

this.moving = false;

this.increment = function() { if (this.moving) {

this.reelobj.data = this.n;

if (this.n <= 8) this.n++;

else

this.n = 1;

}; }

this.start = function() { this.moving = true;

};

this.stop = function() { this.moving = false;

status--;

if (status == 0) determine();

} };

function start() { status = 3;

messageobj.data = "";

reel1.start();

reel2.start();

reel3.start();

}

function determine() {

A.3. 15パズル 97 if (reel1.n == reel2.n && reel2.n == reel3.n)

messageobj.data = "Congratulations!";

else if (reel1.n == reel2.n || reel2.n == reel3.n ||

reel3.n == reel1.n)

messageobj.data = "You are looking good.";

elsemessageobj.data = "It’s really too bad.";

]]></script>}

</svg>

遊び方は次のとおりです。

(1) スタートのボタンをクリックすると、リールの回転が開始されます。

(2) それぞれのリールの下にあるストップのボタンをクリックすると、そのリールの回転が停止します。

(3) 三つのリールがすべて停止すると、リールの数字がすべて同じ、二つだけ同じ、まったく異なる、という三通りの結果に応じたメッセージが表示されます。

A.3 15 パズル

A.3.1 15パズルとは何か

この節では、「15パズル」と呼ばれるパズルのSVG文書を紹介したいと思います。

15パズルは、「スライディングブロックパズル」と呼ばれるパズルの一種です。「スライディングブロックパズル」(sliding block puzzle)というのは、盤面の上で駒をスライドさせていって、

特定の駒の配置を作ることを目的とするパズルのことです。

「15パズル」(15 puzzle)は、4×4の升目を持つ盤面と、1から15までの数字が書かれた15 個の駒を使うスライディングブロックパズルです。駒は、初期状態では、

1 2 3 4

5 6 7 8

9 10 11 12 13 14 15

という配置になっています。そして、1箇所だけ空いている升目を利用することによって駒をスライドさせて、目的の配置を作ります。目的となる配置は一つではなく、たとえば、

1 2 3 4

12 13 14 5

11 15 6

10 9 8 7

という渦巻き型などがあります。

A.3.2 15パズルのSVG文書

次のSVG文書は、15パズルで遊ぶことのできるものです。

SVG文書の例 15puzzle.svg

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

xmlns="http://www.w3.org/2000/svg">

var SVG = "http://www.w3.org/2000/svg";

var rsize = 80;

var fsize = 64;

var margin = 40;

var rootobj = document.documentElement;

var board = new Board();

98 付録A 応用的なSVG文書

function Board() {

this.board = new Array(16);

for (var i = 1; i <= 15; i++) { this.board[i] = new Piece(i);

this.board[i].move(Math.floor((i-1)/4), (i-1)%4);

}

this.nulli = 3;

this.nullj = 3;

this.move = function(n) { var piece = this.board[n];

var i = piece.i;

var j = piece.j;

var ni = this.nulli;

var nj = this.nullj;

if (i == ni-1 && j == nj) { // down piece.move(i+1, j);

this.movenull(ni-1, nj);

} else if (i == ni && j == nj+1) { // to right piece.move(i, j-1);

this.movenull(ni, nj+1);

} else if (i == ni+1 && j == nj) { // up piece.move(i-1, j);

this.movenull(ni+1, nj);

} else if (i == ni && j == nj-1) { // to left piece.move(i, j+1);

this.movenull(ni, nj-1);

}; }

this.movenull = function(i, j) { this.nulli = i;

this.nullj = j;

} };

function Piece(n) {

this.pieceobj = document.createElementNS(SVG, "rect");

this.pieceobj.setAttributeNS(null, "width", rsize);

this.pieceobj.setAttributeNS(null, "height", rsize);

this.pieceobj.setAttributeNS(null, "rx", rsize*0.2);

this.pieceobj.setAttributeNS(null, "stroke-width", rsize*0.05);

this.pieceobj.setAttributeNS(null, "stroke", "white");

this.pieceobj.setAttributeNS(null, "fill", "green");

rootobj.appendChild(this.pieceobj);

this.numobj = document.createTextNode(n);

this.textobj = document.createElementNS(SVG, "text");

this.textobj.appendChild(this.numobj);

this.textobj.setAttributeNS(null, "font-family",

"serif");

this.textobj.setAttributeNS(null, "font-size", fsize);

this.textobj.setAttributeNS(null, "text-anchor",

"middle");

this.textobj.setAttributeNS(null, "fill", "white");

rootobj.appendChild(this.textobj);

this.coverobj = document.createElementNS(SVG, "rect");

this.coverobj.setAttributeNS(null, "id", "no" + n);

this.coverobj.setAttributeNS(null, "width", rsize);

this.coverobj.setAttributeNS(null, "height", rsize);

this.coverobj.setAttributeNS(null, "opacity", "0");

this.coverobj.setAttributeNS(null, "onclick",

"move(evt)");

rootobj.appendChild(this.coverobj);

this.move = function(i, j) {

A.4. テニス 99

ドキュメント内 SVG revision revision01 Copyright c Daikoku Manabu This tutorial is licen (ページ 95-99)