カードゲームの制作 javascript によるカード・ゲームの制作

カードゲームの制作
javascript によるカード・ゲームの制作 (1)
2015.10
リファレンス情報
タグの種類や javascript 文法については，インターネットでも様々なリソースがあるが，辞書がわりに
１冊本を購入して手元に置いておくと良い。たとえば，
詳解 HTML & CSS & JavaScript 辞典，大藤幹・半場方人著，秀和システム
インターネットでは，たとえば，
HTML クイックリファレンス http://www.htmq.com/
とほほのWWW入門 http://www.tohoho-web.com/www.htm
などを参考にする。
Web ページ（アプリケーション）の構成
Web ページ（アプリケーション）は以下の３要素で構成されることが多い。
(1) HTML (hyper text markup language) 構文で記述された，ドキュメントの構造を定義する要素。
(2) CSS (cascading style sheet) 構文で記述された，ドキュメントの見せ方を定義する要素。
(3) javascript プログラムで記述された，ドキュメント（アプリケーション）の動作を定義する要素。
上記３要素は，１つのファイル内で定義する場合と，複数のファイルで個別に定義する場合がある。アプ
リケーションの仕様が大きい場合が，複数ファイルに分けた方が見やすい。また， javascript プログラムで
は， jQuery 等の「ライブラリ」を追加で読み込むことで，さらに高機能な Web アプリケーションを少な
い工数で作成することができる。
HTML 記述の構成
<!DOCTYPEhtml>//HTML5構文で書かれていることを示す
<html>
<head>
//ヘッダ情報（ページのメタ情報）
</head>
<body>
//ページ情報
ページ本体
</body>
<title>ページタイトル</title>
</html>
「ヘッダ情報」はドキュメント全体に関わる情報を記述する部分。
「ページ情報」は，ドキュメントがブラウザ上で表示されたときに，その内容に対応する部分。
<と>で囲まれた書式を「タグ(tag)」といい，ドキュメントの論理的（または表示的）な意味を指定す
る。
1/8
カードゲームの制作
例えば <title>はタイトルの開始を示すタグで，終了タグ </title>の間に書かれた文字列は，「タイト
ル」であることを意味し，ブラウザ上ではウィンドウのタイトル部分に表示される。開始タグと終了タグに
囲まれた部分を「エレメント」（この場合は titleエレメント）ということもある。
タグ情報自身に意味があるようなタグについては，>の直前に/記号を加える。たとえば，水平罫線タ
グ hr (horizontal rule) は<hr/>，改行タグ br (break) は<br/>等とする。スラッシュの直前には空白
文字を入れる。
CSS （スタイルシート）記述の構成
スタイルシートは HTML 記述内で，
<styletype="text/css">〜</style>
のように style エレメント内で記述する。または，
<linkrel="stylesheet"HREF="スタイルシート外部ファイルのURL"TYPE="text/css"/>
として，外部ファイルの URL を指定する（ファイルの拡張子は .css）。外部ファイルでは <style>タグは
記述しないこと。
HTML 記述のどこに書かれても良いが，通常は head タグ内部に記述する。
javascript 記述の構成
javascript は HTML 内で，
<scripttype="text/javascript">〜</script>
のように script エレメント内で記述する。または，
<scripttype="text/javascript"language="javascript"src="javascriptのURL"></script>
として，外部ファイルの URL を指定する（ファイルの拡張子は .js）。
HTML 記述のどこに書かれても良いが，head タグ内部に記述することが多い。
「神経衰弱ゲーム」の骨組みを作る
以下は「神経衰弱ゲーム」の骨組みとなるファイル trump2012-step00.html のソースリストである。上記
の説明を参考に， HTML タグの構成と， CSS, javascript の組み込み方を確認しなさい。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPEHTML>
<html>
<head>
<metacharset=utf-8/>
<title>神経衰弱ゲーム2012</title>
<scripttype="text/javascript"language="javascript"
src="js/jquery-1.8.2.min.js"></script>
<scripttype="text/javascript"language="javascript"
src="js/jquery-ui-1.9.0.custom.min.js"><script>
<styletype="text/css">

</style>
<scripttype="text/javascript">

2/8
カードゲームの制作
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
</script>
</head>
<body>
<h1>神経衰弱ゲーム2012</h1>
<hr/>
<scripttype="text/javascript">

</script>
<hr/>
</body>
</html>
スタイルシートを記述する
trump2012-step00.htmlの12行目を以下の２行に入れ替えたファイル trump2012-step01.html を作成し
表示しなさい。
body{background-color:lightgreen;}
h1{text-align:center;}
javascriptを記述する
trump2012-step01.htmlの body エレメントを以下に入れ替えたファイル trump2012-step02.html を作成
し表示しなさい。
<body>
<h1>神経衰弱ゲーム2012</h1>
<hr/>
<imgsrc="image/ura1.png"alt="カード"class="card_view"/>
<scripttype="text/javascript">

