「トランプその5」の編集履歴（バックアップ）一覧はこちら
「トランプその5」(2013/02/12 (火) 00:39:55) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
このページではカードを使って併合処理を行うアルゴリズムについて学びます
***準備
HTMLとCSSを準備します。
トランプその4で作成したプログラムをForkしましょう。
今回はちょっと準備に時間がかかります。
まずはHTML部分を大改造します。
完成予想図です。
#image(disp2.png)
これまで作ったボタンを移動して名前を変更したりしています。
<html>
<body>
<form name="form1">
<br>
<INPUT TYPE="button" NAME="cmdCalc" value="開始" onclick="start()">
</form>
<div id="disp">
</div>
<form name="form2">
<br>
どのマーク？（0:♠,1:♣, 2:♥, 3:♦）<INPUT TYPE="text" NAME="txtA"><br>
どの数字？(1～13)<INPUT TYPE="text" NAME="txtB"><br>
<INPUT TYPE="button" NAME="cmdPut2" value="指定したカードを返す" onclick="putcard2()">
<br>
手札1
<INPUT TYPE="button" NAME="cmdGet" value="手札1にカードをもらう" onclick="getcard()">
<INPUT TYPE="button" NAME="cmdPlace" value="手札1のカードを場札へ" onclick="placecard()">
<INPUT TYPE="button" NAME="cmdPut" value="手札1のカードを返す" onclick="putcard()">
<INPUT TYPE="button" NAME="cmdSort1" value="並べ替え１" onclick="mycardsort1()">
<INPUT TYPE="button" NAME="cmdSort2" value="並べ替え２" onclick="mycardsort2()">
<div id="disp2">
</div>
場札
<div id="disp3">
</div>
手札2
<INPUT TYPE="button" NAME="cmdGet2" value="手札2にカードをもらう" onclick="getcard2()">
<INPUT TYPE="button" NAME="cmdPlace2" value="手札2のカードを場札へ" onclick="placecard2()">
<INPUT TYPE="button" NAME="cmdSort3" value="並べ替え" onclick="mycardsort3()">
<div id="disp4">
</div>
</form>
</body>
</html>
</form>で閉じる位置を後ろへずらしました。
<div id="disp3">〜</div>タグで表示領域を増やしています。同様にdisp4も作成します。
それぞれ手札1、場札、手札2と名称を付けています。
以下のボタンはここまでの練習課題等で作成済みのボタンです。これから作るボタンのために、名前を変えています。
&bold(){手札1にカードをもらう} getcard()
&bold(){手札1のカードを返す} putcard()
&bold(){並べ替え１} mycardsort1()
&bold(){並べ替え２} mycardsort2()
以下のボタンはこれから新規で作ります。関数名称が重複しないように注意しましょう。
&bold(){手札1のカードを場札へ} placecard()
&bold(){手札2にカードをもらう} getcard2()
&bold(){手札2のカードを場札へ} placecard2()
&bold(){並べ替え} mycardsort3()
ここまで修正ができたところで、ここまでのプログラムが動作しているか確認しておきましょう。
JavaScriptにプログラムを追加します。
大域変数を追加します。
var cards=[];
var mycards=[];
var mycards2=[]; //手札2用の配列 （追加）
var placecards=[]; //場札用の配列 （追加）
var cardcnt;
var mycardcnt;
var mycardcnt2; //手札2の枚数 （追加）
var placecardcnt; //場札の枚数 （追加）
initCardの最後で場札の枚数を初期化しましょう。
function initCard()
{
x=0;
for(i=1;i<=13;i++) {
for(j=0;j<4;j++) {
cards[x]=new Card(j,i);
x++;
}
}
cardcnt=13*4;
placecardcnt=0; // 場札の枚数初期化
}
initMyCardでは手札2用のmycardcnt2も初期化します。
function initMyCard()
{
mycardcnt=0;
mycardcnt2=0; // 手札2の枚数初期化
}
確認が出来たら以下の練習課題に取り組みましょう。基本的にはこれまでに作ったプログラムと同様に作れます。
以下の課題は、併合を学ぶためのツールになる予定です。
***練習
-手札2、場札の表示用の関数(&bold(){dispMyCard2()},&bold(){dispPlaceCard()})を作成しましょう。参考は手札1の表示用関数&bold(){dispMyCard()}です。
--表示領域の指定も間違えないようにしましょう。
--この段階では動作確認できません。次の課題に着手してから確認しましょう。
-手札2にカードをもらうボタン(&bold(){getcard2()})を作成しましょう。
--手札1にカードをもらうボタン(&bold(){getcard()})を参考にしましょう。
--カードは手札の最後に追加するようにしてください
-手札1のカードを場札に出すボタン(&bold(){placecard()})を作成しましょう。
--手札1のカードを返すボタン(&bold(){putcard()})を参考にしましょう。
--手札1の先頭のカードを場札の最後に追加するようにしてください。
-手札2のカードを場札に出すボタン(&bold(){placecard2()})を作成しましょう。
--手札1のカードを場札に出すボタン(&bold(){placecard()})を参考にしましょう。
--手札2の先頭のカードを場札の最後に追加するようにしてください。
-手札2のカードを並べ替えるボタン(&bold(){mycardsort3()})を作成しましょう。
--バブルソートでも挿入ソートでもどちらを使っても良いです。参考にするプログラムは&bold(){mycardsort()}か&bold(){mycardsort2()}です。
**マージ
マージ（併合）処理をする手順について説明します。
マージ処理とは、順番通りに並んだ2組のデータを1組に混ぜる処理です。
当然、マージ後にも順番通りに並ぶように処理します。
前提として、マージする2組は既に順に並んでいるものとします。
また、最後に9999という特殊な値を埋め込みます。
HIGH-VALUEと言いますが、最後の処理が簡単になります。
まず、先頭のカード同士を比較して小さい方のカードを出す事にします。
#image(merge1.png)
一枚出し終わりました。また先頭同士の比較を行います。
等しい場合は、下のカードを出す事にしましょう。
#image(merge2.png)
再び、比較を行います。こんどは上のカードが小さいです。
#image(merge3.png)
今度は下のカードが小さいです。
#image(merge4.png)
同じ値の場合は、下のカードを出します。
#image(merge5.png)
ここでHIGH-VALUE(9999)との比較です。
HIGH-VALUEは最も大きい数字を決めておきます。
小さいカードは、HIGH-VALUEではない方に決まります。
#image(merge6.png)
HIGH-VALUEは最後を表していますから、両方ともHIGH-VALUEになればマージ処理は終了です。
（プログラムの繰り返し条件で表すと、どちらかがHIGH-VALUEの間繰り返します）
#image(merge7.png)
プログラミングに進みましょう。
まずは準備です。
HTML部分に以下のようなボタンを作りましょう。
場所はFORM内ならどこでも良いですが、場札を表示する辺りが良いでしょう。
&bold(){merge()}という関数からプログラムを始めます。
<INPUT TYPE="button" NAME="cmdMerge" value="マージ" onclick="merge()">
JavaScriptで、merge()関数を作成します。
function merge() {
}
このページではカードを使って併合処理を行うアルゴリズムについて学びます
***準備
HTMLとCSSを準備します。
トランプその4で作成したプログラムをForkしましょう。
今回はちょっと準備に時間がかかります。
まずはHTML部分を大改造します。
完成予想図です。
#image(disp2.png)
これまで作ったボタンを移動して名前を変更したりしています。
<html>
<body>
<form name="form1">
<br>
<INPUT TYPE="button" NAME="cmdCalc" value="開始" onclick="start()">
</form>
<div id="disp">
</div>
<form name="form2">
<br>
どのマーク？（0:♠,1:♣, 2:♥, 3:♦）<INPUT TYPE="text" NAME="txtA"><br>
どの数字？(1～13)<INPUT TYPE="text" NAME="txtB"><br>
<INPUT TYPE="button" NAME="cmdPut2" value="指定したカードを返す" onclick="putcard2()">
<br>
手札1
<INPUT TYPE="button" NAME="cmdGet" value="手札1にカードをもらう" onclick="getcard()">
<INPUT TYPE="button" NAME="cmdPlace" value="手札1のカードを場札へ" onclick="placecard()">
<INPUT TYPE="button" NAME="cmdPut" value="手札1のカードを返す" onclick="putcard()">
<INPUT TYPE="button" NAME="cmdSort1" value="並べ替え１" onclick="mycardsort1()">
<INPUT TYPE="button" NAME="cmdSort2" value="並べ替え２" onclick="mycardsort2()">
<div id="disp2">
</div>
場札
<div id="disp3">
</div>
手札2
<INPUT TYPE="button" NAME="cmdGet2" value="手札2にカードをもらう" onclick="getcard2()">
<INPUT TYPE="button" NAME="cmdPlace2" value="手札2のカードを場札へ" onclick="placecard2()">
<INPUT TYPE="button" NAME="cmdSort3" value="並べ替え" onclick="mycardsort3()">
<div id="disp4">
</div>
</form>
</body>
</html>
</form>で閉じる位置を後ろへずらしました。
<div id="disp3">〜</div>タグで表示領域を増やしています。同様にdisp4も作成します。
それぞれ手札1、場札、手札2と名称を付けています。
以下のボタンはここまでの練習課題等で作成済みのボタンです。これから作るボタンのために、名前を変えています。
&bold(){手札1にカードをもらう} getcard()
&bold(){手札1のカードを返す} putcard()
&bold(){並べ替え１} mycardsort1()
&bold(){並べ替え２} mycardsort2()
以下のボタンはこれから新規で作ります。関数名称が重複しないように注意しましょう。
&bold(){手札1のカードを場札へ} placecard()
&bold(){手札2にカードをもらう} getcard2()
&bold(){手札2のカードを場札へ} placecard2()
&bold(){並べ替え} mycardsort3()
ここまで修正ができたところで、ここまでのプログラムが動作しているか確認しておきましょう。
JavaScriptにプログラムを追加します。
大域変数を追加します。
var cards=[];
var mycards=[];
var mycards2=[]; //手札2用の配列 （追加）
var placecards=[]; //場札用の配列 （追加）
var cardcnt;
var mycardcnt;
var mycardcnt2; //手札2の枚数 （追加）
var placecardcnt; //場札の枚数 （追加）
initCardの最後で場札の枚数を初期化しましょう。
function initCard()
{
x=0;
for(i=1;i<=13;i++) {
for(j=0;j<4;j++) {
cards[x]=new Card(j,i);
x++;
}
}
cardcnt=13*4;
placecardcnt=0; // 場札の枚数初期化
}
initMyCardでは手札2用のmycardcnt2も初期化します。
function initMyCard()
{
mycardcnt=0;
mycardcnt2=0; // 手札2の枚数初期化
}
確認が出来たら以下の練習課題に取り組みましょう。基本的にはこれまでに作ったプログラムと同様に作れます。
以下の課題は、併合を学ぶためのツールになる予定です。
***練習
-手札2、場札の表示用の関数(&bold(){dispMyCard2()},&bold(){dispPlaceCard()})を作成しましょう。参考は手札1の表示用関数&bold(){dispMyCard()}です。
--表示領域の指定も間違えないようにしましょう。
--この段階では動作確認できません。次の課題に着手してから確認しましょう。
-手札2にカードをもらうボタン(&bold(){getcard2()})を作成しましょう。
--手札1にカードをもらうボタン(&bold(){getcard()})を参考にしましょう。
--カードは手札の最後に追加するようにしてください
-手札1のカードを場札に出すボタン(&bold(){placecard()})を作成しましょう。
--手札1のカードを返すボタン(&bold(){putcard()})を参考にしましょう。
--手札1の先頭のカードを場札の最後に追加するようにしてください。
-手札2のカードを場札に出すボタン(&bold(){placecard2()})を作成しましょう。
--手札1のカードを場札に出すボタン(&bold(){placecard()})を参考にしましょう。
--手札2の先頭のカードを場札の最後に追加するようにしてください。
-手札2のカードを並べ替えるボタン(&bold(){mycardsort3()})を作成しましょう。
--バブルソートでも挿入ソートでもどちらを使っても良いです。参考にするプログラムは&bold(){mycardsort()}か&bold(){mycardsort2()}です。
**マージ
マージ（併合）処理をする手順について説明します。
マージ処理とは、順番通りに並んだ2組のデータを1組に混ぜる処理です。
当然、マージ後にも順番通りに並ぶように処理します。
前提として、マージする2組は既に順に並んでいるものとします。
また、最後に9999という特殊な値を埋め込みます。
HIGH-VALUEと言いますが、最後の処理が簡単になります。
まず、先頭のカード同士を比較して小さい方のカードを出す事にします。
#image(merge1.png)
一枚出し終わりました。また先頭同士の比較を行います。
等しい場合は、下のカードを出す事にしましょう。
#image(merge2.png)
再び、比較を行います。こんどは上のカードが小さいです。
#image(merge3.png)
今度は下のカードが小さいです。
#image(merge4.png)
同じ値の場合は、下のカードを出します。
#image(merge5.png)
ここでHIGH-VALUE(9999)との比較です。
HIGH-VALUEは最も大きい数字を決めておきます。
小さいカードは、HIGH-VALUEではない方に決まります。
#image(merge6.png)
HIGH-VALUEは最後を表していますから、両方ともHIGH-VALUEになればマージ処理は終了です。
（プログラムの繰り返し条件で表すと、どちらかがHIGH-VALUEの間繰り返します）
#image(merge7.png)
プログラミングに進みましょう。
まずは準備です。
HTML部分に以下のようなボタンを作りましょう。
場所はFORM内ならどこでも良いですが、場札を表示する辺りが良いでしょう。
&bold(){merge()}という関数からプログラムを始めます。
<INPUT TYPE="button" NAME="cmdMerge" value="マージ" onclick="merge()">
JavaScriptで、merge()関数を作成します。
function merge() {
}
HIGH-VALUEを作ります。9999というカードを考えてそれを手札の最後に入れておきます。
カードの枚数には入れないで、mycardcntとmycardcnt2は増やしません。
var highcard = new Card(0,9999);
mycards[mycardcnt]=highcard;
mycards2[mycardcnt2]=highcard;
手札のカードをそれぞれ比較します。小さい方を場札に出します。
&bold(){placecard()}が手札1から場に出す処理、&bold(){placecard2()}が手札2から場に出す処理です。
また、HIGH-VALUEが移動しませんから改めて最後の位置にHIGH-VALUEを入れておきましょう。
if(mycards[0].num<mycards2[0].num) {
placecard();
mycards[mycardcnt]=highcard;
} else {
placecard2();
mycards2[mycardcnt2]=highcard;
}
ここまでで、ボタンを連続で押すとカードが場札の位置でマージされていきます。
マージする前に手札を並び替えるのを忘れずに。
***練習
-merge()を完成させましょう。
--繰り返す条件をHIGH-VALUEを使って表してください。
