三山ゲーム－１

クリックで石を取り除きます。

【Source Code】

<script src="miyama1.js" type="text/javascript"></script>
</head>

<body>
<h1>三山ゲーム－１</h1>
クリックで石を取り除きます。<br><br>

<script type="text/javascript">
Init();
Check();
Play();
</script>

JavaScript の関数は src= で "miyama1.js" を組み込んでいます。
メッセージを確認して「開始」ボタンをクリックして下さい。
三山ゲームでは交互に石を取り除くのですが、今回はマウスのクリックで次々と石を取り除いています。

<script src="miyama1.js" type="text/javascript"></script>

JavaScript では、ページを切り替えながら(遷移しながら)ゲームを進める方法が良く使われます。
このページは再起的に何度も呼び出されてゲームが進行します。
Init(); で三山ゲームの初期化を行います。
Check(); で渡されたパラメータを確認します。
Play(); で本来なら人間とコンピュータが交互にプレイします。

<script type="text/javascript">
Init();
Check();
Play();
</script>

"miyama1.js" の説明です。

最初の呼び出しで簡単なゲームの説明を表示します。
「開始」ボタンがクリックされるとパラメータを設定して再び呼び出されます。
二度目の呼び出しでは、パラメータを取得して P[] に格納します。
一般的には連想配列で受け取るのですが、今回は配列 P で受け取ります。

// 初期化
function Init()
{
    P = new Array();
    if (window.location.search.length<3)
    {   // 最初の呼び出し
        document.write("あなたと私が交互に石を取り除きます<br>");
        document.write("一つの山から幾らでも取り除くことが出来ます<br>");
        document.write("最後の一個を取らされた方が負けです<br>");
        document.write('<form action="miyama1.html" method="get">');
        document.write('<input type="hidden" name="P0" value=0 >');
        document.write('<input type="submit" value="開始">');
        document.write('</form>');
        return;
    }
    // パラメータを取得する
    var query = window.location.search.substring(1);
    var parameters = query.split('&');
    for(i=0; i<parameters.length; i++)
    {
        var element = parameters[i].split('=');
        var paramName = decodeURIComponent(element[0]);
        var paramValue = decodeURIComponent(element[1]);
        P[i] = parseInt(paramValue);
    }
}

受け取ったパラメータをチェックする Check() 関数です。
Check() 関数は直接ゲームには関係しません。

// Parameter Check
function Check()
{
    if (P.length<1)
    {   document.write("null Parameter<br>");
        return;
    }
    for(i=0; i<P.length; i++)
        document.write("P", i, ":", P[i], "  ");
    document.write("<br>");
}

石を表示する Disp() 関数です。
通常は山が３個あるので３回呼ばれます。
n が石の数で、id は山を識別するためのベース値です。
onClick=Click(識別値)で、石をクリックすると Click() 関数が呼び出されます。
詳細はマウスクリックを参照して下さい。

// クリックを設定して石を表示
function Disp(n,id)
{
    //window.alert("disp 関数  n:" + n + "  id:" + id);
    for(i=0; i<n; i++)
    {
        document.write('<img src="img/jewel.gif"onClick=Click(',id+i,')>');
        if (i%5==4)    document.write("　");
    }
    document.write("<br>");
}

山がクリックされたときに呼ばれる Click() 関数です。
id で山の番号とその数(位置)を調べて P[] を更新します。
更新された P[] の値で "miyama1.html" を再起で呼び出します。
本来なら次はコンピュータの手番ですが、今回はプレイヤーが連続して石をクリックします。
ページの呼び出しは Keyword 検索の Link から検索して下さい。

// マウスクリック
function Click(id)
{
    //window.alert(id);
    var y = Math.floor(id/20)+1;
    var n = id%20;
    P[y] = n;
    location.href = "miyama1.html?P0=1" + "&P1=" + P[1] + "&P2=" + P[2] + "&P3=" + P[3];
}

プレイヤーがプレイする Play() 関数です。
P[0] == 0 のとき(開始直後)は、３個の山に乱数で石を設定します。
P[0] == 1 のときはプレイヤーの手番です。
今回はプレイヤーが連続して石をクリックします。
0, 20, 40 のベース値を設定して、Disp() 関数呼び出します。

// プレイ関数
function Play()
{
    if (P[0] == 0)
    {   // 山に石を設定
        P[0] = 1;
        P[1] = Math.floor(Math.random()*15)+1;
        P[2] = Math.floor(Math.random()*15)+1;
        P[3] = Math.floor(Math.random()*15)+1;
    }
    if (P[0] == 1)
    {   // プレイヤーがプレイする(石のクリックで次のステージ)
        Disp(P[1],0);
        Disp(P[2],20);
        Disp(P[3],40);
    }
}

[Next Chapter ↓] 三山ゲーム－２
[Previous Chapter ↑] 三山ゲーム

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)