</script>
<hr/>
</body>
3/8
カードゲームの制作
カードの動作を記述する
以下のように書き直したファイル trump2012-step03.html を作成し表示しなさい。
1 <!DOCTYPEHTML>
2 <html>
3 <head>
4 <metacharset=utf-8/>
5 <title>神経衰弱ゲーム2012</title>
6 7 <scripttype="text/javascript"language="javascript"src="js/
jquery-1.8.2.min.js"></script>
8 <scripttype="text/javascript"language="javascript"src="js/jqueryui-1.9.0.custom.min.js"></script>
9 10 <styletype="text/css">
11 
15 </style>
16 17 <scripttype="text/javascript">
18 
39 </script>
40 </head>
41 42 <body>
43 <h1>神経衰弱ゲーム2012</h1>
44 <hr/>
45 46 <div>
47 <buttononclick="newgame();">新ゲーム</button>
48 </div>
49 50 <imgsrc=""alt="カード"id="card01"class="card_view"onclick="toggle();"/>
51 52 <scripttype="text/javascript">
53 
56 </script>
57 58 <hr/>
59 </body>
60 </html> 4/8
カードゲームの制作
javascript によるカードゲームの制作 (2)
2015.10
MVC (model-view-controller)
MVC はウィンドウ操作等，グラフィカルユーザインターフェース環境を実装するプログラムでよく使われ
る，設計の枠組みである。 View はウィンドウのオブジェクトと目に見える部分，Model は実世界レベル
のオブジェクト。 Controller はマウスクリック等のイベントに対して，ViewとModelを同期させる。
MVC 直線は直接的，破線は間接的Association
Wikipedia (http://ja.wikipedia.org/wiki/Model_View_Controller) より
MVC によるカードゲームの設計
1枚のカードをモデルとして表現すると，以下のような属性は必要になる。これをカードの「モデル」と
して使う。javascriptでは，「コンストラクタ」関数で，各変数を作成することが多い。
・ハートなどスーツ（組）
・数字
・表の柄
・裏の柄
・カードの状態（表，裏，穫られた）
//カードモデルのコンストラクタ
//カードモデルの変数=newCardModel(組,数字,裏の柄,表の柄,現在の状態);
//カードモデルの変数.suitのようにアクセスする。
functionCardModel(s,num,bim,fim,st){
this.suit=s; //組（ハートなど）"h","d","s","c","j"
this.number=num; //番号"01"〜"13"
this.b_image=bim; //裏の柄
this.f_image=fim; //表の柄
this.status=st; //開いていればOPEN,裏ならCLOSE,引かれたらDRAW
}
このモデルの現在の状態を，対応するビューである webページの img に反映させる。
このビューはマウスクリックに対して，コントローラを呼び出し，モデルの状態を変更する。
モデルの状態が変更すると，ビューに反映する。
#card_view
<imgsrc=''alt='card'id='cardviewn"class='card_view'onclick='clicked(n);'/>"
※step-04 による説明。
5/8
カードゲームの制作
乱数の使用
神経衰弱では，カードはシャッフルして伏せられる必要がある。また，カード裏の柄が何種類か用意され
ているので，これらを javascript の乱数生成関数 Math.random() を使って実装する。
練習カードのシャッフルと裏の設定を以下のように書き換えたページ step05 を作成し，動作を確認しな
さい。
//カードのシャッフル
functionshuffle(){
vari,j,temp;
for(i=0;i<card.length;i++){
j=Math.floor(Math.random()*card.length);
//i番目とj番目のカードを入れ替える
temp=card[i];card[i]=card[j];card[j]=temp;
}
}
ーーー
//裏の柄設定
uraim="image/"+URA[Math.floor(Math.random()*URA.length)]+".png";
6/8
カードゲームの制作
javascript によるカードゲームの制作 (3)
2015.10
Math.random() と Math.ﬂoor()
javascript の乱数生成関数 Math.random() は 0 以上 1.0 未満の一様乱数を返す。
同じ式で使われている Math.Ffloor(n) は，nを超えない最も大きい整数を返す。
ゲームの状態遷移
今回の神経衰弱は，「一人遊び（ソリテア）」モードの実装を考える。
ゲームの進め方は，
1. シャッフルしたカードを裏側にして並べる。
2. カードを二枚めくり，
2.1 同じ数字であればその二枚を抜いて，自分のスタックに並べる。
2.2 異なる数字であれば，２枚を裏返す。
3. 全てが自分のスタックに並べられたらゲーム終了。まだなら，step 2 にもどる。
step 2 は具体的には以下の動作をさせる。
2a. カードを１枚めくる（１枚目）。
2b. カードを１枚めくる（２枚目）。
2.1 同じ数字であれば，nミリ秒後にその二枚を抜いて，自分のスタックに並べる：
2.1.1 二枚のカードビューを透明にする。
2.1.2 二枚のカードの柄を，自分のスタックにあるカードビューに表示する。
2.2 異なる数字であれば，nミリ秒後に２枚を裏返す：
2.2.1 二枚のカードビューを裏の柄にする。
7/8
カードゲームの制作
スクリプト実行の時間制御 setTimeout()
ある時間後にjavascriptの式を実行したい場合がある。そのときは，
setTimeout(式,ミリ秒後)
を使う。 setTimeout() が実行されると，式の実行が予約されたあと次の式に実行が移る。この関数は
「タイマーID」を返す。途中でタイムアウトをやめたい場合は， clearTimeout() を使う。
定期的なタイマーは setInterval(),clearInterval() で設定，解除できる。
プログラム中;
tm=setTimeout("card_draw("+card1+");card_draw("+card2+");",DRAW_WAIT);
は，DRAW_WAITミリ秒後に，card_draw("+card1+");card_draw("+card2+");を実行する。
8/8

Download Report