石取りゲーム

石取ゲームの説明

石取ゲームのルールです。
- 山に積まれた石を、あなたと私(コンピュター)が交互に取り除きます。
- 山の石数(num)と、一度に取り除くことが出来る最大値(max)は乱数で決めます。
- 最後の石を取らされた方が負けです。
  一個だけ残して相手に手を渡せば勝ちです。
- このゲームは必勝パターンが存在していて、大抵の場合先手が勝ちます。
  そこで、人間先手でゲームを始めます。
ゲームを面白くする。
- ゲーム画面のデザインを工夫して下さい。
- 相手が必勝の手を打ってきたとき、何時も一個取るのは芸がありません。
  乱数を使って気づかれないようにして下さい。
- 対戦成績などを表示すると少しは面白くなるでしょうか。
- 効果音やバックミュージックが流れると雰囲気が良くなるのですが。
人間側のプレイはラジオボタンのクリックで行います。
取り除くことが可能な数だけラジオボタンを並べます。
ゲームはパラメータを設定して自分自身を再起コールすることで進めます。
JavaScript では、次々とページを切り替えながら(遷移しながら)ゲームを進める方法が良く使われます。
下記の値をパラメータとして渡します。
- 山に積まれた石の数
- 一度に取り除くことが出来る最大数
- 今回取り除く石の数(最初に呼ばれたときはゼロ)
- 手番(コンピューター or プレイヤー)

プログラムの説明

<body> から init() 関数でゲームの準備をします。
次に num から val 個の石を取り除きます。
disp() 関数で現在の山を表示して play() 関数でプレイします。

<body>
<h2>石取ゲーム</h2>
最後の一個を取らされた方が負けです<br>

<script type="text/javascript">
init();
// num から val 個の石を取り除く 
if (param["num"] >= param["val"])   param["num"] -= param["val"]; 
disp();
play();
</script>

ゲームで使用する関数を Header の中で定義します。
ゲームの準備をする init() 関数です。
渡されたパラメーターを取得します。
val がゼロのときはゲームの終了で "game_index.html" を呼び出します。
パラメーターが無い(最初の呼び出し)ときは num をゼロにします。
次に num と max に乱数で数を設定して、手番をプレイヤーにします。

<script type="text/javascript">
function init()
{
    param = new Array();
    if (window.location.search.length<3)
    {   // 最初の呼び出し
        param["num"] = 0;
    }
    else
    {   // パラメータを取得する
        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]);
            param[paramName] = parseInt(paramValue);
        }
        if (param["val"] == 0)  location.href = "game_index.html";
    }
    if (param["num"] < 1)
    {   // 初期値の設定
        param["num"] = Math.floor(Math.random() * 20)+10;
        param["max"] = Math.floor(Math.random() * 4)+2;
        param["val"] = 0;
        param["teban"] = 1;
    }
}

石を表示する disp() 関数です。
num の数だけ img タグで石を描画します。

function disp()
{   document.write("<br>");
    for(i=0; i<param["num"]; i++)
    {   document.write("<img src='jewel.gif'>");
        if (i%10==9)    document.write("<br>");
    }
}

form を表示して取り除くことが出来る石の数だけボタンを並べます。
石の数が２個以下になればゲームエンドです。
"teban"==1 のときはプレイヤーの手番で、それ以外はコンピューターの手番です。
スマホでは、戻るボタンをクリックしても一度に game_index に戻れません？
そこで END ボタンを追加しました。

function play()
{
    if (param["num"] < 2)
    {   // ゲームの終了
        document.write('<form action="isitori.html" method="get">');
        document.write('<input type="hidden" name="num" value=0>');
        document.write('<input type="hidden" name="max" value=1>');
        document.write('<input type="hidden" name="teban" value=1>');
        if ((param["num"]==1 && param["teban"]==1) ||
            (param["num"]==0 && param["teban"]==-1))
            document.write('<br><input type="text" value="私の勝ちです">');
        else
            document.write('<br><input type="text" value="私の負けです">');
        document.write('<br><br><input type="submit" value="送信">');
        document.write('</form>');
        return;
    }    
    if (param["teban"] == 1)
    {   // プレイヤーがプレイする
        document.write('<form action="isitori.html" method="get">');
        document.write('<input type="hidden" name="num" value=',param["num"],'>');
        document.write('<input type="hidden" name="max" value=',param["max"],'>');
        document.write('<input type="hidden" name="teban" value=-1>');
        w = param["max"];
        if (w>param["num"]) w = param["num"];
        document.write('<br><input type=radio name="val" value=1 CHECKED>1 個取る<br>');
        for(i=2; i<=w; i++)
            document.write('<br><input type=radio name="val" value=',i,'>',i,' 個取る<br>');
        document.write('<br><input type=radio name="val" value=0>ＥＮＤ<br>');
        document.write('<br><input type="submit" value="送信">');
        document.write('</form>');
    }
    else
    {   // コンピュータがプレイする
        mx = param["max"];
        nm = param["num"];
        v = (nm+mx) % (mx+1);
        if (v==0)   v = 1;
        param["num"] -= v;
        document.write('<form action="isitori.html" method="get">');
        document.write('<input type="hidden" name="num" value=',param["num"],'>');
        document.write('<input type="hidden" name="max" value=',param["max"],'>');
        document.write('<input type="hidden" name="teban" value=1>');
        document.write('<br><input type="text" value="私の番です"><br>');
        document.write('<br><input type="submit" value="送信">');
        document.write('</form>');
    }
}
</script>
</head>