石を並べてラジオボタンでプレイ

ラジオボタンで選択した値がパラメータとして渡されます。(val の値が変わる)
【Source Code】
石を表示する jewel_class の最初のバージョン jewel_class1.js を <head> から組み込みます。
jewel_class の基礎は jewel Class を参照して下さい。
<body> の中から jewel_class を呼び出してゲームを行います。
このページは再起的に何度も呼び出されてゲームが進行して行きます。
ページが呼び出されると new jewel_class(); で ObjectClass を生成してパラメータを取得します。
jewel.check(); でパラメータを確認します。
jewel.disp(); で石を描画して、jewel.play(); でラジオボタンでプレイします。
今回は石を取り除かないので、ラジオボタンの値が受け取ったパラメータ(val)に表示されるだけです。
<script src="jewel_class1.js"></script>
</head>

<body>
<h2>石を並べてラジオボタンでプレイ</h2>
ラジオボタンで選択した値がパラメータとして渡されます。(val の値が変わる)<br>

<script type="text/javascript">
var jewel = new jewel_class();
jewel.check();

// 石を表示する
jewel.disp();
// プレイする
jewel.play();
</script>

window.location.search.length はパラメータとして渡された文字列の長さで、３文字以下の時は最初の呼び出しとします。
最初の呼び出しではパラメータが渡されないので num と max に乱数で値を設定します。
num は山に積まれている石の数で、max は一度に取り除くことが出来る最大値です。
これ以外に val でプレイヤーが取り除く石の数と teban で手番がパラメータとして渡されます。
<script type="text/javascript">
function jewel_class()
{
    param = new Array();
    if (window.location.search.length<3)
    {
        param["num"] = Math.floor(Math.random() * 20)+10;
        param["max"] = Math.floor(Math.random() * 4)+2;
        param["val"] = 0;
    }

二度目以降の呼び出しでは、パラメータを取得して param[] に格納します。
パラメータの受け渡しは Keyword 検索の Parameter から検索して下さい。
    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);
        }
    }

this.check 関数はパラメータを確認する関数で、直接ゲームには関係しません。
    // Parameter Check
    this.check = function()
    {
        for(var key in param)
        {   var data = param[key];
            document.write(key, ": ", data, "<br>");
        }
    }

this.disp は param["num"] 個の石を描画する関数です。
１行に１０個ずつ描画しています。
    this.disp = function()
    {
        for(i=0; i<param["num"]; i++)
        {   document.write("<img src='img/jewel.gif'>");
            if (i%10==9)    document.write("<br>");
        }
    }

this.play はラジオボタンでプレイする関数です。
action="isitori1.html" で自分自身を再起的に呼び出します。
JavaScript では、このように次々とページを切り替えながら(遷移しながら)ゲームを進める方法が良く使われます。
type="hidden" は form には表示されない隠しアイテムで、遷移するときにパラメータとして渡します。
val は山から取り除く石の数で、ラジオボタンで選択した値がパラメータとして渡されます。
    // form を表示して取り除く数を選択
    this.play = function()
    {   document.write('<form action="isitori1.html" method="get">');
        document.write('<input type="hidden" name="num" value=', param["num"], '>');
        document.write('<input type="hidden" name="max" value=', param["max"], '>');
        w = param["max"];
        if (w>param["num"]) w = param["num"];
        document.write('<input type=radio name="val" value=1 CHECKED>1 個取る<br>');
        for(i=2; i<=w; i++)
        {   document.write('<input type=radio name="val" value=',i,'>',i,' 個取る<br>');
        }
        document.write('<input type="submit" value="送信">');
        document.write('</form>');
    }
}
</script>

[Next Chapter ↓] 石取ゲーム－２
[Previous Chapter ↑] 石取ゲーム

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